markdown-ext

约 681 字大约 2 分钟

2025-12-15

为 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 中使用 [^锚点文字] 来定义脚注。
在之后的任何位置使用 [^锚点文字]: ... 来描述脚注内容。必须为英文冒号
如果脚注包含多个段落，其后的段落应当保持双层缩进。
提示
使用Typora编辑的时候，需要切换到 源代码模式 输入4个空格以实现多段落脚注。

脚注 1 链接^[1]。

脚注 2 链接^[2]。

行内的脚注^[3] 定义。

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

Demo

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

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

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

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

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

    也可以由多个段落组成

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

任务列表

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

计划 A
计划 B

Demo

- [ ] 计划 A
- [x] 计划 B

组件

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

YAML 推荐:

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

JSON:

```component 组件名称
{
  // 组件数据
}
```

text: Mr.Hope
type: tip

{
  "text": "Mr.Hope",
  "type": "tip"
}

Demo

```component Badge
text: Mr.Hope
type: tip
```

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

v-pre

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

::: v-pre

:::

Demo

::: v-pre

{{ abc }}

:::

选项

gfm

类型：boolean
详情：
是否调整行为和功能，使其更类似于 GitHub Flavored Markdown。
markdown-it 已经默认支持表格与删除线。如果此选项为 true，则会启用以下新功能：
- 自动链接（在 markdown-it 中命名为 linkify）
- 硬换行
- 脚注
- 任务列表
请注意：并不是所有行为都与 GitHub Flavored Markdown 完全相同。

footnote

类型：boolean
详情：是否启用脚注格式支持。
在 GFM 中启用：是

tasklist

类型：MarkdownItTaskListOptions | boolean

interface MarkdownItTaskListOptions {
  /**
   * 是否禁用 checkbox
   *
   * @default true
   */
  disabled?: boolean

  /**
   * 是否使用 `<label>` 来包裹文字
   *
   * @default true
   */
  label?: boolean
}

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

breaks

类型：boolean
详情：是否将段落中的 \n 转换为 <br>。
在 GFM 中启用：是

linkify

类型：boolean
详情：是否将类似 URL 的文本转换为链接。
在 GFM 中启用：是

component

类型：boolean
详情：是否启用组件代码块支持。

vPre

类型：boolean
详情：是否启用 v-pre 容器支持。

脚注 可以包含特殊标记
也可以由多个段落组成 ↩︎
脚注文字。 ↩︎
行内脚注文本 ↩︎