highlight.js 高亮失效主因是结构、类名或加载时机错误：必须用 结构，类名需为 language-xxx 或 lang-xxx，且 hljs.highlightall() 需在 dom 就绪后执行并引入对应主题 css。
直接用 highlight.js 是最省事的路径，但 90% 的“没颜色”问题都卡在结构、类名或加载时机上——不是库不工作，是没对上它的触发条件。
为什么 <code> 单独写不触发高亮
highlight.js 默认只扫描 <pre class="brush:php;toolbar:false;"><code></code> 嵌套结构，这是硬性约定。它依赖 <code><pre class="brush:php;toolbar:false;"></pre> 保留的换行、空格和缩进做语法解析，<p><code>...
- 错误示例：
<code class="html"><div></div>→ 完全不处理 - 正确写法：
<pre class="brush:php;toolbar:false;"><code class="html"><div></div></code></pre> - 类名必须是
language-xxx或lang-xxx（如language-js、lang-css），写成js或html-code无效
highlight.js 引入后没颜色？按顺序查这三件事
高亮“看不见”基本不是代码逻辑问题，而是加载链断了。比重装库快得多的排查路径：
- 脚本是否在 DOM 就绪后执行？
hljs.highlightAll()放在里且没加defer或DOMContentLoaded包裹，就可能找不到还没生成的<pre class="brush:php;toolbar:false;"><code></code> 节点</pre> - CSS 文件引了吗？只引
highlight.min.js不引对应主题 CSS（比如atom-one-dark.min.css），代码能显示但全是黑白——检查浏览器开发者工具 Network 标签页是否报 404 - 是否误用了废弃 API？v11+ 已移除
hljs.initHighlightingOnLoad()，统一用hljs.highlightAll()；老教程抄过来容易卡在这儿
HTML 示例里的 和 <code>> 怎么安全放进 <code> 里
直接写 <div class="app">，浏览器会在 DOM 解析阶段当成真实标签处理，导致结构崩坏、高亮静默失效。
<ul>
<li>最稳做法：把原始代码塞进 <code><script type="text/plain"></script> 标签，再用 JS 读取 .textContent 插入到 <pre class="brush:php;toolbar:false;"><code></code> 中，既保留符号又不被解析</pre>
→ <code><，> → >，& → &（注意 & 要写两次，否则会被解一次）
innerHTML = "..." 直接拼接未转义字符串，会丢事件监听器、表单值、动态节点动态插入代码后怎么补高亮
Vue、React 渲染后，或 fetch 加载完内容，hljs.highlightAll() 不会自动重跑——这点最容易被忽略，尤其在 SPA 场景下。
- 小范围更新：用
hljs.highlightElement(el)，前提是该元素已有正确的class（如language-html） - 示例：
codeEl.className = 'language-python'; hljs.highlightElement(codeEl); - 如果插入的是整块 HTML 片段，记得先插入 DOM，再调用高亮，顺序不能反
真正麻烦的不是加高亮，而是确保 <pre class="brush:php;toolbar:false;"><code class="html"></code> 这个结构在各种 CMS 输出、模板引擎包裹、JS 动态渲染下始终完整——一旦被删空格、合并标签或自动加 wrapper，高亮就静默失效。</pre>
