@flowershow/remark-callouts NPM

remark-callouts

Remark plugin to add support for blockquote-based callouts/admonitions similar to the approach of Obsidian and Microsoft Learn style.

Using this plugin, markdown like this:

> [!tip]
> hello callout

Would render as a callout like this:

Features supported

Supports blockquote style callouts
Supports nested blockquote callouts
Supports 13 types out of the box (with appropriate styling in default theme) - see list below
Supports aliases for types
Defaults to note callout for all other types eg. > [!xyz]
Supports dark and light mode styles

Future support:

Support custom types and icons
Support custom aliases
Support Foldable callouts
Support custom styles

Geting Started

Installation

npm install remark-callouts

Usage

import callouts from "remark-callouts";

await remark()
  .use(remarkParse)
  .use(callouts)
  .use(remarkRehype)
  .use(rehypeStringify).process(`\
> [!tip]
> hello callout
`);

HTML output

<div>
  <blockquote class="callout">
    <div class="callout-title tip">
      <span class="callout-icon">
        <svg>...</svg>
      </span>
      <strong>Tip</strong>
    </div>
    <div class="callout-content">
      <p>hello callout</p>
    </div>
  </blockquote>
</div>

Import the styles in your .css file