highlight.js 必须将 嵌套在 中才能触发高亮，因其默认仅扫描 结构；class 值需为 language-xxx 或 lang-xxx；引入后无反应需排查 dom 加载时机、css 是否引入及是否误用已废弃的 inithighlightingonload()。
直接用 highlight.js 是最省事的方案，不用写解析器、不依赖后端、CDN 一行就能跑起来——但前提是别把 <pre class="brush:php;toolbar:false;"><code></code> 结构写错，否则高亮完全不触发。</pre>
为什么 highlight.js 的 <code> 必须嵌在 <pre class="brush:php;toolbar:false;"></pre> 里
highlight.js 默认只扫描 <pre class="brush:php;toolbar:false;"><code></code> 这种嵌套结构里的内容，单独放一个 <code><code></code> 标签（比如在段落里）它直接忽略。这是它的设计约定，不是 bug。</code></pre>
- 正确写法：
<code><pre class="brush:php;toolbar:false;"><code class="html"><div id="app"></div></code>
- 错误写法：
<p><code class="html"><div>（不会高亮）
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
class值必须是language-xxx或lang-xxx，比如language-css、lang-js，否则无法自动识别语言
highlight.js 引入后没反应？检查这三件事
常见“引入了但没高亮”基本都卡在这几个点上，顺序排查比重装库更有效：
- 是否在 DOM 加载完成后调用
hljs.highlightAll()？如果脚本放在里且没加defer，执行时<pre class="brush:php;toolbar:false;"><code></code> 还没生成，自然找不到目标</pre> - 是否漏掉了 CSS 文件？只引 JS 不引 CSS，代码会显示但没颜色——CDN 地址要配对，比如 JS 用
highlight.min.js，CSS 就得用atom-one-dark.min.css这类主题文件 - 是否误用了旧版 API？v11+ 已废弃
initHighlightingOnLoad()，统一用highlightAll()；若文档抄的是老教程，容易卡在这里
HTML 特殊字符怎么安全显示又不影响高亮
你写的 HTML 示例代码里有 、<code>>、&，浏览器会当成真实标签解析，导致结构错乱甚至高亮失败。必须转义，但不能手动一个个改——太容易漏。
- 最稳做法：把示例代码原样写进
<script type="text/plain"></script>标签里，再用 JS 读取.textContent插入<pre class="brush:php;toolbar:false;"><code></code>，这样既保留原始符号，又不被解析</pre> - 次选方案：用 HTML 实体替换，
→ <code><，>→>，&→&；注意&要写两次，不然会被解成一次 - 别用
innerHTML = ...直接塞未转义字符串，哪怕加了hljs.highlightElement()，DOM 解析阶段就已破坏结构
真正麻烦的不是加高亮，而是确保代码块在页面各种加载时机、各种嵌套层级、各种 CMS 输出逻辑下，始终维持 <pre class="brush:php;toolbar:false;"><code class="html"></code> 这个脆弱的结构——一旦被编辑器或模板引擎自动包裹、删空格、合并标签，高亮就静默失效。</pre>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
