highlight.js 必须将 <code> 嵌套在 <pre> 中才能触发高亮，因其默认仅扫描 <pre><code> 结构；class 值需为 language-xxx 或 lang-xxx；引入后无反应需排查 DOM 加载时机、CSS 是否引入及是否误用已废弃的 initHighlightingOnLoad()。

直接用 highlight.js 是最省事的方案，不用写解析器、不依赖后端、CDN 一行就能跑起来——但前提是别把 <pre><code> 结构写错，否则高亮完全不触发。

为什么 highlight.js 的 <code> 必须嵌在 <pre> 里

highlight.js 默认只扫描 <pre><code> 这种嵌套结构里的内容，单独放一个 <code> 标签（比如在段落里）它直接忽略。这是它的设计约定，不是 bug。

• 正确写法：

  <code><pre><code class="html"><div id="app"></div></code></pre></code>

• 错误写法：<p><code class="html"><div></code></p>（不会高亮） <li> <code>class 值必须是 language-xxx 或 lang-xxx，比如 language-css、lang-js，否则无法自动识别语言

highlight.js 引入后没反应？检查这三件事

常见“引入了但没高亮”基本都卡在这几个点上，顺序排查比重装库更有效：


Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
下载
• 是否在 DOM 加载完成后调用 hljs.highlightAll()？如果脚本放在 <head> 里且没加 defer，执行时 <pre><code> 还没生成，自然找不到目标
• 是否漏掉了 CSS 文件？只引 JS 不引 CSS，代码会显示但没颜色——CDN 地址要配对，比如 JS 用 highlight.min.js，CSS 就得用 atom-one-dark.min.css 这类主题文件
• 是否误用了旧版 API？v11+ 已废弃 initHighlightingOnLoad()，统一用 highlightAll()；若文档抄的是老教程，容易卡在这里

HTML 特殊字符怎么安全显示又不影响高亮

你写的 HTML 示例代码里有 <、>、&，浏览器会当成真实标签解析，导致结构错乱甚至高亮失败。必须转义，但不能手动一个个改——太容易漏。

立即学习“前端免费学习笔记（深入）”；

• 最稳做法：把示例代码原样写进 <script type="text/plain"> 标签里，再用 JS 读取 .textContent 插入 <pre><code>，这样既保留原始符号，又不被解析
• 次选方案：用 HTML 实体替换，< → ，<code>> → >，& → &；注意 & 要写两次，不然会被解成一次
• 别用 innerHTML = ... 直接塞未转义字符串，哪怕加了 hljs.highlightElement()，DOM 解析阶段就已破坏结构

真正麻烦的不是加高亮，而是确保代码块在页面各种加载时机、各种嵌套层级、各种 CMS 输出逻辑下，始终维持 <pre><code class="html"> 这个脆弱的结构——一旦被编辑器或模板引擎自动包裹、删空格、合并标签，高亮就静默失效。