markdown-it-obsidian-callouts

Plugin for markdown-it to support GitHub and Obsidian callouts, as well as codeblock admonitions supported by the Admonition plugin.

It uses Obsidian default icons and callout flavors out of the gate.

Usage

const markdownIt = require('markdown-it');
const mdItObsidianCallouts = require('markdown-it-obsidian-callouts');

const md = new MarkdownIt()
md.use(mdItObsidianCallouts);

Callouts and Admonitions

The following four variations will produce the same html.

Callout:

> [!note] title
> Hello World!
> > [!warning] a warning
> > This is a nested warning callout

A callout with nested code-block admonition:

> [!note] title
> Hello World!
> ~~~ad-warning
> title: a warning
> This is a nested warning callout
> ~~~

Code-block admonition with nested callout:

~~~ad-note
title: title
Hello World!
> [!warning] a warning
> This is a nested warning callout
~~~

Code-block admonition with nested code-block admonition:

~~~~ad-note
title: title
Hello World!
~~~ad-warning
title: a warning
This is a nested warning callout
~~~
~~~~

The above nested admonition will generate the following html (it will sadly be less tidy):

<div class="callout" data-callout="note">
  <div class="callout-title">
    <div class="callout-title-icon">
      <svg ... class="lucide lucide-pencil"> ... </svg>
    </div>
    <div class="callout-title-inner">title</div>
  </div>
  <div class="callout-content">
    <p>Hello World!</p>
    <div class="callout" data-callout="warning">
      <div class="callout-title">
        <div class="callout-title-icon">
          <svg ... class="lucide lucide-alert-triangle"> ... </svg>
        </div>
        <div class="callout-title-inner">a warning</div>
      </div>
      <div class="callout-content">
        <p>This is a nested warning callout</p>
      </div>
    </div>
  </div>
</div>

This emulates Obsidian callout behavior. The element structure amd CSS classes are the same, some mechanics are different.

Icons

Default icons are as used by obsidian, and come from lucide.dev

Version 0.268.0
ISC License
Copyright (c) 2020, Lucide Contributors

Add css

If you use it in other environments like vuepress/vitepress, you may need to add your own css, as this plugin only generates dom structures.

You can use the index.css, The css content is exactly the same as the style of the callout in obsidian (I screened, copied, pasted and modified it from ob). And I adapted the shading mode for vuepress and vitepress.

[!note]

Why not set the default style to make it easier to use?

If you want to default the style in markdown-it, you can only set it on the dom style through property Settings, which can make custom changes difficult

Similar plugins

• https://github.com/alexjv89/markdown-it-obsidian - add suport for obsidian wikilinks
• https://github.com/glitchassassin/markdown-it-obsidian-images - add support for obsidian wikilinks for images
• https://github.com/antfu/markdown-it-github-alerts - support for github alerts as annotated blockquote
• https://github.com/commenthol/markdown-it-admon - rST-style admonitions
• https://github.com/docarys/markdown-it-admonition - Docarys admonitions
• https://github.com/mdit-plugins/mdit-plugins - collection of plugins for markdown-it, including callout-style admonitions