highlight.js高亮失败主因是结构、class或时机错误：必须用<pre>嵌套结构，class需为language-xxx或lang-xxx格式，且脚本须在DOM就绪后执行highlightAll()并引入主题CSS。
直接用 highlight.js 是最省事的方案，但 90% 的“没高亮”问题都出在结构写错、class 漏写或加载时机不对——不是库不行，是没踩对点。
为什么 <code> 单独写不触发高亮
highlight.js 默认只扫描 <pre><code> 嵌套结构，这是硬性约定，不是 bug。因为 <pre> 能保留换行、空格和缩进，而语法解析依赖这些格式信息。
-
<p><code class="javascript">const x = 1;</code></p>—— 完全被忽略 -
<div><code class="html"><div></div></code></div>—— 同样不处理 - 正确写法只有一种：
<pre><code class="js">const x = 1;</code></pre>
class 值必须是 language-xxx 或 lang-xxx
哪怕你引入了 python.min.js，如果 <code> 上没写 class="python"，highlight.js 就会当成纯文本处理，不会着色。
- 支持两种前缀：
language-html和lang-html都行 - 常见写法：
language-js、language-css、language-bash - 别写成
class="js"或class="html-code"，这类会被跳过 - 不确定语言时可写
class="plaintext"，强制不着色
引入后没颜色？按顺序查这三件事
高亮“看不见”基本不是代码问题，而是加载链断了。比重装库快得多的排查路径：
立即学习“前端免费学习笔记（深入）”；
- 脚本是否在 DOM 就绪后执行？
<script>hljs.highlightAll()</script>放在<head>里且没加defer，就可能找不到还没生成的<pre><code> - CSS 文件引了吗？只引
highlight.min.js不引对应主题 CSS（比如atom-one-dark.min.css），代码能显示但全是黑白 - 是否误用了废弃 API？v11+ 已移除
initHighlightingOnLoad()，统一用highlightAll()；老教程抄过来容易卡在这儿
HTML 示例代码里的 < 和 > 怎么安全显示
直接把 HTML 片段塞进 <code> 标签，浏览器会当真标签解析，导致结构崩坏、高亮失败。
- 最稳做法：用
<script type="text/plain">包住原始代码，再用 JS 读取.textContent插入<pre><code>中 - 次选方案：手动转义：
<→，<code>>→>，&→&（注意&要写两次） - 别用
innerHTML = "..."直接赋值含<的字符串，容易漏转义
动态插入代码（比如 Vue/React 渲染后、fetch 加载完）时，highlightAll() 不会自动重跑；得手动调 hljs.highlightElement(el)，且必须确保该元素已有正确的 class。这点最容易被忽略——尤其在 SPA 场景下。
