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