必须严格使用<pre><code>嵌套结构，因Highlight.js和Prism.js默认仅扫描该结构内的内容；单独<code>或顺序颠倒则高亮失效，且class须为language-xxx或lang-xxx，字符需实体转义或用<script type="text/plain">安全包裹。
highlight.js 和 Prism.js 是目前最省事的两个选择，不用写解析器、不依赖后端、CDN 一行就能跑起来——但前提是结构别写错、字符别漏转义、时机别搞错。
为什么 <pre><code> 嵌套结构必须严格？
这两个库默认只扫描 <pre><code> 这种嵌套结构里的内容。单独一个 <code>（比如塞在 <p> 里）或颠倒顺序（<code><pre>），高亮直接不触发。
-
<pre><code class="html"><div id="app"></div></code></pre>✅ 正确 -
<p><code class="html"><div></div></code></p>❌ 不会高亮 - class 值必须是
language-html或lang-html，写成html或code-html会被当成纯文本 - 移动端或动态插入的 DOM，得确保
hljs.highlightAll()或Prism.highlightAll()在节点挂载后才执行，否则扫不到
< > & 这些字符怎么安全显示？
浏览器会把它们当真实标签解析，导致结构塌陷、高亮失败甚至 XSS 风险。不能靠手动替换，容易漏。
- 最稳做法：把原始 HTML 示例代码写进
<script type="text/plain">标签里，再用 JS 读取.textContent插入<pre><code>—— 原样保留，不解析，不逃逸 - 次选方案：用 HTML 实体转义：
替 <code><，>替>，&替& - 注意：
&必须写两次（&），否则第一次解码就变回单个&，第二次又可能被误解析
CDN 引入后没反应？优先排查这三件事
90% 的“引入了但没颜色”都卡在这几个点上，重装库不如先看这几处：
立即学习“前端免费学习笔记（深入）”；
- JS 执行时机不对：脚本放在
<head>且没加defer，而<pre><code>还没生成，highlightAll()扫不到目标 - CSS 漏了：只引了 JS 文件，没引对应主题的 CSS，代码能显示但全是黑字白底
- 用了过时 API：v11+ 的
highlight.js已废弃initHighlightingOnLoad()，统一用hljs.highlightAll()；老教程抄错就白忙
真正麻烦的不是引入，而是动态渲染、多语言混排、服务端预渲染这些场景下的边界处理——比如 SSR 后客户端重复高亮、code 被 Vue/React 二次解析、或者 textarea 里粘贴 HTML 后没及时转义。这些地方一不留神，高亮就断在用户眼前。
