必须用 包裹 —— 是行内元素，不保留换行缩进； 虽保留格式但无语义且易被解析器误处理；嵌套使用既保格式又保语义，符合 w3c 推荐与高亮库要求。
必须用 <pre class="brush:php;toolbar:false;"></pre> 包裹 <code>，缺一不可——只用 <code> 不保留换行和缩进，只用 <pre class="brush:php;toolbar:false;"></pre> 会丢失语义且易被 HTML 解析器破坏。
为什么单用 <code> 不行
<code> 是行内元素，浏览器默认按普通文本渲染：多个空格压成一个，换行符被忽略，制表符不生效。它只声明“这是代码”，不管格式。
常见错误现象：
你写：
<code>function foo() {<br> return true;<br>}</code>
结果却显示为 function foo() { return true; } ——所有缩进和换行全没了。
实操建议：
- 永远别单独用
<code>显示多行代码 - 若必须用纯
<code>（比如 Markdown 渲染器限制），得手动把\n替换成<br>，再加white-space: preCSS - 但这样维护成本高，且无法保留原始字符串中的连续空格
为什么 <pre class="brush:php;toolbar:false;"></pre> 本身也不够安全
<pre class="brush:php;toolbar:false;"></pre> 确实启用 white-space: pre，能原样渲染空格、\t、\n，但它不自带语义，更关键的是：HTML 解析器会把标签内的首尾换行和缩进也当作文本节点处理。
常见错误现象：
你这样写：
<pre class="brush:php;toolbar:false;"><br> console.log("hello");<br> console.log("world");<br>
浏览器实际渲染出两列额外空格——因为 <pre class="brush:php;toolbar:false;"></pre> 开始标签后的换行 + 两个空格，也被当成了内容。
实操建议：
-
<pre class="brush:php;toolbar:false;"></pre>标签必须紧贴第一行代码，不要换行、不要缩进 - 动态注入时，绝对不用
innerHTML拼接，改用textContent赋值 - 后端返回的字符串，确保没被
trim()或replace(/\s+$/g, "")干掉末尾换行 - 如果内容含
、<code>>、&（比如 HTML 片段或 JSX），必须提前转义为<、>、&
正确写法：<pre class="brush:php;toolbar:false;"></pre> + <code> 嵌套
这是 W3C 推荐模式：<pre class="brush:php;toolbar:false;"></pre> 管格式，<code> 管语义。高亮库（如 Prism.js）也只扫描 <pre class="brush:php;toolbar:false;"><code></code> 这种结构。</pre>
示例（可直接复制使用）：
<pre class="brush:php;toolbar:false;"><code class="js">function greet(name) {<br> if (!name) return;<br> console.log(`Hello, ${name}!`);<br>}</code>
注意点：
-
class="js"是给高亮库识别语言用的，不是必须，但强烈建议加上 - 不要在
<pre class="brush:php;toolbar:false;"></pre>内部塞<div>、<code><p></p>等块级元素，会中断预格式化流 - 如果嵌入表格单元格（
<td>），必须加 CSS：<code>white-space: pre-wrap+overflow-x: auto+max-width: 100%，否则长代码会撑爆表格容易被忽略的样式干扰
即使结构写对了，全局 CSS 也可能让
<pre class="brush:php;toolbar:false;"></pre>失效。最常见的是重置规则覆盖了默认white-space: pre。检查项：
- 浏览器开发者工具里看
<pre class="brush:php;toolbar:false;"></pre>计算后的white-space值是不是pre（不是normal或break-spaces） - 是否被
* { white-space: normal; }这类通配符规则干掉 - 字体是否被强制改成非等宽体（
font-family没 fallback 到monospace） - 移动端小屏下，
font-size过大会导致横向溢出，建议用0.85em起步
真正麻烦的从来不是怎么写，而是内容抵达
<pre class="brush:php;toolbar:false;"></pre>前，已经被转义、被 trim、被 innerHTML 解析截断、被 CSS 覆盖——这些环节漏掉任意一个，格式就保不住。 - 浏览器开发者工具里看
