Markdown-it 源码分析（二）：探秘 Ruler 和 Token

前端

2023-12-19 05:24:51

引言

Markdown-it 是一个强大的 Markdown 解析器，其运作核心在于两个基本类：Ruler 和 Token。本篇文章将深入分析这两类，揭示 Markdown-it 复杂处理流程背后的秘密。

Ruler：规则之统治者

Ruler 是 Markdown-it 的基石，它定义了一系列用于处理 Markdown 文本的规则。每个 Rule 由以下部分组成：

名称： 唯一的名称，用于标识该规则。
filter： 一个函数，用于判断是否应该应用该规则。
replace： 一个函数，用于对匹配的文本进行修改。

Token：词法单元

Token 是 Markdown-it 处理文本的基本单元，它代表了特定类型的文本，如文本、代码块或标题。每个 Token 包含以下信息：

type： 令牌类型，例如 text、code、heading。
raw： 原始 Markdown 文本。
content： 转换后的 HTML 内容。
map： 原始文本和 HTML 内容之间的映射。

规则的应用

Markdown-it 解析器使用 Ruler 来遍历输入文本，并根据定义的规则应用修改。以下是规则应用过程：

规则选择： 根据当前文本上下文，选择符合的规则。
规则应用： 使用选定的规则的 filter 函数判断是否应用规则。如果符合，则调用 replace 函数对文本进行修改。
Token 生成： 修改后的文本被转化为一个 Token，并存储在 Tokens 数组中。

Token 的处理

一旦 Token 被生成，Markdown-it 将使用它们来构建最终的 HTML 输出。每个 Token 类型都有一个对应的渲染器，负责将 Token 转换为 HTML。

示例：

// Rule 定义
const rule = {
  name: 'bold',
  filter: (state) => state.inlineMode,
  replace: (state, match) => {
    const content = match[1].trim();
    state.tokens.push({
      type: 'bold',
      raw: content,
      content: `<strong>${content}</strong>`
    });
  }
};

// Token 生成
const text = '**bold** ';
const token = {
  type: 'bold',
  raw: 'bold',
  content: '<strong>bold</strong>'
};