代码块里的三个反引号把正文截断了

JS 打地基

写这篇文章的时候遇到的:正文里要贴 Markdown 代码块的例子,结果从那个例子开始,后面所有内容都不渲染了。

Markdown 的围栏是三个反引号开始、三个反引号结束。我在示例里写的 ``` 被解析器当成了"围栏结束",于是围栏提前闭合,后面的正文变成了普通段落,标题层级全乱。

标准解法是用更长的围栏包它:四反引号包三反引号是合法的,解析器要求结束围栏的长度不少于开始的那个。

````markdown
```ts
const a = 1
```

这个写法在渲染器里能正确显示,但它在"取正文第一张图"这类二次解析里又制造了新问题——我的 og:image 逻辑要扫正文找图片语法,围栏长度变了,正则就得跟着变。

那次之后我改了两处做法。

剥代码块的时候按"围栏标记的长度"配对,不是写死三个反引号:

```ts
const body = raw.replace(/^[ \t]*(`{3,}|~{3})[\s\S]*?\n[ \t]*\1[ \t]*$/gm, '')
```

\1 是反向引用,保证开始和结束用的是同一串、同样长度。这条正则我改了三版才对,前两版都假设了长度为三。

另一处是行内代码。正文里 `![alt](url)` 这样的示例本来不该被当成图片,但如果我先扫全文找图片语法,它就会命中。所以顺序必须是"先整段剥掉围栏和行内代码,再找图片"。

这个 bug 的收获不在语法,在顺序:任何"从 Markdown 里提取点什么"的功能,都得先把不该看的部分挖干净。

相关阅读