「原创」本文汇总所有在代码块内嵌套代码块的方法!

前言:
这份教程还有网页版，内容一致:
code-block-nesting.stellafortuna.dpdns.org
(使用纯flexbox)
https://66119b41.code-block-nesting.pages.dev/
(使用纯grid 导致了表格报废w)

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

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

整段内容需要用代码块包起来方便一键复制，但内容里本身又有代码块语法。
于是内层的````和外层的````撞车了，代码块被拦腰斩断，内容碎了一地。

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

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

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

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

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

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

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

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

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

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

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

.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 实现垂直居中：

.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}```

请根据用户的具体场景调整代码，不要死搬示例。
~~~
``论坛渲染效果如下：``
你是一个前端开发助手。当用户询问样式问题时，请给出代码示例。

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

.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}```

请根据用户的具体场景调整代码，不要死搬示例。
```内层的``` 安安静静地做了一个文本符号，没有触发任何匹配，外层的 ~~~ 完整地把一切包住了

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

 
---

 

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

 

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

 

**不行。**

 

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

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

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

这是提示词的开头```css
.broken { color: red; }
``这是提示词的结尾``
```论坛渲染效果如下：

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

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

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

速查表

场景 |
推荐方法 |
写法 |

万能解法（推荐） |
外层加长 |
外``` / 内 ``，可无限嵌套 |

简单场景 |
不同符号 |
外 ~~~ / 内``` 或反过来 |

多层嵌套 |
逐层加长 |
```` >`` > ``|

靠语言标记区分 |
^-^ 不可行 |
解析器不认这个 |

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

当然灵感启发还是豆包，然后我跟claude(4.6o)酱一起做测试，最后花了半小时写的小教程~
毕竟论坛是大家可能接触的比较少见的，也是唯一的md编辑器了(可能对于程序员不是这样，但对于我这种日常用户来说，这里是唯一的了) 所以标记为l站小技巧~
感谢阅读喵