VuePress Markdown 文本标记插件配置

让你的 VuePress 站点中的 Markdown 文件支持标记。

标记就是荧光笔效果，给一小段文字加上背景色，视觉上比加粗更跳。写技术文档时用得比想象中多：命令里最容易写错的那个参数、一段配置里真正起作用的那一行说明、踩坑记录里必须注意的前提条件，这些地方光靠加粗有时压不住，读者扫一遍还是会漏掉。

标准 Markdown 里没有这个语法。行内强调只有 * 和 ** 两级，语义上对应 em 和 strong，再往上就没有了。想加背景色只能手写 <mark> 标签，或者塞一个带内联样式的 span。前者其实可以接受，mark 是 HTML5 的标准标签，浏览器默认给黄色背景；但在正文里反复插标签，源文件读起来很割裂，尤其一段话里标记两三处的时候。

这个插件补的就是一套简短标记，编译时转成 mark 标签。选 == 作为符号是因为它跟 Markdown 现有的成对符号风格一致，而且这个组合在正文里几乎不会自然出现，不容易误触发。

配置

一个 mark 开关。它只加解析规则，不带样式，颜色由主题的 mark 标签样式决定，不满意可以自己在样式文件里覆盖。

// .vuepress/config.ts
import { mdEnhancePlugin } from 'vuepress-plugin-md-enhance';

export default {
  plugins: [
    mdEnhancePlugin({
      // 开启标记
      mark: true,
    }),
  ],
};

// .vuepress/config.js
import { mdEnhancePlugin } from 'vuepress-plugin-md-enhance';

export default {
  plugins: [
    mdEnhancePlugin({
      // 开启标记
      mark: true,
    }),
  ],
};

语法

使用 == == 进行标记。请注意两边需要有空格。

这句「两边需要有空格」指的是标记整体跟前后文字之间要留空格，不是 == 和被标记内容之间留空格。也就是写成 前面 ==内容== 后面，而不是 == 内容 ==。原因在于 markdown-it 判定行内标记的开闭边界时会看符号紧邻的字符：== 后面紧跟非空白字符才算开标记，== 前面紧邻非空白字符才算闭标记。把空格写进符号内侧，这两个条件都不满足，结果是原样输出四个等号。

对中文来说这条规则有点别扭，因为中文本来不写空格，加上之后视觉上会多出两处间隙。这属于 markdown-it 行内规则的通用行为，加粗、斜体在中文环境下也有类似问题，习惯了就好。

另外要注意 == 不能跨段落使用，行内标记的作用域限制在一个段落之内，开标记后面没有在同段落里找到闭标记，整段都会按字面输出。行内代码里的 == 不会被处理。

例子

下面第一行是渲染效果，代码块里是对应的源码。

VuePress Theme Hope 非常 强大!

VuePress Theme Hope ==非常== 强大!

产出的是语义化的 <mark>非常</mark>。这个标签在规范里的含义是「因当前上下文而需要引起注意的文字」，跟纯粹为了好看而加背景色是有区别的，用在划重点这个场景上正好对得上。也因为是标准标签，搜索引擎和屏幕阅读器都能正常处理里面的文字，不会因为加了高亮就丢内容。