markdown-ext

@vuepress/plugin-markdown-ext

为 VuePress 添加基本的 GFM 支持，以及一些有用的功能。

使用

npm i -D @vuepress/plugin-markdown-ext@next
.vuepress/config.ts
import { markdownExtPlugin } from '@vuepress/plugin-markdown-ext'

export default {
  plugins: [
    markdownExtPlugin({
      // 选项
    }),
  ],
}

语法

脚注

  • 在 Markdown 中使用 [^锚点文字] 来定义脚注。

  • 在之后的任何位置使用 [^锚点文字]: ... 来描述脚注内容。

  • 如果脚注包含多个段落，其后的段落应当保持双层缩进。

脚注 1 链接[1]。

脚注 2 链接[2]。

行内的脚注[3] 定义。

重复的页脚定义[^second]。

Demo
脚注 1 链接[^链接1]。

脚注 2 链接[^链接2]。

行内的脚注^[行内脚注文本] 定义。

重复的页脚定义[^second]。

[^链接1]: 脚注 **可以包含特殊标记**

    也可以由多个段落组成

[^链接2]: 脚注文字。

任务列表

  • 使用 - [ ] 一些文字 渲染一个未勾选的任务项
  • 使用 - [x] 一些文字 渲染一个勾选了的任务项 (我们也支持大写的 X)
Demo
- [ ] 计划 A
- [x] 计划 B

组件

你可以使用 component 代码块来在 Markdown 中添加组件。YAML 和 JSON 的数据格式均受支持:

  • YAML 推荐:

    ```component 组件名称
# 组件数据
```

  • JSON:

    ```component 组件名称
{
  // 组件数据
}
```
Mr.HopeMr.Hope
Demo
```component Badge
text: Mr.Hope
type: tip
```

```component Badge
{
  "text": "Mr.Hope",
  "type": "tip"
}
```

v-pre

你可以使用 v-pre 容器来渲染将任何 mustache 语法作为纯文本渲染。

{{ abc }}

Demo
::: v-pre

{{ abc }}

:::

选项

gfmboolean

是否调整行为和功能，使其更类似于 GitHub Flavored Markdown。

markdown-it 已经默认支持表格与删除线。如果此选项为 true，则会启用以下新功能：

  • 自动链接（在 markdown-it 中命名为 linkify）
  • 硬换行
  • 脚注
  • 任务列表

请注意：并不是所有行为都与 GitHub Flavored Markdown 完全相同。

footnotegfm: Yesboolean

是否启用脚注格式支持。

tasklistgfm: YesMarkdownItTaskListOptions | boolean

是否启用任务列表格式支持。你可以传递一个对象来配置任务列表。

tasklist.disabledboolean
默认值true

是否禁用 checkbox。

tasklist.labelboolean
默认值true

是否使用 <label> 来包裹文字。

breaksgfm: Yesboolean

是否将段落中的 \n 转换为 <br>。

linkifygfm: Yesboolean

是否将类似 URL 的文本转换为链接。

componentboolean

是否启用组件代码块支持。

vPreboolean

是否启用 v-pre 容器支持。

cjkFriendlyboolean

是否启用对强调标记的 CJK 友好支持。未设置时，检测到 CJK 语言（zh、ja、ko）将自动启用。

  1. 脚注 可以包含特殊标记

    也可以由多个段落组成 ↩︎

  2. 脚注文字。 ↩︎

  3. 行内脚注文本 ↩︎