HTML中使用highlight.js自动高亮页面中代码块的方法
highlight.js高亮需同时满足结构、时机、依赖三要素：必须用嵌套且class为language-xxx；dom就绪后调用highlightall()或动态插入时用highlightelement()；css与js版本须匹配，禁用已废弃的inithighlightingonload()。
highlight.js 能自动高亮，但前提是结构、时机、依赖三者全对；缺一不可，错一个就完全没颜色。
必须用 <pre class="brush:php;toolbar:false;"><code></code> 嵌套结构</pre>
highlight.js 默认只扫描 <pre class="brush:php;toolbar:false;"><code></code> 这种嵌套节点，单独的 <code><code></code>（比如放在 <code><p></p></code> 里）直接被跳过。</code></pre>
-
<p><code class="javascript">let x = 1; —— 不触发高亮
-
<div><code class="html"><div></div>
—— 同样无效
正确写法只有一种：<pre class="brush:php;toolbar:false;"><code class="js">console.log(1);</code></pre>
class 必须是 language-xxx 或 lang-xxx，例如 language-python、lang-html；写成 js 或 html-code 会被忽略
引入后没反应？先查这三件事
“加载了但没高亮”几乎全是配置链断裂，不是库本身问题。
- DOM 是否就绪？
hljs.highlightAll() 必须在所有 <pre class="brush:php;toolbar:false;"><code></code> 已插入 DOM 后执行；脚本若放在 <code></code> 且没加 <code>defer</code>，大概率找不到目标节点</pre>
- CSS 文件漏了？只引 JS 不引 CSS，代码能显示但全是黑白；CDN 地址要配对，比如 JS 用
highlight.min.js，CSS 就得用 github.min.css 这类主题文件
- 是否误用了废弃 API？v11+ 已移除
initHighlightingOnLoad()，统一改用 hljs.highlightAll()；老教程抄过来容易卡在这一步
动态插入代码后怎么高亮
AJAX、Vue、React 或 innerHTML 插入新代码块后，highlightAll() 不会自动重跑。
- 对单个新节点：调
hljs.highlightElement(el)，前提是该 <code> 元素已设好 class="xxx"
- 对整页重扫：再调一次
hljs.highlightAll()，适合小范围更新（注意性能，别在高频操作里滥用）
- fetch 示例：
codeEl.className = "language-python"; hljs.highlightElement(codeEl);
HTML 示例代码里的 和 <code>> 怎么安全显示
你写的 HTML 示例如果直接塞进 <code> 标签，浏览器会当成真实标签解析，导致结构错乱甚至高亮失败。
- 不能靠手动转义（
< / >），太容易漏、难维护
- 正确做法：用
document.createTextNode() 插入原始字符串，或服务端/构建时预转义
- 若用
innerHTML 动态写入，必须先做 HTML 实体转义，否则 <div> 会被解析为 DOM 节点而非文本
<p>最容易被忽略的是：语言 class 必须显式声明，哪怕你加载了 <code>python.min.js，不写 class="python"，highlightElement() 就无法推断语言——它不会猜，也不会 fallback 到 plaintext 以外的默认值。
