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

• [x] Supports blockquote style callouts
• [x] Supports nested blockquote callouts
• [x] Supports 13 types out of the box (with appropriate styling in default theme) - see list below
• [x] Supports aliases for types
• [x] Defaults to note callout for all other types eg. > [!xyz]
• [x] 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