rehype-gfm-alert

A rehype plugin to use GFM style alert.

Install

npm i rehype-gfm-alert rehype-raw

⚠️ rehype-raw is required to convert icon to HTML.

Use

For example:

import rehypeStringify from 'rehype-stringify';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeGFMAlert from 'rehype-gfm-alert';
import rehypeRaw from 'rehype-raw';
import { unified } from 'unified';

const process = (markdown: string): string => {
  const file = unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypeGFMAlert)
    .use(rehypeRaw)
    .use(rehypeStringify)
    .processSync(markdown);

  return String(file).trim();
};

Simply

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

With Title

> [!CAUTION] This is Danger!
> Negative potential consequences of an action.

Config

unified().use(remarkQuoteCite[, options])

type AlertTypes = "note" | "tip" | "important" | "warning" | "caution";
type Options = {
  tagName?: string;
  alertClasses?: Record<AlertTypes, string[]>;
  icons?: Record<AlertTypes, string>;
  iconClasses?: Record<AlertTypes, string[]>;
  labels?: Record<AlertTypes, string>;
  labelClasses?: Record<AlertTypes, string[]>;
};

tagName

HTML tag name for alert block.

Default: aside

alertClasses

Arrays of HTML class name for each type of alert block.

Default:

{
  note:      ['alert', 'alert-note'],
  tip:       ['alert', 'alert-tip'],
  important: ['alert', 'alert-important'],
  warning:   ['alert', 'alert-warning'],
  caution:   ['alert', 'alert-caution'],
}

icons

Icon for each type of alert. You can use SVG (<svg>...</svg>)

default:

{
  note:      '📢',
  tip:       '💡',
  important: '💬',
  warning:   '⚠️',
  caution:   '⛔️',
}

⚠️ Icons are processed as raw HTML string, thus rehype-raw is required.

iconClasses

Arrays of HTML class name for each icon.

Defaults:

{
  note:      ['alert-icon'],
  tip:       ['alert-icon'],
  important: ['alert-icon'],
  warning:   ['alert-icon'],
  caution:   ['alert-icon'],
}

labels

Fallback labels for each type of alert. These labels are overwritten with individually specified titles (See 'With Title' above).

Default:

{
  note:      'Note: ',
  tip:       'Tip: ',
  important: 'Important: ',
  warning:   'Warning: ',
  caution:   'Caution: ',
}

labelClasses

Arrays of HTML class name for labels.

Default:

{
  note:      ['alert-label'],
  tip:       ['alert-label'],
  important: ['alert-label'],
  warning:   ['alert-label'],
  caution:   ['alert-label'],
}