VuePress Markdown 支持上下角标插件配置

让你的 VuePress 站点中的 Markdown 文件支持上下角标。

会需要这个功能，是因为标准 Markdown 规范里压根没有角标语法。CommonMark 定义的行内格式只有强调、行内代码、链接、图片这几类，上下标不在其中。写化学式的 H2O、数学的平方立方、序数词的 1st，或者给一段话加个脚注编号，都没有对应的标记可用。

不装插件的话只有两条退路。一是直接写 HTML 标签 <sup> 和 <sub>，能出效果，但一行文字里混进标签，源文件的可读性会掉得很厉害，写化学方程式的时候尤其明显。二是用 Unicode 里那些上标字符，问题更大：只有部分数字和字母有对应码位，字母缺得七零八落，而且实际显示效果依赖字体，不同平台看着不一样，还搜不到、复制出来也不对。

所以正经做法是给 markdown-it 加一层解析扩展，让它认识一套简短的角标标记，在编译阶段就转成语义正确的 sup 和 sub 标签。vuepress-plugin-md-enhance 把这类扩展打包在一起了，开个开关就能用。

配置

配置写在 .vuepress 目录下的主配置文件里，把插件加进 plugins 数组，然后单独打开这两个开关。两个开关是独立的，只需要下标就只开 sub，互不影响。

下面 TS 和 JS 两个版本的内容是一样的，按自己项目里配置文件的实际后缀选一个。高亮标出的两行就是要加的开关。

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

export default {
  plugins: [
    mdEnhancePlugin({
      // 启用下角标功能
      sub: true,
      // 启用上角标
      sup: true,
    }),
  ],
};

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

export default {
  plugins: [
    mdEnhancePlugin({
      // 启用下角标功能
      sub: true,
      // 启用上角标
      sup: true,
    }),
  ],
};

语法

标记方式和 Markdown 里加粗、斜体那套是一个路子，用一对相同的符号把内容夹住。

• 使用 ^ ^ 进行上角标标注。
• 使用 ~ ~ 进行下角标标注。

有几个细节值得留意。一是这两对符号里面不能有空格，^ th ^ 这种写法不会被识别成角标，会原样输出，因为解析器是靠「符号紧贴内容」来判断边界的。内容里确实要带空格的话，需要用反斜杠转义空格。

二是 ~ 这个符号有歧义风险。Markdown 里连写两个 ~~ 表示删除线，单个 ~ 才是下标，开了 sub 之后写删除线仍然正常，两者靠数量区分。但如果正文里本来就要显示一个字面的 ~，比如写主目录路径，就得写成 \~ 转义掉，或者放进行内代码里，否则可能被当成下标的起始符号。同理，行内代码块内部的内容不会被角标语法处理，这一点符合直觉。

例子

下面第一组是渲染后的效果，第二组是对应的源码写法，对照着看更直观。第一行是序数词的常见排版，第二行是化学式的水分子。

• 19^th
• H₂O

- 19^th^
- H~2~O

编译产物就是普通的 <sup>th</sup> 和 <sub>2</sub>，浏览器原生就会缩小字号并抬高或压低基线，不需要额外写样式。同时因为是语义标签，屏幕阅读器能正确读出来，搜索引擎也能正常提取文字，这是它比 Unicode 上标字符更值得选的地方。