code标签本身不支持语法高亮，仅用等宽字体渲染；必须嵌套在pre中、添加language-xxx类名，并在DOM就绪后调用highlightAll()或highlightElement()，同时确保CSS提前加载。
code标签本身不支持语法高亮
<code> 是纯语义化标签，只表示一段计算机代码，浏览器默认仅用等宽字体渲染，**不会解析语言类型、不触发任何高亮逻辑**。想让 <code> 里的内容变色加样式，必须靠外部 JS 库（比如 highlight.js）或 CSS 手动定义——但后者只能做静态样式，无法按语法词法染色。
highlight.js 正确绑定到 code 标签的三步
highlight.js 默认会查找页面中所有 <pre><code></code></pre> 结构，并根据 <code> 的 class 属性（如 language-javascript）识别语言。常见错误是只写 <code> 没包 <pre>，或者 class 写错：
- ✅ 正确结构：
<pre><code class="python">print("hello")</code></pre> - ❌ 错误结构1：
<code class="python">...（缺<pre>，highlight.js 默认不处理） - ❌ 错误结构2：
<code class="lang-js">...（class 值不匹配 highlight.js 识别规则，应为language-javascript或language-js） - ⚠️ 注意：如果手动调用
hljs.highlightElement(el)，可以绕过<pre>要求，但需确保el是<code>元素且已设置正确 language class
动态插入的 code 标签必须手动高亮
通过 innerHTML、insertAdjacentHTML 或框架（如 React/Vue）渲染的 <code>，highlight.js 不会自动扫描——它只在初始化时或 DOMContentLoaded 后扫描一次。解决方式只有主动调用：
- 对单个元素：
hljs.highlightElement(codeEl)（codeEl是<code>DOM 节点） - 对多个元素：
document.querySelectorAll('code').forEach(hljs.highlightElement) - 注意：必须确保
codeEl已挂载到 DOM 且含有效language-xxxclass，否则抛错Could not find the language - React 中常见坑：在
useEffect里操作 DOM 后忘记加防抖或清理，导致重复高亮报错
CSS 和 CDN 引入顺序影响是否生效
highlight.js 的样式必须在 JS 执行前加载，否则高亮文本会“闪一下”才上色，甚至部分样式丢失。典型失败配置：
立即学习“前端免费学习笔记（深入）”；
- ❌ JS 在
<head>加载，CSS 在<body>底部加载 → 高亮执行时无样式可用 - ✅ 推荐顺序：
<link rel="stylesheet">放<head>，<script>放<body>底部或加defer - ⚠️ 如果用 ES module 方式引入（
import hljs from 'highlight.js'），CSS 仍需单独<link>，模块本身不带样式 - 额外提醒：某些主题 CSS 里用了
:not(pre) > code这类选择器，如果真没包<pre>，样式可能完全不生效
<pre> 包裹缺失 + class 命名不规范 + 动态内容没手动触发高亮——这三处占了调试时间的 80%。 
