3个MD语法高频面试题坑点，资深开发避坑指南 官方文档几百页，翻完还是忘？面试被问 MD 渲染细节卡壳？这太正常了。Markdown 看着简单，真在 GitHub、GitLab 或自建博客里用，全是坑。我踩了十年，发现高频面试题里关于 MD 解析的题，往往不问概念，专问“为什么我这段代码不显示”。 别背文档，看这篇。直接给你看现象、查原因、给代码。全是实战里掉进去的泥坑。 坑一：列表嵌套缩进失效，层级全乱 现象 你在写一个多层嵌套列表，子项缩进了，但渲染出来全挤在一行，或者子项跑到了父项外面。GitHub 上看起来还行，换到别的 MD 编辑器里就崩了。 根本原因 Markdown 对缩进极其敏感，但不同解析器对“标准缩进”的定义不一样。CommonMark 规范要求子列表项必须比父列表项缩进 4 个空格（或 1 个 Tab）。很多人习惯用 2 个空格，或者混用 Tab 和空格，导致解析器识别失败。更隐蔽的是，列表项内部如果有多段文本或代码块，缩进规则会变。 正确写法对比 错误写法（2空格缩进，混用Tab）： - 父项一- 子项一- 孙项一 - 父项二正确写法（4空格统一缩进，纯空格）： - 父项一- 子项一- 孙项一 - 父项二复现与修复 用 marked 或 markdown-it 这类主流 NPM 包测试时，2空格缩进常被当作列表项内的普通文本。修复很简单：全文替换，确保所有列表缩进都是 4 个空格。 规避建议 编辑器设置里把 Tab 键映射为 4 个空格。写复杂列表时，先用纯文本模式写，确认结构对了再预览。GitHub 的 Markdown 实现最接近 CommonMark 标准，拿它当基准。 坑二：代码块里的特殊符号被转义，高亮失效 现象 你在代码块里写了 {{variable}} 或 div，渲染出来变成 #123;#123;variable#125;#125; 或 div 不见了。语言高亮也没生效，全是一坨黑字。 根本原因 两个问题叠加。第一，代码块的语言标识必须紧跟在三个反引号后面，不能有空格或换行。写成 ```python 是对的，写成 ``` 换行再写 python 就废了。第二，某些解析器对 HTML 标签处理激进，即使你在代码块里，也可能被当成真正的 HTML 标签解析掉。 正确写法对比 错误写法（语言标识换行，HTML标签未处理）：hello``` ``` 正确写法（语言标识同行，HTML标签用实体或纯文本）： ```html lt;div class=containergt;lt;pgt;hellolt;/pgt; lt;/divgt;或者，如果解析器支持，直接用纯文本描述：```markdown ```text div.container p { color: red; }**复现与修复** 用 `highlight.js` 配合 `marked` 时，语言标识缺失会导致高亮降级。HTML 标签被吞的问题，可以用 `marked` 的 `sanitize` 选项关闭 HTML 转义，或者手动替换 `` 为 `lt;`。**规避建议** 代码块语言标识永远和 ``` 在同一行。写 HTML/CSS/JS 代码示例时，优先用纯文本描述或实体编码。测试时用 `markdown-it` 这类严格遵循 CommonMark 的解析器，它比 `marked` 更规范，能提前暴露问题。## 坑三：表格对齐错乱，移动端直接崩**现象** 表格在桌面端看着整齐，一到手机端列宽全乱，文字挤成一团。或者对齐符号 `:` 写了但没生效，还是左对齐。**根本原因** Markdown 表格的对齐符号 `:` 必须写在分隔符行，且**位置决定对齐方式**。`---` 左对齐，`:---` 左对齐，`---:` 右对齐，`:---:` 居中。很多人把 `:` 写在表头行，或者分隔符行长度不一致，导致解析器无法正确匹配列。更坑的是，**表格单元格内容如果包含换行符，整个表格会断裂**。**正确写法对比**错误写法（对齐符号写错位置，单元格内换行）：```markdown | 姓名 | 年龄 | 城市 | |:----|-----:|:----:| | 张三 | 25 | 北京 | 李四 | 30 | 上海 |正确写法（对齐符号在分隔行，单元格无换行）： | 姓名 | 年龄 | 城市 | |:----|-----:|:----:| | 张三 | 25 | 北京 | | 李四 | 30 | 上海 |复现与修复 用 markdown-it-table 插件时，单元格内换行会直接导致表格解析失败。修复方法是确保每个单元格内容在一行内。对齐不生效时，检查分隔行 |:----|-----:|:----:| 是否和表头列数严格一致，多一个少一个都不行。 规避建议 表格列数不要超过 4 列，移动端友好。对齐符号只写在分隔行。写完后用 markdown-it 的 debug 模式看 AST，能直接看到表格节点是否解析成功。 坑四：行内代码里的反引号被吃掉，显示异常 现象 你想在正文里显示一段代码，比如 let x = 'ab'，结果渲染出来 b` 消失了，或者代码块提前结束。 根本原因 Markdown 行内代码用单个反引号包裹，如果代码内容里包含反引号，整个包裹就废了。正确做法是用双反引号包裹，且双反引号内部可以包含单反引号。但很多人不知道这个规则，或者写的时候双反引号前后多打了空格，导致解析失败。 正确写法对比 错误写法（单反引号包裹含反引号内容）： let x = 'a`b';正确写法（双反引号包裹，无多余空格）： ``let x = 'a`b';``复现与修复 用 marked 测试时，单反引号遇到内容里的反引号会立即结束代码块。双反引号写法是 CommonMark 标准规定的，所有主流解析器都支持。如果双反引号不生效，检查反引号前后是否有多余空格，必须是紧贴内容。 规避建议 写含特殊符号的行内代码时，直接用双反引号。养成习惯：代码内容里有反引号，就用双反引号包裹。测试时用 markdown-it 的 inlineTokens 检查，能直接看到行内代码 token 是否完整。 总结与避坑清单 MD 语法坑，80% 都出在缩进、代码块、表格、行内代码这四个地方。记住几条铁律：列表缩进统一 4 空格，别用 Tab 代码块语言标识和 ``` 同行 表格对齐符号只写在分隔行，单元格不换行 行内代码含反引号就用双反引号工具链上，推荐用 markdown-it + highlight.js + marked 做交叉测试。markdown-it 最严格，能暴露大部分解析问题；marked 最常用，贴近生产环境。两个都过，基本没问题。 你在项目里踩过这个坑吗？评论区聊聊，你遇到过最诡异的 MD 渲染 bug 是什么？