必须嵌套使用：保留格式但无语义，提供语义但不保留换行，二者结合才可靠；HTML特殊字符需转义防XSS；高亮失效主因是class名不匹配、脚本未初始化或结构不完整。
为什么必须用 <pre class="brush:php;toolbar:false;"><code></code> 而不是单用其中一个</pre>
只用 <pre class="brush:php;toolbar:false;"></pre>：浏览器保留换行和空格，但不声明“这是代码”——搜索引擎当普通文本，屏幕阅读器读作“预格式化块”，语法高亮库（如 Prism.js）压根不识别，CSS 也难精准控制样式。
只用 <code>：它是语义正确的标签，但默认是行内元素，所有换行符、缩进、多余空格全被浏览器合并或忽略。一段带缩进的 Python 函数会塌成一行，根本没法读。
嵌套才是唯一可靠解：<pre class="brush:php;toolbar:false;"></pre> 提供格式容器，<code> 提供语义锚点，二者缺一不可。
<code> 里哪些字符必须转义才能安全显示
只要原始代码含 HTML 特殊字符，就必须在插入前实体化，否则浏览器会在解析阶段直接执行它们，导致 DOM 错乱、代码截断甚至 XSS 风险。
→ <code>-
>→> -
&→&
例如这段 HTML 代码：<div id="app"></div>，如果没转义，浏览器会尝试渲染一个空 <div>，后续内容全偏移。服务端输出建议统一调用 <code>htmlspecialchars()；前端动态插入请用 textContent，别用 innerHTML。
语法高亮不起作用的三个实际原因
写了 <pre class="brush:php;toolbar:false;"><code class="js"></code> 却没高亮？大概率卡在这几个地方：</pre>
- class 名不匹配：Prism.js 默认认
language-javascript，highlight.js 接受javascript，但加language-前缀最稳；写成js或JS多数库直接跳过 - 高亮脚本没初始化：highlight.js 必须显式调用
hljs.highlightAll()，且得在 DOM 加载完成、脚本已加载之后执行 <code>没被正确包裹在<pre class="brush:php;toolbar:false;"></pre>里：有些高亮库只扫描<pre class="brush:php;toolbar:false;"><code></code> 结构，单独的 <code><code></code> 不触发</code></pre>
缩进、换行与 CSS 控制的关键细节
<pre class="brush:php;toolbar:false;"></pre> 默认保留源码里的空格和换行，但它的行为对源码缩进敏感——如果你在 HTML 文件里把 <pre class="brush:php;toolbar:false;"></pre> 写在缩进后，那些空格也会被渲染出来，造成意外首行缩进。
- 推荐写法：
<pre class="brush:php;toolbar:false;"></pre>标签从行首开始，或用 HTML 注释消除缩进：<!--<pre class="brush:php;toolbar:false;"><code class="js">--> - 缩进统一用空格，别用 Tab——不同编辑器/浏览器对 Tab 的宽度处理不一致
- CSS 上必须重置默认 margin/padding，加上
overflow-x: auto和white-space: pre（或pre-wrap），避免长行溢出或强制换行破坏结构
最易被忽略的是：浏览器默认样式差异大，不显式设置背景色、字体、圆角等，代码块在不同设备上可能完全不可见或难以区分。
