HTML中如何使用highlight.js实现代码语法高亮
highlight.js必须将嵌套在中，因其默认仅扫描结构；class需为language-xxx或lang-xxx；引入后无反应需排查dom加载时机、css是否引入及是否误用已废弃的inithighlightingonload()。
为什么必须嵌在<code><pre class="brush:php;toolbar:false;"></pre>里
highlight.js 默认只扫描 <pre class="brush:php;toolbar:false;"></pre> 这种嵌套结构，单独的 <code> 标签（比如放在 <p></p> 里）它直接跳过——这不是 bug，是设计约定。因为 <pre class="brush:php;toolbar:false;"></pre> 能保留换行、空格和缩进，而语法高亮依赖这些格式信息才能正确解析。
常见错误现象：
-
<p><code class="javascript">let x = 1; —— 完全不触发高亮
-
<div><code class="html">...
—— 同样被忽略
正确写法只有这一种结构：<pre class="brush:html;toolbar:false;"><div></div></pre>。注意：class 值必须是 language-xxx 或 lang-xxx，比如 language-css、lang-js，否则无法识别语言。
引入后没颜色？先查这三件事
高亮“看不见”基本不是库的问题，而是加载链断了。按顺序排查比重装更快：
- DOM 是否就绪？脚本若放在
defer，执行 hljs.highlightAll() 时 <pre class="brush:php;toolbar:false;"></pre> 还没生成，自然找不到目标
- CSS 文件漏了？只引 JS 不引 CSS，代码能显示但全是黑白——CDN 地址要配对，比如 JS 用
highlight.min.js，CSS 就得用 atom-one-dark.min.css 这类主题文件
- 是否误用了废弃 API？v11+ 已移除
initHighlightingOnLoad()，统一用 highlightAll()；老教程抄过来容易卡在这一步
动态插入代码后怎么高亮
Vue、React 或 AJAX 加载内容后，highlightAll() 不会自动重跑。必须手动触发：
- 对单个新元素：拿到
<code> 节点后调 hljs.highlightElement(el)，前提是该节点已设好 class="xxx"
- 对整页重扫：再次调
hljs.highlightAll()，适合小范围更新
- 注意语言声明不能省：哪怕你加载了
powershell.min.js，也得显式写 class="powershell"，否则 highlightElement() 无法推断语言
示例（fetch 后高亮）：codeEl.className = 'language-python'; hljs.highlightElement(codeEl);
HTML 示例代码里的 和 <code>> 怎么安全显示
你写的 HTML 示例如果直接塞进 <code> 标签，浏览器会当成真实标签解析，导致结构错乱甚至高亮失败。不能靠手动转义（、<code>>），太容易漏。
最稳做法：<script type="text/plain"></script> 包住原始代码，再用 JS 读取 .textContent 插入到 <pre class="brush:php;toolbar:false;"></pre> 中——既保留符号原样，又不被 HTML 解析器吃掉。
次选方案：用实体替换，但注意 & 要写成 &（两个 &），否则会被解成一个 &，造成后续转义失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
