markdown-it 脚标插件如何实现上标与下标？

Question

**问题：** 在使用 `markdown-it` 解析 Markdown 文本时，如何通过其插件机制实现上标（superscript）和下标（subscript）的渲染？是否需要引入第三方插件，还是可以通过自定义规则来实现？常见的实现方式有哪些，各自的优缺点是什么？

Answer 1

一、背景与需求分析

在使用 markdown-it 解析 Markdown 文本时，开发者常常希望支持更多格式化功能，例如上标（superscript）和下标（subscript）。这些格式在科学论文、化学公式、数学表达等领域尤为重要。

markdown-it 本身并不直接支持上标和下标语法，但其插件机制提供了强大的扩展能力。因此，我们可以通过以下方式实现：

• 引入第三方插件
• 自定义解析规则

二、常见实现方式及其优缺点对比

以下是常见的几种实现方式，以及它们的适用场景和特点：

实现方式	优点	缺点	是否推荐
使用 markdown-it-sub 和 markdown-it-sup	简单易用，社区维护稳定	需要引入多个插件	✅ 推荐
使用 markdown-it-contrib 系列插件	功能丰富，统一管理	可能存在未更新的风险	⚠️ 谨慎使用
自定义规则实现上下标解析	完全可控，无需依赖外部库	开发成本高，需熟悉 AST 构建过程	✅ 推荐（适合高级用户）

三、通过第三方插件实现上下标渲染

这是最常见也是最推荐的方式之一，适用于大多数项目。

1. 安装插件：

   npm install markdown-it-sup markdown-it-sub

2. 配置 markdown-it 实例：

   
   const md = require('markdown-it')()
     .use(require('markdown-it-sup'))
     .use(require('markdown-it-sub'));
   
   console.log(md.render('This is superscript: ^sup^ and subscript: ~sub~.'));
       

输出 HTML 内容如下：

<p>This is superscript: <sup>sup</sup> and subscript: <sub>sub</sub>.</p>

四、自定义规则实现上下标渲染

如果你希望不依赖第三方插件，或者想更深入理解 markdown-it 的插件机制，可以手动实现上下标解析逻辑。

关键步骤包括：

• 创建正则匹配规则
• 注册 token 解析器
• 生成对应的 HTML 标签

graph TD A[开始] --> B[编写正则表达式匹配 ^ 和 ~ 符号] B --> C[创建 rule 函数处理匹配内容] C --> D[注册 inline rule 到 markdown-it] D --> E[构建 token 并插入到 AST 中] E --> F[渲染为 sup 或 sub 标签]

示例代码：自定义上标解析规则

const md = require('markdown-it')();

md.inline.ruler.after('text', 'sup', function (state, silent) {
  const ch = state.src[state.pos];
  if (ch !== '^') return false;

  const start = state.pos + 1;
  const end = state.src.indexOf('^', start);
  if (end === -1) return false;

  if (!silent) {
    const token = state.push('sup_open', 'sup', 1);
    token = state.push('text', '', 0);
    token.content = state.src.slice(start, end);
    state.push('sup_close', 'sup', -1);
  }

  state.pos = end + 1;
  return true;
});

// 添加渲染器
md.renderer.rules.sup_open = () => '<sup>';
md.renderer.rules.sup_close = () => '</sup>';

console.log(md.render('This is a test: ^super text^'));

输出结果为：

<p>This is a test: <sup>super text</sup></p>