🪆 Markdown 代码块嵌套指南

如何在套娃里再放一个套娃——写提示词、写教程时不再被代码块撞车困扰

↓ 向下滑动 ↓

👑

方法一:外层更长,逐层递减 王牌方案

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

如果外层用 ````(四个反引号),那内层的 ```(三个)根本不够格触发关闭,解析器会把它当成普通文本跳过

原理很直觉:大套娃装小套娃,尺寸够大自然装得下。需要更多层嵌套?继续加反引号——五个包四个,四个包三个,无限套下去

📝 原始写法
```` 你是一个前端开发助手。 下面是参考示例: ```css .layout { display: grid; grid-template-columns: 200px 1fr 200px; } ``` 请根据场景调整代码。 ````
✨ 渲染效果
你是一个前端开发助手。 下面是参考示例: ```css .layout { display: grid; grid-template-columns: 200px 1fr 200px; } ``` 请根据场景调整代码。

内层的 ``` 老老实实当文本,外层的 ```` 稳稳地把一切兜住了

🔀

方法二:不同符号,各走各路

Markdown 有两套围栏符号:反引号 ``` 和波浪线 ~~~。功能完全等价,但解析器只认「同类配对」——反引号找反引号,波浪线找波浪线

外层用一种,内层用另一种,天然不冲突。就像两条不同频率的绳子,各绑各的

注意:只适合一层嵌套的简单场景。你只有两种符号,第三层就没得换了。优势是少打两个字符~

📝 原始写法
~~~ 你是一个前端开发助手。 下面是参考示例: ```css .container { display: flex; align-items: center; } ``` 请根据场景调整代码。 ~~~
✨ 渲染效果
你是一个前端开发助手。 下面是参考示例: ```css .container { display: flex; align-items: center; } ``` 请根据场景调整代码。
⚠️

常见误区:靠语言标记区分

你可能想过:外层写 ```markdown,内层写 ```css,标记不同应该不会冲突吧?

不行。语言标记只决定语法高亮的配色,完全不参与围栏的开闭匹配。解析器看到 ``` 就开始找下一个 ```,不管后面写了什么标签

// 反面教材,别学 ```markdown 这是提示词的开头 ```css .broken { color: red; } ``` 这是提示词的结尾 ```

结果:第一个和第二个 ``` 配对关闭,.broken 变成裸露文本,后面又冒出一个孤独的代码块。一地鸡毛

📋

速查表

场景 推荐方法 写法
万能解法(推��) 外层加长 外 ```` / 内 ```
简单场景 不同符号 外 ~~~ / 内 ```
多层嵌套 逐层加长 ````` > ```` > ```
靠语言标记 ❌ 不可行 解析器不认