@mdit/plugin-alert

Plugin to support GFM style alerts. (Ref)

Usage

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

const mdIt = new 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, {
    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

alertNamesstring[]

Default['tip', 'warning', 'caution', 'important', 'note']

Allowed alert names.

deepboolean

Defaultfalse

Whether to handle deep alert syntax.

openRendererRendererRule

/**
 * @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 RendererRule = (
  tokens: Token[],
  index: number,
  options: Required<MarkdownItOptions>,
  env: Env | undefined,
  self: Renderer,
) => string;

Hint opening tag render function.

closeRendererRendererRule

/**
 * @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 RendererRule = (
  tokens: Token[],
  index: number,
  options: Required<MarkdownItOptions>,
  env: Env | undefined,
  self: Renderer,
) => string;

Hint closing tag render function.

titleRendererRendererRule

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.