markdown-it-vue 插件 options 有哪些配置

• • 1. markdown-it-vue 插件 options 有哪些配置
• • 1.1. 一、基本使用示例
• • 1.2. 二、核心配置项（继承自 markdown-it）
• • 1.3. 三、扩展配置项（markdown-it-vue 专属）
• • 1.3.1. plugins
• • 1.3.2. toc
• • 1.3.3. anchor
• • 1.3.4. emoji
• • 1.3.5. katex
• • 1.3.6. mermaid
• • 1.3.7. highlightjs
• • 1.4. 四、注意事项

1. markdown-it-vue 插件 options 有哪些配置

markdown-it-vue 是基于 markdown-it 封装的 Vue 组件，其配置项分为核心 markdown-it 配置（继承自底层解析器）和markdown-it-vue 扩展配置（专属插件/行为控制）两部分。以下是完整的配置项说明（基于最新稳定版）：

1.1. 一、基本使用示例

先通过示例理解配置的传递方式：

<template>  <markdown-it-vue     :content="mdContent"     :options="mdOptions"     :extendMarkdown="extendMarkdown"  /></template><script>import MarkdownItVue from 'markdown-it-vue'import 'markdown-it-vue/dist/markdown-it-vue.css' // 引入默认样式export default {  components: { MarkdownItVue },  data() {    return {      mdContent: '# Hello markdown-it-vue\n```js console.log("test") ```',      mdOptions: {        // 核心 markdown-it 配置        html: false,        breaks: true,        // 扩展配置        plugins: ['toc', 'emoji', 'katex'],        toc: { includeLevel: [1, 2] },        highlight: (str, lang) => { /* 自定义高亮 */ }      }    }  },  methods: {    // 扩展 markdown-it 实例（可选）    extendMarkdown(md) {      md.use(yourCustomPlugin) // 注册自定义插件    }  }}</script>

1.2. 二、核心配置项（继承自 markdown-it）

这些是 markdown-it 原生配置，markdown-it-vue 完全支持，默认值与 markdown-it 一致（部分有微调）：

1.3. 三、扩展配置项（markdown-it-vue 专属）

用于控制内置插件的行为，是该组件的核心扩展能力：

1.3.1. plugins

• • 类型：Array<String>
• • 默认值：['toc', 'anchor', 'emoji', 'sup', 'sub', 'footnote', 'deflist', 'abbr', 'mark', 'katex', 'mermaid']
• • 说明：指定要启用的内置插件（移除则禁用，减少体积），内置插件列表：

  插件名	功能说明
  toc	生成目录
  anchor	为标题添加锚点链接
  emoji	解析 emoji 语法（如 :smile: → 😊）
  sup/sub	上标（^文本^）/ 下标（~文本~）
  footnote	脚注语法支持
  deflist	定义列表语法支持
  abbr	缩写语法支持
  mark	标记文本（==文本== → 高亮标记）
  katex	数学公式渲染（基于 KaTeX）
  mermaid	流程图/时序图渲染（基于 mermaid）

1.3.2. toc

• • 类型：Object
• • 默认值：{ includeLevel: [1,2,3], containerClass: 'markdown-it-toc', slugify: null }
• • 说明：目录插件的精细化配置：
• • includeLevel：要包含的标题层级（如 [1,2] 仅生成 h1/h2 目录）
• • containerClass：目录容器的 CSS 类名
• • slugify：自定义锚点 slug 生成函数（参数：标题文本，返回：slug 字符串）

1.3.3. anchor

• • 类型：Object
• • 默认值：{ permalink: true, permalinkBefore: true, permalinkSymbol: '#' }
• • 说明：标题锚点插件配置（对应 markdown-it-anchor）：
• • permalink：是否显示锚点链接
• • permalinkBefore：锚点链接是否放在标题左侧
• • permalinkSymbol：锚点链接的符号（默认 #）
• • level：要添加锚点的标题层级（默认 1-6）

1.3.4. emoji

• • 类型：Object
• • 默认值：{ shortcuts: true }
• • 说明：emoji 插件配置：
• • shortcuts：是否启用 emoji 快捷方式（如 :) → 😊）

1.3.5. katex

• • 类型：Object
• • 默认值：{ throwOnError: false, errorColor: '#cc0000' }
• • 说明：数学公式插件配置（兼容 KaTeX 原生配置）：
• • throwOnError：解析错误时是否抛出异常
• • errorColor：公式解析错误的文本颜色
• • 可传入 KaTeX 其他配置（如 displayMode、strict 等）

1.3.6. mermaid

• • 类型：Object
• • 默认值：{ theme: 'default', startOnLoad: true }
• • 说明：流程图插件配置（兼容 mermaid 原生配置）：
• • theme：mermaid 主题（default/dark/forest/neutral 等）
• • startOnLoad：是否自动渲染 mermaid 图表
• • 可传入 mermaid 其他配置（如 fontSize、flowchart 等）

1.3.7. highlightjs

• • 类型：Object
• • 默认值：{ auto: true, languages: null }
• • 说明：代码高亮（highlight.js）配置：
• • auto：是否自动检测代码语言
• • languages：指定要加载的高亮语言（如 ['javascript', 'python']，默认加载所有语言，体积较大）

1.4. 四、注意事项

1. 1. 样式自定义：无专门的样式配置项，需覆盖 markdown-it-vue.css 中的类名（如 .markdown-it-toc、.code-highlight 等）。
2. 2. 自定义插件：通过 extendMarkdown 方法扩展 markdown-it 实例（示例见上文），可注册任意 markdown-it 插件。
3. 3. 版本差异：不同版本的配置可能略有调整，建议参考 官方仓库 对应版本的文档。
4. 4. 性能优化：禁用不需要的插件（从 plugins 数组移除）、指定 highlightjs.languages 可显著减小打包体积。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。