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 是什么?