必须嵌套，因为行内元素会压缩空白，无语义且高亮库仅识别该嵌套结构；代码中、&须转义；class命名、脚本加载时机、CSS加载缺一不可；font-family、tab-size、white-space、overflow-x四项CSS决定可读性。
直接用 <pre class="brush:php;toolbar:false;"><code class="js"></code> 嵌套结构，配合转义 + CSS + 高亮库，是唯一可靠路径；其他写法要么语义缺失，要么高亮失效，要么格式错乱。</pre>
为什么必须嵌套 <pre class="brush:php;toolbar:false;"></pre> 和 <code>
浏览器把 <code> 当作行内元素，所有换行、缩进、多个空格都会被压缩成单个空格；<pre class="brush:php;toolbar:false;"></pre> 虽保留格式，但不声明“这是代码”，搜索引擎和屏幕阅读器无法识别类型，高亮库（如 Prism.js、highlight.js）也默认只扫描 <pre class="brush:php;toolbar:false;"><code></code> 这种结构。</pre>
- 单独
<code>：适合fetch()、useState这类穿插在段落里的短标识符 - 单独
<pre class="brush:php;toolbar:false;"></pre>：可能渲染出<div> 标签并执行，而不是显示字符串 <li>漏掉 <code><code>的 class 属性：高亮库根本不知道该按什么语言解析 - 正确写法：
<div>hello</div> - 服务端输出前调用
htmlspecialchars()类函数 - 前端动态插入时用
textContent替代innerHTML - 别指望 CSS 或 JS 后期补救——解析阶段就错了，样式再好也没用
-
class值不规范：Prism.js 更认language-javascript或js，highlight.js 接受javascript但推荐加language-前缀；写成Javascript或JS就不触发 - 脚本加载时机不对：highlight.js 必须在 DOM 加载完成后调用
hljs.highlightAll()；Prism.js 虽自动运行，但如果<script></script>标签写在<pre class="brush:php;toolbar:false;"><code></code> 上方，可能漏掉已存在的代码块</pre> - CSS 没加载或 404：高亮本质是往
<code>里加子元素并设 color，没样式表等于白搭；广告拦截器或 CDN 失效也会导致“有 class 没颜色” -
font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace：避免衬线体干扰小字号下的括号、分号辨识 -
tab-size: 4：否则 Safari 或旧 Chrome 把制表符当 8 格，IDE 复制过来的 Python 缩进全乱 -
white-space: pre或保持<pre class="brush:php;toolbar:false;"></pre>默认行为：确保空格、换行不被压缩 -
overflow-x: auto：长代码行不撑破容器，横向滚动条只在需要时出现
<code> 里的 HTML 字符必须手动转义
如果代码里含 、<code>>、&，不转义就会被浏览器当作真实标签解析——比如 <script>alert(1)</script> 塞进 <code> 里，页面真会弹窗。
高亮不起作用的三个硬性条件
写了 <pre class="brush:php;toolbar:false;"><code class="js"></code> 却没颜色？大概率卡在这三处：</pre>
立即学习“前端免费学习笔记（深入）”；
CSS 不设这四点，高亮效果直接打折
即使语法着色成功，字体模糊、缩进错位、长行溢出，用户照样看不清。
最容易被忽略的是转义和 tab-size —— 前者让代码块变成可执行脚本，后者让缩进在不同浏览器里完全对不上。这两个点不处理，其余都白搭。
