Getting Started

Installation

npm install @r4ai/remark-callout

Usage

import remarkParse from "remark-parse"
import { unified } from "unified"
import remarkCallout from "@r4ai/remark-callout"
import remarkRehype from "remark-rehype"
import rehypeRaw from "rehype-raw"
import rehypeStringify from "rehype-stringify"

const md = `
  > [!note] title here
  > body here
`

const html = unified()
  .use(remarkParse)
  .use(remarkCallout)
  .use(remarkRehype, { allowDangerousHtml: true })
  .use(rehypeRaw)
  .use(rehypeStringify)
  .processSync(md)
  .toString()

console.log(html)

yields:

title here

body here

The preview above is an example implementation.

Callout Title

Callout title can include any inline element.

> [!note] The **reason** for why _this_ ~~is~~ `true` when $a=1$.
> body here

The reason for why this is true when

a=1

body here

Left side is the markdown source, and right side is the rendered HTML.

Caution

remark-gfm and remark-math are required to use strike-through lines and math formulas

Callout Body

Callout body can include any block element.

> [!note] title here
> The **reason** for why _this_ ~~is~~ `true` when $a=1$.
>
> - item 1
> - item 2
>
> ```js
> console.log("Hello, World!")
> ```
>
> $$
> \forall \epsilon > 0, \exists \delta > 0 \text{ s.t. } |x - a| < \delta \Rightarrow |f(x) - b| <div \epsilon
> $$
>
> > Done is better than perfect.

title here

The reason for why this is true when $a=1$ .

item 1
item 2

console.log("Hello, World!");

\forall \epsilon > 0, \exists \delta > 0 \text{ s.t. } |x - a| < \delta \Rightarrow |f(x) - b| < \epsilon

Done is better than perfect.

Callouts can also be nested recursively.

> [!note]
> Nested callout
>
> > [!info]
> > Further nested callout
> >
> > > [!warning]
> > > Even further nested callout

Note

Nested callout

Important

Further nested callout

Caution

Even further nested callout

Foldable Callouts

You can make a callout foldable by adding a plus (+) or a minus (-) directly after the type identifier.

A plus sign expands the callout by default, and a minus sign collapses it instead.

> [!note]- title here
> body here

title here

body here