「原创」本文汇总所有在代码块内嵌套代码块的方法!
- 内容介绍
- 文章标签
- 相关推荐
前言:
这份教程还有网页版，内容一致:
code-block-nesting.stellafortuna.dpdns.org
(使用纯flexbox)
https://66119b41.code-block-nesting.pages.dev/
(使用纯grid 导致了表格报废w)
dreamina_7622548765475360046_17747640231492560×1440 212 KB
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; }
```
这是提示词的结尾
```
论坛渲染效果如下：
效果1260×536 26 KB
(它将直接干扰我后面的所有教程文本，所以我这里用图片展示了w)
结果：按理说:第一个 markdown 和 css 配对会关闭，.broken 那行变成裸露文本，后面又冒出来一个孤独的代码块包着「这是提示词的结尾」。一地鸡毛
然而实际情况竟然还不同… 就不多加叙述了，你们可以看到效果，反正还是碎掉了~
速查表
| 场景 | 推荐方法 | 写法 |
|---|---|---|
| 万能解法（推荐） | 外层加长 | 外 ```` / 内 ```，可无限嵌套 |
| 简单场景 | 不同符号 | 外 ~~~ / 内 ``` 或反过来 |
| 多层嵌套 | 逐层加长 | ````` > ```` > ``` |
| 靠语言标记区分 | 不可行 | 解析器不认这个 |
一句话总结：解析器只认两件事——符号种类和符号长度。抓住这两个变量，嵌套就永远不会翻车~
网友解答：当然灵感启发还是豆包，然后我跟claude(4.6o)酱一起做测试，最后花了半小时写的小教程~
毕竟论坛是大家可能接触的比较少见的，也是唯一的md编辑器了(可能对于程序员不是这样，但对于我这种日常用户来说，这里是唯一的了) 所以标记为l站小技巧~
感谢阅读喵
--【壹】--：
添加了封面图~
同步发布到公众号~
https://mp.weixin.qq.com/s/teqCbNPt_gc7lcrvz7OadQ
--【贰】--：
VSCode 的 Markdown 格式化挺智能的，也会自动根据上下文判断怎么划分代码块。
--【叁】--：
给本话题加了两个链接~
--【肆】--：
感谢分享
--【伍】--：
学到了，终于知道怎么嵌套使用 ``` 了
--【陆】--： 欣欣|林可欣:
方法一：外层更长，逐层递减（王牌方案!~）
CommonMark 规范里有一条精巧的规则：关闭围栏的反引号数量必须 ≥ 开启围栏的数量。
这意味着，如果外层用 ````（四个反引号），那内层的 ```（三个）根本不够格触发关闭，解析器会把它当成普通文本跳过
学到了，太强了
--【柒】--：
那真是很棒的功能了
前言:
这份教程还有网页版，内容一致:
code-block-nesting.stellafortuna.dpdns.org
(使用纯flexbox)
https://66119b41.code-block-nesting.pages.dev/
(使用纯grid 导致了表格报废w)
dreamina_7622548765475360046_17747640231492560×1440 212 KB
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; }
```
这是提示词的结尾
```
论坛渲染效果如下：
效果1260×536 26 KB
(它将直接干扰我后面的所有教程文本，所以我这里用图片展示了w)
结果：按理说:第一个 markdown 和 css 配对会关闭，.broken 那行变成裸露文本，后面又冒出来一个孤独的代码块包着「这是提示词的结尾」。一地鸡毛
然而实际情况竟然还不同… 就不多加叙述了，你们可以看到效果，反正还是碎掉了~
速查表
| 场景 | 推荐方法 | 写法 |
|---|---|---|
| 万能解法（推荐） | 外层加长 | 外 ```` / 内 ```，可无限嵌套 |
| 简单场景 | 不同符号 | 外 ~~~ / 内 ``` 或反过来 |
| 多层嵌套 | 逐层加长 | ````` > ```` > ``` |
| 靠语言标记区分 | 不可行 | 解析器不认这个 |
一句话总结：解析器只认两件事——符号种类和符号长度。抓住这两个变量，嵌套就永远不会翻车~
网友解答：当然灵感启发还是豆包，然后我跟claude(4.6o)酱一起做测试，最后花了半小时写的小教程~
毕竟论坛是大家可能接触的比较少见的，也是唯一的md编辑器了(可能对于程序员不是这样，但对于我这种日常用户来说，这里是唯一的了) 所以标记为l站小技巧~
感谢阅读喵
--【壹】--：
添加了封面图~
同步发布到公众号~
https://mp.weixin.qq.com/s/teqCbNPt_gc7lcrvz7OadQ
--【贰】--：
VSCode 的 Markdown 格式化挺智能的，也会自动根据上下文判断怎么划分代码块。
--【叁】--：
给本话题加了两个链接~
--【肆】--：
感谢分享
--【伍】--：
学到了，终于知道怎么嵌套使用 ``` 了
--【陆】--： 欣欣|林可欣:
方法一：外层更长，逐层递减（王牌方案!~）
CommonMark 规范里有一条精巧的规则：关闭围栏的反引号数量必须 ≥ 开启围栏的数量。
这意味着，如果外层用 ````（四个反引号），那内层的 ```（三个）根本不够格触发关闭，解析器会把它当成普通文本跳过
学到了，太强了
--【柒】--：
那真是很棒的功能了