@flowershow/remark-callouts

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

@import "remark-callouts/styles.css";

or in your app.js

import "remark-callouts/styles.css";

Supported Callout Types

• note
• tip aliases: hint, important
• warning alises: caution, attention
• abstract aliases: summary, tldr
• info
• todo
• success aliases: check, done
• question aliases: help, faq
• failure aliases: fail, missing
• danger alias: error
• bug
• example
• quote alias: cite

Change Log

[2.0.0] - 2022-11-21

Added

• Classname for icon.

Changed

• Extract css styles which can be imported separately.

[1.0.2] - 2022-11-03

Fixed

• Case insensitive match for types.

License

MIT