必须用嵌套结构，因highlight.js和prism.js默认仅扫描该结构内、且下直接子级的元素；顺序颠倒、拆开或缺失任一标签均导致高亮失效。
高亮代码必须用 <pre class="brush:php;toolbar:false;"><code></code> 嵌套结构，其他写法基本无效。</pre>
为什么 <pre class="brush:php;toolbar:false;"><code></code> 顺序不能颠倒或拆开</pre>
Highlight.js 和 Prism.js 默认只扫描 <pre class="brush:php;toolbar:false;"><code></code> 这种严格嵌套的节点。它们不是“看到 <code><code></code> 就高亮”，而是主动遍历 DOM，只匹配 <code><pre class="brush:php;toolbar:false;"></pre> 下直接子级的 <code>。
-
<p><code>console.log()→ 完全忽略，不触发任何高亮 -
<code><pre class="brush:php;toolbar:false;">...</pre>→ 结构非法，highlightAll()扫不到内容 -
<pre class="js">...</pre>（没包<code>）→ 不识别语言，当纯文本处理
class 值必须是 language-xxx 或 lang-xxx
语言标识靠 class 名触发自动检测，不是靠文件后缀或上下文猜测。
- ✅ 正确：
<code class="html"><div></div>、<code class="lang-js">const a = 1; - ❌ 无效：
<code class="html">（被当成普通 class，不识别为 HTML 语言） - ❌ 无效：
<code class="code-html">（前缀不匹配，库不认） - ⚠️ 注意：大小写敏感，
language-JS≠language-js
HTML 示例代码里的 <code>> & 怎么安全显示
直接把 HTML 片段塞进 <code>，浏览器会提前解析标签，导致 DOM 崩塌、高亮失败，甚至 XSS 风险。
- 最稳做法：用
<script type="text/plain"></script>包原始代码，再用 JS 读取.textContent插入<pre class="brush:php;toolbar:false;"><code></code> —— 原样保留，不解析、不转义、不逃逸</pre> - 次选方案：手动实体转义：
→ <code><，>→>，&→&（注意&要写两次） - 别信“只转
和 <code>>就行”——漏转&是高频翻车点
CDN 引入后没颜色？先查这三处
90% 的“引入了但没反应”都卡在这几个地方，重装库不如先看这几项：
- JS 执行时机不对：脚本放在
且没加defer，而<pre class="brush:php;toolbar:false;"><code></code> 还没渲染，<code>hljs.highlightAll()</code> 扫不到目标</pre> - CSS 漏了：只引了 JS 文件（如
highlight.min.js），没引对应主题 CSS（如atom-one-dark.min.css），结果代码能显示但全是黑字白底 - API 用错版本：v11+ 的 highlight.js 已废弃
initHighlightingOnLoad()，统一用hljs.highlightAll()；抄老教程容易白忙活
动态插入的代码块（比如 Vue/React 渲染后、AJAX 加载后）必须手动调 hljs.highlightElement(el)，不能依赖自动扫描。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
