Skip to main content

@mdit/plugin-alert

Plugin to support GFM style alerts. (Ref)

Usage

import MarkdownIt from "markdown-it";
import { alert } from "@mdit/plugin-alert";

const mdIt = MarkdownIt().use(alert);

mdIt.render(`
> [!warning]
> Warning Text
`);

Syntax

With this plugin you can create block alerts with blockquote starting with [!ALERT_NAME] like:

> [!warning]
> This is warning text

The ALERT_NAME isn't case sensitive and can be the following string:

  • note
  • tip
  • important
  • caution
  • warning

Nesting and escaping

  • By default, GFM style alerts can only be placed at root, but you can use deep: true to enable deep and nesting support:

    md.use(alert, {
  name: "warning",
  deep: true,
});
    > [!warning]
> This is warning text
>
> > [!warning]
> > This is a nested warning

- > [!warning]
  > This is warning text

    will be

    Warning

    This is warning text

    Warning

    This is a nested warning

    • Warning

      This is warning text

  • Escaping can be done by adding \ to escape the ! [ or ] marker:

    > [\!warning]
> This is warning text

> \[!warning]
> This is warning text

    will be

    [!warning] This is warning text

    [!warning] This is warning text

Options

alertNames

  • Type: string[]
  • Default: ['important', 'note', 'tip', 'warning', 'caution']
  • Details: Allowed alert names.

deep

  • Type: boolean
  • Default: false
  • Details: Whether to handle deep alert syntax.

openRender

  • Type: RenderRule
/**
 * @param tokens - List of tokens.
 * @param index - Current token index.
 * @param options - Markdown-it options.
 * @param env - Markdown-it environment.
 * @param self - Markdown-it renderer instance.
 *
 * @returns Rendered HTML string.
 */
type RenderRule = (
  tokens: Token[],
  index: number,
  options: Options,
  env: Env,
  self: Renderer,
) => string;
  • Details: Hint opening tag render function.

closeRender

  • Type: RenderRule
/**
 * @param tokens - List of tokens.
 * @param index - Current token index.
 * @param options - Markdown-it options.
 * @param env - Markdown-it environment.
 * @param self - Markdown-it renderer instance.
 *
 * @returns Rendered HTML string.
 */
type RenderRule = (
  tokens: Token[],
  index: number,
  options: Options,
  env: Env,
  self: Renderer,
) => string;
  • Details: Hint closing tag render function.

titleRender

  • Type: RenderRule
  • Details: Hint title render function.

Demo

Note

This is note text

Important

This is important text

Tips

This is tip text

Warning

This is warning text

Caution

This is caution text

Demo
> [!note]
> This is note text

> [!important]
> This is important text

> [!tip]
> This is tip text

> [!warning]
> This is warning text

> [!caution]
> This is caution text

Styles

With default options, you can import @mdit/plugin-alert/style to apply styles for alert box.