从零实现一个 Markdown 解析器：从词法分析到 HTML 渲染的完整工程指南

每天有超过 5000 万开发者在使用 Markdown——GitHub 的 README、技术博客、API 文档、甚至 LLM 的输出格式都依赖它。但你有没有想过，当你写下 **粗体** 时，解析器内部到底发生了什么？从零实现一个 Markdown 解析器是理解编译原理（词法分析、语法分析、AST 构建）的最佳实战项目——它比 JSON 解析器复杂，比编程语言解析器简单，恰好处于"有挑战但可完成"的甜蜜区间。本文将用 TypeScript 从零构建一个支持 CommonMark 核心规范的 Markdown 解析器，覆盖词法分析（Lexer）、块级解析（Block Parser）、行内解析（Inline Parser）和 HTML 渲染四大阶段。

🧠 一、Markdown 解析器的架构设计

1.1 解析流水线：四个阶段

一个生产级 Markdown 解析器的处理流程分为四个阶段，每个阶段职责清晰、可独立测试：

📌 **记住：**Markdown 不是正则表达式能搞定的。很多人试图用 replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') 来"解析" Markdown，这在简单场景下能用，但遇到嵌套语法（如 **粗体_斜体_**）、转义字符、代码块中的干扰内容时会彻底崩溃。正确的做法是走完整的解析流水线。

1.2 为什么不用正则替换？

来看一个经典问题：解析 * 开头的列表项和强调语法：

// ❌ 错误写法：用正则"解析" Markdown
// 这段代码无法处理嵌套、转义、代码块内的星号
function naiveParse(md) {
  // 无法区分列表项 * 和强调 *
  // 无法处理 `code *not italic*` 中的星号
  // 无法处理 **粗体中的*斜体*** 嵌套
  return md
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    .replace(/^\* (.+)$/gm, '<li>$1</li>');
}

// ✅ 正确写法：基于 Token 的解析
// 每个 Token 携带类型、位置和上下文信息

正则替换的根本问题是没有上下文感知能力——它不知道当前是否在代码块内、不知道 * 是列表标记还是强调标记、不知道嵌套层级。这就是为什么我们需要一个真正的解析器。

1.3 CommonMark 规范速览

CommonMark 是 Markdown 的标准化规范（https://commonmark.org），由 John MacFarlane 主导，目标是消除原始 Markdown 的歧义。我们实现的解析器将遵循 CommonMark 的核心规则：

• 块级元素：段落、标题（ATX/Setext）、代码块（围栏/缩进）、引用块、列表（有序/无序）、水平分割线、HTML 块
• 行内元素：强调（*/_）、加粗（**/__）、行内代码、链接、图片、自动链接、HTML 行内标签
• 优先级规则：代码块 > HTML 块 > 引用 > 标题 > 列表 > 段落

⚡ **关键结论：**CommonMark 规范有 600+ 个测试用例，覆盖了各种边界情况。我们不需要实现全部，但核心规则必须遵守——否则你的解析器在真实场景中会出各种诡异的 bug。

🔧 二、从零实现：词法分析与块级解析

2.1 Token 定义与词法分析器

词法分析器（Lexer）的任务是将原始文本切分成 Token 流。对于 Markdown 来说，词法分析主要处理块级元素的识别：

// markdown-lexer.ts — Markdown 词法分析器
// 将原始文本切分为块级 Token 流

interface Token {
  type: string;        // Token 类型
  raw: string;         // 原始文本
  line: number;        // 起始行号
  depth: number;       // 嵌套深度（用于引用块）
  content?: string;    // 内容（去掉标记后的文本）
  level?: number;      // 标题级别（1-6）
  lang?: string;       // 代码块语言标识
  ordered?: boolean;   // 是否有序列表
  indent?: number;     // 缩进层级
}

class MarkdownLexer {
  private src: string;
  private pos: number = 0;
  private line: number = 1;
  private tokens: Token[] = [];

  // 块级元素的正则模式（按优先级排列）
  private static PATTERNS = {
    // 围栏代码块：``` 或 ~~~
    fencedCode: /^(`{3,}|~{3,})([^\s`]*)\s*$/,
    // ATX 标题：# ~ ######
    atxHeading: /^(#{1,6})\s+(.+?)(?:\s+#+\s*)?$/,
    // 水平分割线：---, ***, ___
    hr: /^([-*_])\s*\1\s*\1[\s\1]*$/,
    // 引用块：>
    blockquote: /^(>{1,})\s?(.*)$/,
    // 无序列表：* / + / -
    unorderedList: /^([*+-])\s+(.+)$/,
    // 有序列表：1. / 2.
    orderedList: /^(\d{1,9})[.)]\s+(.+)$/,
    // Setext 标题下划线
    setextUnderline: /^(={3,}|-{3,})\s*$/,
    // 空行
    blankLine: /^\s*$/,
  };

  constructor(src: string) {
    this.src = src;
  }

  tokenize(): Token[] {
    const lines = this.src.split('\n');
    let i = 0;

    while (i < lines.length) {
      const line = lines[i];
      const trimmed = line.trimStart();
      const indent = line.length - trimmed.length;

      // 1. 空行
      if (MarkdownLexer.PATTERNS.blankLine.test(trimmed)) {
        this.tokens.push({ type: 'blank', raw: line, line: i + 1, depth: 0 });
        i++;
        continue;
      }

      // 2. 围栏代码块（消耗多行）
      const fenceMatch = trimmed.match(MarkdownLexer.PATTERNS.fencedCode);
      if (fenceMatch) {
        const fence = fenceMatch[1];
        const lang = fenceMatch[2] || '';
        const codeLines: string[] = [];
        const fenceChar = fence[0];
        const fenceLen = fence.length;
        i++; // 跳过开始行

        // 读取直到结束围栏
        while (i < lines.length) {
          const codeLine = lines[i];
          const codeTrimmed = codeLine.trimStart();
          // 结束围栏：相同字符、至少相同长度、后面只有空白
          if (
            codeTrimmed.startsWith(fenceChar.repeat(fenceLen)) &&
            codeTrimmed.slice(fenceLen).trim() === ''
          ) {
            i++;
            break;
          }
          codeLines.push(codeLine);
          i++;
        }

        this.tokens.push({
          type: 'code_block',
          raw: lines.slice(i - codeLines.length - 2, i).join('\n'),
          line: i - codeLines.length - 1,
          depth: 0,
          content: codeLines.join('\n'),
          lang,
        });
        continue;
      }

      // 3. ATX 标题
      const headingMatch = trimmed.match(MarkdownLexer.PATTERNS.atxHeading);
      if (headingMatch) {
        this.tokens.push({
          type: 'heading',
          raw: line,
          line: i + 1,
          depth: 0,
          content: headingMatch[2].trim(),
          level: headingMatch[1].length,
        });
        i++;
        continue;
      }

      // 4. 水平分割线
      if (MarkdownLexer.PATTERNS.hr.test(trimmed)) {
        this.tokens.push({ type: 'hr', raw: line, line: i + 1, depth: 0 });
        i++;
        continue;
      }

      // 5. 引用块
      const bqMatch = trimmed.match(MarkdownLexer.PATTERNS.blockquote);
      if (bqMatch) {
        const depth = bqMatch[1].length;
        const content = bqMatch[2];
        this.tokens.push({
          type: 'blockquote',
          raw: line,
          line: i + 1,
          depth,
          content,
        });
        i++;
        continue;
      }

      // 6. 无序列表
      const ulMatch = trimmed.match(MarkdownLexer.PATTERNS.unorderedList);
      if (ulMatch && indent < 4) {
        this.tokens.push({
          type: 'list_item',
          raw: line,
          line: i + 1,
          depth: 0,
          content: ulMatch[2],
          ordered: false,
          indent: Math.floor(indent / 2),
        });
        i++;
        continue;
      }

      // 7. 有序列表
      const olMatch = trimmed.match(MarkdownLexer.PATTERNS.orderedList);
      if (olMatch && indent < 4) {
        this.tokens.push({
          type: 'list_item',
          raw: line,
          line: i + 1,
          depth: 0,
          content: olMatch[2],
          ordered: true,
          indent: Math.floor(indent / 2),
        });
        i++;
        continue;
      }

      // 8. Setext 标题下划线（需要回溯检查上一行）
      const setextMatch = trimmed.match(MarkdownLexer.PATTERNS.setextUnderline);
      if (
        setextMatch &&
        this.tokens.length > 0 &&
        this.tokens[this.tokens.length - 1].type === 'paragraph'
      ) {
        const prev = this.tokens[this.tokens.length - 1];
        const level = setextMatch[1][0] === '=' ? 1 : 2;
        this.tokens[this.tokens.length - 1] = {
          type: 'heading',
          raw: prev.raw + '\n' + line,
          line: prev.line,
          depth: 0,
          content: prev.content,
          level,
        };
        i++;
        continue;
      }

      // 9. 默认：段落（合并连续非空行）
      const paraLines: string[] = [trimmed];
      const startLine = i + 1;
      i++;
      while (i < lines.length) {
        const nextLine = lines[i];
        const nextTrimmed = nextLine.trimStart();
        // 遇到空行、块级元素起始时停止
        if (
          MarkdownLexer.PATTERNS.blankLine.test(nextTrimmed) ||
          MarkdownLexer.PATTERNS.fencedCode.test(nextTrimmed) ||
          MarkdownLexer.PATTERNS.atxHeading.test(nextTrimmed) ||
          MarkdownLexer.PATTERNS.hr.test(nextTrimmed) ||
          MarkdownLexer.PATTERNS.blockquote.test(nextTrimmed)
        ) {
          break;
        }
        paraLines.push(nextTrimmed);
        i++;
      }

      this.tokens.push({
        type: 'paragraph',
        raw: paraLines.join('\n'),
        line: startLine,
        depth: 0,
        content: paraLines.join('\n'),
      });
    }

    return this.tokens;
  }
}

// 使用示例
const lexer = new MarkdownLexer(`# Hello World

这是一个 **Markdown** 解析器。

\`\`\`typescript
const x = 42;
\`\`\`

- 列表项 1
- 列表项 2
`);

const tokens = lexer.tokenize();
console.log(JSON.stringify(tokens, null, 2));

运行这段代码，你会得到一个结构化的 Token 数组，每个 Token 都有明确的类型、行号和内容。这是构建 AST 的基础。

💡 提示：词法分析器的关键设计决策是逐行处理而非逐字符处理。Markdown 的块级元素天然以行为单位，逐行处理更符合直觉，也更容易处理引用块嵌套和列表缩进。行内元素（强调、链接等）留到行内解析阶段处理。

2.2 块级解析器：从 Token 流到 AST

块级解析器的任务是将扁平的 Token 流组织成树形结构（AST）。核心挑战是处理嵌套——引用块内可以有列表，列表项内可以有代码块：

// markdown-block-parser.ts — 块级解析器
// 将 Token 流转换为嵌套的 AST 节点

interface ASTNode {
  type: string;
  children?: ASTNode[];
  content?: string;
  level?: number;
  lang?: string;
  ordered?: boolean;
  raw?: string;
}

class BlockParser {
  private tokens: Token[];
  private pos: number = 0;

  constructor(tokens: Token[]) {
    this.tokens = tokens;
  }

  parse(): ASTNode[] {
    const ast: ASTNode[] = [];

    while (this.pos < this.tokens.length) {
      const token = this.tokens[this.pos];
      const node = this.parseToken(token);
      if (node) ast.push(node);
    }

    return ast;
  }

  private parseToken(token: Token): ASTNode | null {
    switch (token.type) {
      case 'blank':
        this.pos++;
        return null; // 空行通常作为分隔符，不产生节点

      case 'heading':
        this.pos++;
        return {
          type: 'heading',
          level: token.level,
          content: token.content,
          raw: token.raw,
        };

      case 'code_block':
        this.pos++;
        return {
          type: 'code_block',
          content: token.content,
          lang: token.lang,
          raw: token.raw,
        };

      case 'hr':
        this.pos++;
        return { type: 'hr', raw: token.raw };

      case 'blockquote':
        return this.parseBlockquote();

      case 'list_item':
        return this.parseList();

      case 'paragraph':
        this.pos++;
        return {
          type: 'paragraph',
          content: token.content,
          raw: token.raw,
        };

      default:
        this.pos++;
        return { type: 'unknown', raw: token.raw };
    }
  }

  // 解析引用块（支持嵌套）
  private parseBlockquote(): ASTNode {
    const children: ASTNode[] = [];
    const contentLines: string[] = [];

    while (this.pos < this.tokens.length && this.tokens[this.pos].type === 'blockquote') {
      const token = this.tokens[this.pos];
      if (token.depth === 1) {
        contentLines.push(token.content || '');
      }
      this.pos++;
    }

    // 递归解析引用块内的内容
    const innerLexer = new MarkdownLexer(contentLines.join('\n'));
    const innerTokens = innerLexer.tokenize();
    const innerParser = new BlockParser(innerTokens);
    const innerAst = innerParser.parse();

    return {
      type: 'blockquote',
      children: innerAst,
      raw: contentLines.join('\n'),
    };
  }

  // 解析列表（支持有序/无序、嵌套）
  private parseList(): ASTNode {
    const items: ASTNode[] = [];
    const firstToken = this.tokens[this.pos];
    const ordered = firstToken.ordered;
    const listType = ordered ? 'ordered_list' : 'unordered_list';

    while (this.pos < this.tokens.length && this.tokens[this.pos].type === 'list_item') {
      const token = this.tokens[this.pos];
      items.push({
        type: 'list_item',
        content: token.content,
        indent: token.indent,
        raw: token.raw,
      });
      this.pos++;
    }

    return {
      type: listType,
      ordered,
      children: items,
    };
  }
}

// 完整解析流水线
const md = `# 标题

> 这是一段引用
> 包含 **粗体** 文本

1. 第一项
2. 第二项
`;

const lexer = new MarkdownLexer(md);
const tokens = lexer.tokenize();
const parser = new BlockParser(tokens);
const ast = parser.parse();
console.log(JSON.stringify(ast, null, 2));

⚠️ **警告：**引用块的递归解析是 Markdown 解析器中最容易出 bug 的地方。关键是正确处理 > 前缀的剥离和重新词法化。很多开源解析器（如 marked 的早期版本）在这里翻车，导致嵌套引用渲染错误。

🚀 三、行内解析与 HTML 渲染

3.1 行内解析器：处理强调、链接和代码

行内解析器处理段落和标题中的行内标记。这是最复杂的部分，因为行内元素可以嵌套、有优先级，且 * 和 _ 的行为规则不同：

// markdown-inline-parser.ts — 行内解析器
// 处理强调、加粗、行内代码、链接、图片

interface InlineNode {
  type: string;
  content?: string;
  children?: InlineNode[];
  href?: string;
  title?: string;
  alt?: string;
}

class InlineParser {
  private src: string;
  private pos: number = 0;

  constructor(src: string) {
    this.src = src;
  }

  parse(): InlineNode[] {
    const nodes: InlineNode[] = [];

    while (this.pos < this.src.length) {
      const char = this.src[this.pos];

      // 1. 行内代码（最高优先级，不解析内部内容）
      if (char === '`') {
        const code = this.parseInlineCode();
        if (code) { nodes.push(code); continue; }
      }

      // 2. 图片 ![alt](url)
      if (char === '!' && this.src[this.pos + 1] === '[') {
        const img = this.parseImage();
        if (img) { nodes.push(img); continue; }
      }

      // 3. 链接 [text](url)
      if (char === '[') {
        const link = this.parseLink();
        if (link) { nodes.push(link); continue; }
      }

      // 4. 加粗 **text** 或 __text__
      if (
        (char === '*' && this.src[this.pos + 1] === '*') ||
        (char === '_' && this.src[this.pos + 1] === '_')
      ) {
        const bold = this.parseBold(char);
        if (bold) { nodes.push(bold); continue; }
      }

      // 5. 强调 *text* 或 _text_
      if (char === '*' || char === '_') {
        const em = this.parseEmphasis(char);
        if (em) { nodes.push(em); continue; }
      }

      // 6. 普通文本（收集到下一个特殊字符）
      const text = this.parsePlainText();
      if (text) nodes.push(text);
    }

    return nodes;
  }

  private parseInlineCode(): InlineNode | null {
    const match = this.src.slice(this.pos).match(/^(`+)(.+?)\1/);
    if (!match) return null;
    this.pos += match[0].length;
    return { type: 'inline_code', content: match[2] };
  }

  private parseImage(): InlineNode | null {
    const match = this.src.slice(this.pos).match(/^!\[([^\]]*)\]\(([^)]+?)(?:\s+"([^"]*)")?\)/);
    if (!match) return null;
    this.pos += match[0].length;
    return { type: 'image', alt: match[1], href: match[2], title: match[3] };
  }

  private parseLink(): InlineNode | null {
    // 先找结束的 ]
    let bracketEnd = this.pos + 1;
    let depth = 1;
    while (bracketEnd < this.src.length && depth > 0) {
      if (this.src[bracketEnd] === '[') depth++;
      if (this.src[bracketEnd] === ']') depth--;
      bracketEnd++;
    }
    if (depth !== 0) return null;

    // 检查后面是否有 (url)
    const rest = this.src.slice(bracketEnd);
    const urlMatch = rest.match(/^\(([^)]+?)(?:\s+"([^"]*)")?\)/);
    if (!urlMatch) return null;

    const text = this.src.slice(this.pos + 1, bracketEnd - 1);
    this.pos = bracketEnd + urlMatch[0].length;

    // 递归解析链接文本中的行内元素
    const innerParser = new InlineParser(text);
    const children = innerParser.parse();

    return {
      type: 'link',
      href: urlMatch[1],
      title: urlMatch[2],
      children,
    };
  }

  private parseBold(marker: string): InlineNode | null {
    const doubleMarker = marker + marker;
    const endIdx = this.src.indexOf(doubleMarker, this.pos + 2);
    if (endIdx === -1) return null;

    const content = this.src.slice(this.pos + 2, endIdx);
    this.pos = endIdx + 2;

    const innerParser = new InlineParser(content);
    return { type: 'strong', children: innerParser.parse() };
  }

  private parseEmphasis(marker: string): InlineNode | null {
    const endIdx = this.src.indexOf(marker, this.pos + 1);
    if (endIdx === -1) return null;

    const content = this.src.slice(this.pos + 1, endIdx);
    this.pos = endIdx + 1;

    const innerParser = new InlineParser(content);
    return { type: 'emphasis', children: innerParser.parse() };
  }

  private parsePlainText(): InlineNode {
    let end = this.pos + 1;
    while (end < this.src.length) {
      const c = this.src[end];
      if (c === '`' || c === '[' || c === '!' || c === '*' || c === '_') break;
      end++;
    }
    const text = this.src.slice(this.pos, end);
    this.pos = end;
    return { type: 'text', content: text };
  }
}

⚡ 关键结论：行内解析的核心难点是左分隔符和右分隔符的匹配规则。CommonMark 规范定义了详细的"flanking"规则——左强调分隔符前面不能是 Unicode 字母，右强调分隔符后面不能是 Unicode 字母。简化版本的解析器可以忽略这些细节，但生产级实现必须处理。

3.2 HTML 渲染器：AST 到字符串

渲染器是最简单的部分——递归遍历 AST，将每个节点转换为对应的 HTML：

// markdown-renderer.ts — HTML 渲染器
// 将 AST 递归转换为 HTML 字符串

function renderToHTML(nodes: ASTNode[]): string {
  return nodes.map(renderNode).join('\n');
}

function renderNode(node: ASTNode): string {
  switch (node.type) {
    case 'heading': {
      const level = node.level || 1;
      const content = renderInline(node.content || '');
      return `<h${level}>${content}</h${level}>`;
    }

    case 'paragraph':
      return `<p>${renderInline(node.content || '')}</p>`;

    case 'code_block': {
      const lang = node.lang ? ` class="language-${escapeHTML(node.lang)}"` : '';
      const code = escapeHTML(node.content || '');
      return `<pre><code${lang}>${code}</code></pre>`;
    }

    case 'blockquote': {
      const children = node.children ? renderToHTML(node.children) : '';
      return `<blockquote>\n${children}\n</blockquote>`;
    }

    case 'ordered_list': {
      const items = (node.children || [])
        .map((item) => `<li>${renderInline(item.content || '')}</li>`)
        .join('\n');
      return `<ol>\n${items}\n</ol>`;
    }

    case 'unordered_list': {
      const items = (node.children || [])
        .map((item) => `<li>${renderInline(item.content || '')}</li>`)
        .join('\n');
      return `<ul>\n${items}\n</ul>`;
    }

    case 'hr':
      return '<hr />';

    default:
      return node.content || '';
  }
}

function renderInline(text: string): string {
  const parser = new InlineParser(text);
  const nodes = parser.parse();
  return nodes.map(renderInlineNode).join('');
}

function renderInlineNode(node: InlineNode): string {
  switch (node.type) {
    case 'text':
      return escapeHTML(node.content || '');
    case 'strong':
      return `<strong>${(node.children || []).map(renderInlineNode).join('')}</strong>`;
    case 'emphasis':
      return `<em>${(node.children || []).map(renderInlineNode).join('')}</em>`;
    case 'inline_code':
      return `<code>${escapeHTML(node.content || '')}</code>`;
    case 'link': {
      const text = (node.children || []).map(renderInlineNode).join('');
      const href = escapeHTML(node.href || '');
      const title = node.title ? ` title="${escapeHTML(node.title)}"` : '';
      return `<a href="${href}"${title}>${text}</a>`;
    }
    case 'image': {
      const alt = escapeHTML(node.alt || '');
      const src = escapeHTML(node.href || '');
      return `<img src="${src}" alt="${alt}" />`;
    }
    default:
      return node.content || '';
  }
}

// HTML 实体转义（防 XSS）
function escapeHTML(str: string): string {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

// 完整流水线示例
const markdown = `# Hello World

这是一个 **Markdown** 解析器，支持 *强调* 和 \`行内代码\`。

> 引用块中也可以有 [链接](https://example.com)

\`\`\`typescript
const parser = new MarkdownParser(input);
const html = parser.toHTML();
\`\`\`

- 无序列表项 1
- 无序列表项 2
`;

const lexer = new MarkdownLexer(markdown);
const tokens = lexer.tokenize();
const parser2 = new BlockParser(tokens);
const ast = parser2.parse();
const html = renderToHTML(ast);
console.log(html);

3.3 生产级 Markdown 解析器性能对比

市面上有多个成熟的 Markdown 解析器，它们的实现策略和性能差异很大：

📌 **记住：**如果你需要完整的 CommonMark 兼容性，用 markdown-it 或 commonmark.js；如果你追求极致性能且不介意包大小，用 cmark-gfm 的 WASM 版本；如果你只需要核心 Markdown 语法且追求小体积，自己实现是完全可行的。

💡 四、避坑指南与扩展思路

4.1 最常见的五个坑

在实现 Markdown 解析器的过程中，以下是开发者最容易踩的坑：

• ❌ 用全局正则处理嵌套语法 — *粗体*中的*文字* 会匹配错误，必须用递归下降
• ❌ 忽略代码块中的干扰内容 — 代码块内的 #、>、* 都不应该被解析为 Markdown 标记
• ❌ 不做 HTML 转义 — 用户输入 <script>alert(1)</script> 会变成 XSS 漏洞
• ❌ 忽略 Setext 标题 — 很多解析器只实现 ATX 标题（#），遗漏了 = 和 - 下划线风格
• ❌ 列表和段落的边界判断错误 — 缩进 4 个空格的列表项应该被解析为代码块而非列表

✅ 正确做法：

• 使用递归下降解析嵌套结构
• 维护"是否在代码块内"的状态标志
• 所有用户输入在渲染前必须经过 escapeHTML()
• 逐行解析，遇到空行时重置上下文
• 严格遵循 CommonMark 的缩进规则（4 空格 = 1 层缩进）

4.2 扩展方向

一个基础的 Markdown 解析器可以向多个方向扩展：

1. GFM（GitHub Flavored Markdown）扩展：表格、任务列表（- [x]）、删除线（~~text~~）、自动链接
2. 插件系统：像 markdown-it 一样支持自定义规则插件，允许用户注册新的块级/行内元素
3. Source Map：记录每个 AST 节点对应的源文件位置，用于 LSP（语言服务器协议）的悬停提示和错误定位
4. 流式解析：对于 LLM 的流式输出，实现增量解析——每次只解析变化的部分，而非重新解析整个文档
5. AST 序列化：将 AST 序列化为 JSON 或二进制格式，用于缓存和跨进程传输

✅ 总结

从零实现一个 Markdown 解析器的核心收获：

• 词法分析不等于正则替换——需要逐行扫描、维护状态、处理多行结构（代码块、列表）
• 块级解析的核心是嵌套栈——引用块内有列表、列表内有代码块，递归下降是最自然的实现方式
• 行内解析的难点是分隔符匹配——* 和 _ 的左右分隔规则不同，嵌套时优先级也不同
• HTML 渲染必须做转义——不转义就是 XSS 漏洞，这不是可选项
• 性能优化靠的是减少正则回溯和避免不必要的字符串拷贝，而非用更高级的算法

如果你的项目只需要简单的 Markdown 渲染，自己实现一个轻量解析器（~15KB）完全可行。如果需要完整的 CommonMark + GFM 兼容性，推荐 markdown-it（插件生态好）或 marked（体积小、速度快）。

⚡ **关键结论：**Markdown 解析器是学习编译原理的最佳入门项目——它涵盖了词法分析、语法分析、AST 构建和代码生成的完整流程，但复杂度远低于编程语言解析器。如果你能自己实现一个支持嵌套、转义和代码块的 Markdown 解析器，你就已经掌握了编译器前端的核心技能。