必须写成而非，因html解析器自动修正错误嵌套不可控，高亮库仅识别结构，且class须加在上并符合约定，特殊字符需转义，css需设white-space:pre和overflow-x:auto。
为什么必须写成 而不是 <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">
HTML 解析器会自动修正错误嵌套，<pre class="brush:php;toolbar:false;"> 这种写法在 DOM 中会被重排为 <pre class="brush:php;toolbar:false;"><code>，但过程不可控——尤其在旧版 Firefox 或服务端渲染时可能生成冗余文本节点、首行多出空格，甚至触发怪异的换行行为。更关键的是，所有主流高亮库（highlight.js、Prism.js）只扫描 <pre class="brush:php;toolbar:false;"><code> 结构，对反向嵌套直接忽略。</code></pre>
- 浏览器实际解析后 DOM 是
<code>，你写的 <code><pre class="brush:php;toolbar:false;"> 只是“看起来一样”
- 服务端模板（如 Twig、Jinja）若未严格控制空白，
<pre class="brush:php;toolbar:false;"> 容易在开头插入不可见空格，导致 Python/JSON 代码缩进错位</pre> - Prism.js 的自动初始化逻辑依赖
作为父容器，<code> 在外层时它压根不进入匹配流程</code>
class 属性该加在 上还是 <pre class="brush:php;toolbar:false;"> 上</pre>
必须加在 标签上，且值要符合高亮库约定。highlight.js 只认 <code class="js"> 或 <code class="lang-python">；Prism.js 虽能识别 <code class="js">，但遇到 <code class="javascript"> 就失效。写错 class 名等于没写。
- ✅ 正确：
<div>Hello</div> - ❌ 错误：
<pre class="brush:php;toolbar:false;"><div>Hello</div>
（highlight.js 不识别 pre 上的 class） - ⚠️ 注意：
和 <code class="html"> 在 Prism.js 中都行，但在 highlight.js 中只有后者有效
HTML 特殊字符不转义会直接执行脚本
把 <script>alert(1)</script> 直接塞进 里，浏览器会在解析阶段就执行它——不是显示字符串，而是弹窗。这不是 XSS 漏洞利用，是 HTML 基础规则：只要没转义，尖括号就是标签起始符。
- 必须手动转义：
<script>alert(1)</script> - 服务端推荐用 htmlspecialchars() 或等效函数统一处理
- 前端动态插入时，优先用 element.textContent = rawCode，而非 innerHTML
- 漏转义的典型现象：代码块突然截断、页面布局错乱、控制台报错 “Unclosed tag”
CSS 不设 white-space 和 overflow-x 会导致长代码溢出或折行错乱
默认情况下，
里的长行不会自动换行，也不会出现横向滚动条，直接撑破容器。而如果加了 white-space: normal，又会让缩进塌陷、Python 代码直接失效。
- 必备样式：
<pre class="brush:php;toolbar:false;"> { white-space: pre; overflow-x: auto; } - 防塌陷补充：
{ display: block; font-family: ui-monospace, 'SFMono-Regular', monospace; } - 别依赖浏览器默认字体：某些安卓 WebView 默认用非等宽字体渲染
，导致对齐全乱 - 容易被忽略的一点：
标签本身在源码中的缩进（比如模板里写在 4 个空格后）也会被渲染出来，首行多出空格——要么从行首写标签，要么用注释消除：<code><!--<pre class="brush:php;toolbar:false;"><code class="js">--></code>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
