前言:

这份教程还有网页版，内容一致:

code-block-nesting.stellafortuna.dpdns.org

(使用纯flexbox)

https://66119b41.code-block-nesting.pages.dev/

(使用纯grid 导致了表格报废w)

^-^ Markdown 代码块嵌套指南：如何在套娃里再放一个套娃

写提示词、写教程、写技术文档的时候，你大概率遇到过这个场景——

整段内容需要用代码块包起来方便一键复制，但内容里本身又有代码块语法。

于是内层的```和外层的```撞车了，代码块被拦腰斩断，内容碎了一地。

这个话题带你用两种方式解决它，再拆穿一个常见误区~

方法一：外层更长，逐层递减（王牌方案!~）

CommonMark 规范里有一条精巧的规则：关闭围栏的反引号数量必须 ≥ 开启围栏的数量。

这意味着，如果外层用 ````（四个反引号），那内层的 ```（三个）根本不够格触发关闭，解析器会把它当成普通文本跳过

原理很直觉：大套娃装小套娃，尺寸够大自然装得下

需要更多层嵌套？继续加反引号就行——五个包四个，四个包三个，无限套下去

事实上，这篇教程本身就在用这个方法(最多用了`````)，它自己就是自己的活体证明^-^

示范： 假设你在写一个前端助手的提示词，里面需要放一段 CSS 示例——

外层用 ````，内层用 ```。下面是原始写法（外层我用 ````` 五个反引号包住它，好让你看到完整结构）：

````

你是一个前端开发助手。当用户询问样式问题时，请给出代码示例。



下面是一个参考示例，展示如何用 Grid 实现经典圣杯布局：



```css

.layout {

  display: grid;

  grid-template-columns: 200px 1fr 200px;

  grid-template-rows: auto 1fr auto;

  min-height: 100vh;

}

```



请根据用户的具体场景调整代码，不要死搬示例。

````

论坛渲染效果如下：

你是一个前端开发助手。当用户询问样式问题时，请给出代码示例。



下面是一个参考示例，展示如何用 Grid 实现经典圣杯布局：



```css

.layout {

  display: grid;

  grid-template-columns: 200px 1fr 200px;

  grid-template-rows: auto 1fr auto;

  min-height: 100vh;

}

```



请根据用户的具体场景调整代码，不要死搬示例。

干净利落，内层的 ``` 老老实实当文本，外层的 ```` 稳稳地把一切兜住了

方法二：不同符号，各走各路

Markdown 有两套围栏代码块符号：反引号 ``` 和波浪线 ~~~

它们功能完全等价，但解析器配对的时候只认「同类符号」——反引号找反引号，波浪线找波浪线

所以，外层用一种，内层用另一种，天然不冲突

但要注意：这个方法只适合「一个大的包若干个小的，小的之间互不重叠」的简单场景。如果你需要多层嵌套（比如本教程这种，代码块里套代码块里还要再套代码块），不同符号就不够用了——毕竟你只有两种符号，第三层就没得换了。优势是简单场景下少打两个字符~

示范： 假设你在写一个前端助手的提示词，里面需要放一段 CSS 示例——

外层用 ~~~，内层用 ```。下面是原始写法（外层我用 ```` 包住）：

~~~

你是一个前端开发助手。当用户询问样式问题时，请给出代码示例。



下面是一个参考示例，展示如何用 Flexbox 实现垂直居中：



```css

.container {

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100vh;

}

```



请根据用户的具体场景调整代码，不要死搬示例。

~~~

论坛渲染效果如下：

你是一个前端开发助手。当用户询问样式问题时，请给出代码示例。



下面是一个参考示例，展示如何用 Flexbox 实现垂直居中：



```css

.container {

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100vh;

}

```



请根据用户的具体场景调整代码，不要死搬示例。

内层的 ``` 安安静静地做了一个文本符号，没有触发任何匹配，外层的 ~~~ 完整地把一切包住了

就像两条不同频率的绳子，各绑各的，互不干扰

^-^ 常见误区：靠语言标记区分

你可能想过：外层写 markdown，内层写 css，标记不同，应该不会冲突吧？（豆包就这么想过）

不行。

语言标记（```css 里的 css）只决定语法高亮的配色方案，完全不参与围栏的开闭匹配。解析器的逻辑很单纯——看到 就开始找下一个，找到就关闭，不管你后面贴了什么标签

所以下面这段会照样碎掉：

（以下是反面教材，别学）

```markdown

这是提示词的开头

```css

.broken { color: red; }

```

这是提示词的结尾

```

论坛渲染效果如下：



(它将直接干扰我后面的所有教程文本，所以我这里用图片展示了w)

结果：按理说:第一个 markdown 和 css 配对会关闭，.broken 那行变成裸露文本，后面又冒出来一个孤独的代码块包着「这是提示词的结尾」。一地鸡毛

然而实际情况竟然还不同… 就不多加叙述了，你们可以看到效果，反正还是碎掉了~

速查表

一句话总结：解析器只认两件事——符号种类和符号长度。抓住这两个变量，嵌套就永远不会翻车~

当然灵感启发还是豆包，然后我跟claude(4.6o)酱一起做测试，最后花了半小时写的小教程~

毕竟论坛是大家可能接触的比较少见的，也是唯一的md编辑器了(可能对于程序员不是这样，但对于我这种日常用户来说，这里是唯一的了) 所以标记为l站小技巧~

感谢阅读喵