@mdit/plugin-alert

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

使用

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

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

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

语法

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

> [!warning]
> 警告文字

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

note
tip
important
caution
warning

嵌套和转义

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

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

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

选项

alertNames

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

deep

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

openRender

类型：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;

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

closeRender

类型：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;

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

titleRender

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

示例

注

注释文字

重要

重要文字

提示

提示文字

注意

注意文字

警告

警告文字

示例

> [!note]
> 注释文字

> [!important]
> 重要文字

> [!tip]
> 提示文字

> [!warning]
> 注意文字

> [!caution]
> 警告文字

样式

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