@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] 警告文字

选项

alertNamesstring[]

默认值['tip', 'warning', 'caution', 'important', 'note']

允许的警告名称。

deepboolean

默认值false

是否允许深层的警告语法。

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;

提示开始标签渲染函数。

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;

提示结束标签渲染函数。

titleRendererRendererRule

提示标题渲染函数。

示例

注

注释文字

重要

重要文字

提示

提示文字

注意

注意文字

警告

警告文字

示例

> [!note]
> 注释文字

> [!important]
> 重要文字

> [!tip]
> 提示文字

> [!warning]
> 注意文字

> [!caution]
> 警告文字

样式

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