@mdit/plugin-alert

支持 GFM 风格的警告语法。(参考)

使用

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

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

mdIt.render(`
> [!warning]
> 警告文字
`);

语法

通过此插件，你可以创建以 [!警告名称] 开头的块级警告，如：

> [!warning]
> 警告文字

警告名称 不区分大小写，可以是以下字符串：

note
tip
important
caution
warning

默认情况下，GFM 风格的警告只能放置在根级，但是你可以使用 deep: true 来启用深层和嵌套支持：
```
md.use(alert, {
  deep: true,
});
```
```
> [!warning]
> 警告文字
>
> > [!warning]
> > 嵌套警告文字

- > [!warning]
  > 警告文字
```
会被渲染为
Warning
警告文字
Warning
嵌套警告文字
- Warning
  警告文字
通过添加 \ 转义 ! [ 或 ] 标记来实现转义：
```
> [\!warning]
> 警告文字

> \[!warning]
> 警告文字
```
会被渲染为
[!warning] 警告文字
[!warning] 警告文字

选项

alertNames

类型：string[]
默认值：['tip', 'warning', 'caution', 'important', 'note']
详情：允许的警告名称。

deep

类型：boolean
默认值：false
详情：是否允许深层的警告语法。

openRenderer

类型：RendererRule

/**
 * @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;

详情：提示开始标签渲染函数。

closeRenderer

类型：RendererRule

/**
 * @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;

详情：提示结束标签渲染函数。

titleRenderer

类型：RendererRule
详情：提示标题渲染函数。

示例

Note

注释文字

Important

重要文字

Tip

提示文字

Warning

注意文字

Caution

警告文字

> [!note]
> 注释文字

> [!important]
> 重要文字

> [!tip]
> 提示文字

> [!warning]
> 注意文字

> [!caution]
> 警告文字

在使用默认选项的情况下，你可以在你的项目中导入 @mdit/plugin-alert/style 以应用样式。