Skip to main content
Deno 2 is finally here šŸŽ‰ļø
Learn more

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.

Warning

This fork is specifically designed to take advantage of native CSS features. Its output is not obsidian-syntax compatible, nor does the configuration aim to be compatible either.

The specific reason for this fork is to have optimized HTML output that reduces code size by taking advantage of CSS instead of multiple HTML elements to display things properly. Only use this if you know that you would want this. However, this fork does try to keep its output as close as possible to the original design of obsidianā€™s callouts.

As a final note, this fork aims to have its markup validate properly with HTML-Validate as the author uses it for her personal site.

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):

Warning

This is not the output generated by this fork, but I will not be updating the readme to reflect the output, I donā€™t have the mental bandwidth to do so. Sorry.

<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>

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