必须用嵌套结构，因单独使用会压缩换行与空格，单独存在则无语义且高亮库（如highlight.js、prism.js）仅扫描该嵌套节点；class须为language-xxx格式，代码中、&需转义，css需设置font-family、tab-size、white-space、overflow-x，js须在dom就绪后调用高亮函数。
必须用 <pre class="brush:php;toolbar:false;"> 嵌套结构，不能只用 <pre class="brush:php;toolbar:false;"> 或只用 <code></code>
单独 会压缩换行和多余空格，<pre class="brush:php;toolbar:false;"> 单独存在则不带语义、高亮库不识别。浏览器和 highlight.js / Prism.js 都只扫描 <pre class="brush:php;toolbar:false;"><code> 这种嵌套节点。</code></pre></pre>
常见错误写法：<p><code class="js">const x = 1;
（跳过高亮）、
<div><code>... （无格式保留）。
- 正确结构示例：
<pre class="brush:php;toolbar:false;"><code class="js">function foo() { return true; }</code></pre>
-
class 必须含 language- 前缀（如 language-python），highlight.js 严格依赖这个命名；Prism.js 宽松些，但统一用 language- 更稳
- 代码中出现
、<code>>、& 必须转义为 <、>、&，否则浏览器会解析成真实标签甚至执行脚本
class 值写错或缺失，高亮直接失效
即使 DOM 加载完成、CSS 和 JS 全部引入，只要 class 写成 javascript、html5、Javascript 或漏掉，高亮就不会触发。
- highlight.js 只认
language-javascript、language-css、language-html 等标准值
- Prism.js 支持
language-js、js，但推荐统一用 language- 前缀，避免跨库迁移时出问题
- 别在
class 里混用多个语言标识，比如 class="js typescript"——只会按第一个生效，且可能被忽略
CSS 四项关键样式决定可读性底线
没这四条，哪怕语法着色成功，用户照样看不清缩进、选不中内容、长代码溢出容器。
JS 初始化时机不对，DOM 就绪前就调用高亮函数
把 hljs.highlightAll() 或 Prism.highlightAll() 放在
<pre class="brush:php;toolbar:false;"> 节点还没加载进 DOM。
- highlight.js 推荐放在
底部，或监听 <code>DOMContentLoaded：
document.addEventListener('DOMContentLoaded', () => {
hljs.highlightAll();
});
Prism.js 会自动运行，但如果 <script src="prism.js"></script> 出现在所有 <pre class="brush:php;toolbar:false;"> 上方，仍可能漏掉部分块（尤其动态插入的）
动态插入代码后，需手动调用一次高亮：例如 hljs.highlightElement(codeEl)（传入单个 <code><code> 元素）
高亮不是“加个 class 就完事”，
language- 命名、HTML 实体转义、
<code> 嵌套、CSS 四要素、JS 执行时机——五处任一遗漏，都会导致视觉或语义断裂。最常被跳过的其实是转义和 <code>tab-size</code>。</code>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
