🛑 This repository has been merged into Flowershow monorepo.

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

marcchehab/remark-callouts