Marked.js 中 HTML 代码块缩进问题的解析与处理

在 Markdown 解析器 Marked.js 的使用过程中，开发者可能会遇到 HTML 代码被意外转换为代码块的情况。本文将通过一个典型场景，深入分析其背后的原理并提供解决方案。

问题现象

当开发者尝试在 Marked.js 中解析包含缩进的 HTML 内容时，例如：

const message = `
    <h2>标题内容</h2>`;

解析结果会意外地将 HTML 标签转换为代码块形式：

<pre><code>&lt;h2&gt;标题内容&lt;/h2&gt;</code></pre>

原理分析

这种现象源于 Markdown 规范中的两个核心特性：

1. 缩进代码块规则：Markdown 规定，任何以四个或更多空格（或一个制表符）开头的行都会被识别为代码块。

2. HTML 处理规则：Marked.js 默认支持内联 HTML，但前提是这些 HTML 内容必须符合 Markdown 的段落结构要求。

当 HTML 内容被缩进后，解析器会优先将其识别为代码块而非内联 HTML，从而导致标签被转义显示。

解决方案

针对这个问题，开发者可以采用以下方法：

1. 移除缩进（推荐）：

const message = `<h2>标题内容</h2>`;

2. 使用非缩进的多行字符串：

const message = `
<h2>
    标题内容
</h2>`;

3. 配置解析选项（需谨慎）：

marked.setOptions({
    pedantic: false,  // 禁用严格模式
    gfm: true         // 启用 GitHub Flavored Markdown
});

最佳实践建议

1. 对于纯 HTML 内容，建议避免使用缩进
2. 混合 Markdown 和 HTML 时，注意段落间的空行分隔
3. 在复杂场景下，可以先通过预处理步骤规范化文本格式
4. 测试时建议使用简单的示例验证解析行为

扩展思考

这个问题实际上反映了 Markdown 设计哲学中的一个重要特性：内容与呈现分离。Markdown 通过简单的缩进规则实现了代码块的表示，这种设计虽然提高了可读性，但也带来了此类边界情况。理解这些底层原理有助于开发者更有效地使用 Markdown 解析器。