必须写成<pre><code>而非<code><pre>，因HTML解析器自动修正错误嵌套不可控，高亮库仅识别<pre><code>结构，且class须加在<code>上并符合约定，特殊字符需转义，CSS需设white-space:pre和overflow-x:auto。
为什么必须写成 而不是 <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></H3>
<p>HTML 解析器会自动修正错误嵌套，<code><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> 结构，对反向嵌套直接忽略。</p>
<ul>
<li>浏览器实际解析后 DOM 是 <pre class="brush:php;toolbar:false;"><code>，你写的 <code><pre class="brush:php;toolbar:false;"> 只是“看起来一样”</li>
<li>服务端模板（如 Twig、Jinja）若未严格控制空白，<code><pre class="brush:php;toolbar:false;"> 容易在开头插入不可见空格，导致 Python/JSON 代码缩进错位</li>
<li>Prism.js 的自动初始化逻辑依赖 <pre class="brush:php;toolbar:false;"> 作为父容器，<code> 在外层时它压根不进入匹配流程</li>
</ul>
<H3>class 属性该加在 <code> 上还是 <pre class="brush:php;toolbar:false;"> 上</H3>
<p>必须加在 <code> 标签上，且值要符合高亮库约定。highlight.js 只认 <code class="js"> 或 <code class="lang-python">；Prism.js 虽能识别 <code class="js">，但遇到 <code class="javascript"> 就失效。写错 class 名等于没写。</p>
<ul>
<li>✅ 正确：<code class="html"><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 代码直接失效。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>必备样式：<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"> { white-space: pre; overflow-x: auto; }</li>
<li>防塌陷补充：<code> { display: block; font-family: ui-monospace, 'SFMono-Regular', monospace; }</li>
<li>别依赖浏览器默认字体：某些安卓 WebView 默认用非等宽字体渲染 <code>，导致对齐全乱</li>
<li>容易被忽略的一点：<pre class="brush:php;toolbar:false;"> 标签本身在源码中的缩进（比如模板里写在 4 个空格后）也会被渲染出来，首行多出空格——要么从行首写标签，要么用注释消除：<code><!--<pre class="brush:php;toolbar:false;"><code class="js">-->
实际项目中最常卡住的地方，不是语法写错，而是转义遗漏 + class 名不标准 + CSS 缺失 white-space 控制。这三者任意一个没到位，代码块就只是“看起来像代码”，而不是“能复制、能读、能高亮”的可用内容。 
