多行嵌套代码必须用 嵌套结构： 保留换行缩进， 提供语义与无障碍支持；需手动转义 html 字符（如 <），并配合 overflow-x: auto 和等宽字体栈确保可读性与适配性。
多行嵌套代码不能直接用 标签
直接把带缩进、换行、大括号嵌套的代码（比如 React 组件或 Python 函数）塞进 标签里，结果一定是错的：所有换行和缩进被压成单个空格，<code>function App() { return ( <div>Hello</div> ); } 渲染出来就是平的一长串，根本没法读，复制到编辑器还会语法报错。
这是因为 <code> 是行内元素，浏览器会按普通文本处理空白符——它只适合包裹 useState()、npm run dev 这类短小的技术名词。
- ✅ 正确用法：
fetch()、/src/utils.ts、aria-hidden="true" - ❌ 错误用法：
if (x) { console.log(x); }（含换行/缩进/结构） - ⚠️ 即使加了
white-space: pre，长行也会横向溢出容器，且不支持滚动条，移动端尤其难看
复杂嵌套代码必须用 嵌套结构
标准写法是外层 <pre class="brush:php;toolbar:false;"></pre> 保格式，内层 <code> 表语义。两者缺一不可：
-
<pre class="brush:php;toolbar:false;"></pre>让浏览器原样保留换行、空格、制表符 <code>告诉屏幕阅读器“这是可执行代码”，不是普通预格式化文本- 单独用
<pre class="brush:php;toolbar:false;"></pre>会被读作“预格式化文本”，对无障碍不友好 - 单独用
<code>格式全崩，语义也不完整
示例（正确）：
<pre class="brush:php;toolbar:false;">function Component() {
const [count, setCount] = useState(0);
return (
<button onclick="{()"> setCount(c => c + 1)}>
Count: {count}
</button>
);
}
HTML 字符必须转义，否则会被解析
你在 <pre class="brush:php;toolbar:false;"><code></code></pre> 里写的 <code><div>，如果不转义，浏览器真会把它当 HTML 标签解析——导致 DOM 结构断裂、高亮失效、甚至 XSS 风险。
<ul>
<li>必须手动把 <code> 写成 <code><，> 写成 >，& 写成 &
<code><div></div> 就是无效 HTMLhighlight.js 或 Prism.js，它们默认做转义+语法高亮，比手写安全得多嵌套层级深时，要注意 CSS 继承与宽度控制
如果嵌套代码本身还包含缩进很深的 JSON、YAML 或 JSX，<pre class="brush:php;toolbar:false;"></pre> 容器容易水平溢出，尤其在窄屏或表格单元格里。
- 加
overflow-x: auto并设max-width: 100%，避免破坏布局 - 慎用
white-space: pre-wrap：它虽允许折行，但会破坏缩进对齐，嵌套结构一眼看不出层级 - 若放在
<td> 中，记得重置父表的 <code>table-layout: fixed影响，否则<pre class="brush:php;toolbar:false;"></pre>可能被强行压缩变形 - 字体栈必须显式声明，仅写
font-family: monospace不够——不同系统 fallback 差异大，中文环境尤其容易回退到非等宽字体
真正麻烦的从来不是写法，而是转义、缩进保真、容器适配这三件事同时成立。漏掉任一环，用户看到的就是一堆挤在一起、无法复制、读着费劲的“伪代码”。
