必须嵌套使用<pre><code>：<pre>保留换行缩进，<code>声明代码语义；单独使用均失效，语法高亮库（如highlight.js）仅识别此结构，且language-xxx类名须加在<code>上，DOM就绪后调用highlightAll()并引入对应CSS主题。
pre 和 code 标签必须嵌套，不能单独用
浏览器原生不支持语法高亮，<code> 单独存在只渲染为等宽字体，关键词、字符串、注释全无颜色区分。真正起作用的是 <pre><code></code></pre> 这个组合：前者保留换行与空格（解析器靠它识别缩进和结构），后者标明内容是代码而非普通文本。
常见错误写法包括：
-
<p><code class="js">const x = 1;</code></p>→ highlight.js 和 Prism 都直接跳过 -
<div><code><html></code></div>→ 没有<pre>，不触发任何解析 -
<pre><code><script>alert(1)</script></code></pre>→ 未转义<和&，浏览器会误解析成真实标签，导致 DOM 错乱或脚本执行
正确做法是：先对原始代码做 HTML 实体转义（< → ，<code>& → &），再塞进 <pre><code> 里。
highlight.js 的 class 值必须是 language-xxx 或 lang-xxx
哪怕你引入了所有语言支持文件，如果 <code> 上的 class 写成 class="javascript" 或 class="html5"，highlight.js 就不会识别——它只认 language-javascript、lang-html 这类标准前缀。
立即学习“前端免费学习笔记（深入）”；
实际使用中建议统一用 language- 前缀，更清晰也更兼容。例如：
<code class="js">console.log('hello');</code><code class="css">body { margin: 0; }</code><code class="html"><div id="app"></div></code>
注意：Prism.js 对 class 要求略宽松，class="html"、class="html" 都能识别；但 highlight.js 严格匹配，写错就等于没写。
DOM 就绪后才调用 highlightAll()，别在 head 里急着执行
把 highlight.js 的初始化脚本放在 <head> 里并立即调 hljs.highlightAll()，大概率什么也不发生——因为此时 <pre><code> 节点还没加载进 DOM。
稳妥做法只有两种：
- 把
<script>放在</body>之前（最简单） - 或者用事件监听：
document.addEventListener('DOMContentLoaded', () => hljs.highlightAll());
另外别用已废弃的 hljs.initHighlightingOnLoad()，新版文档明确不推荐，且在某些构建环境下会报错。
CSS 主题必须手动引入，否则只有文字没颜色
highlight.js 只负责解析和打标签，样式全靠外部 CSS 文件。漏掉这一步，你会看到代码块正常显示，但全是黑字白底——不是高亮失败，是根本没样式。
CDN 引入示例（以 default 主题为例）：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
如果你换主题（比如 atom-one-dark），就得同步改这个链接，且确保 JS 和 CSS 版本一致，否则可能有 class 名不匹配问题。
容易被忽略的一点：Prism.js 同样需要 CSS，但它默认不带任何语言插件；你用了 language-python 却没引入 prism-python.min.js，那 Python 代码就会退化成纯文本——这种“部分失效”比完全不生效更难排查。
