@mdit/plugin-alert

Plugin to support GFM style alerts. (Refopen in new window)

Usage

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

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

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

const MarkdownIt = require("markdown-it");
const { alert } = require("@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

interface MarkdownItAlertOptions {
  /**
   * Allowed alert names
   *
   * @default ['important', 'note', 'tip', 'warning', 'caution']
   */
  alertNames?: string[];

  /**
   * Whether handle deep alert syntax
   *
   * @default false
   */
  deep?: boolean;

  /**
   * Hint opening tag render function
   */
  openRender?: RenderRule;

  /**
   * Hint closing tag render function
   */
  closeRender?: RenderRule;

  /**
   * Hint title render function
   */
  titleRender?: RenderRule;
}

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

> [!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.