pre 标签无 code 属性，必须用 <pre><code class="js"> 嵌套结构；class 必须写在 code 上且格式正确；HTML 实体需转义；高亮依赖 CSS 主题文件。
pre 标签不能直接设 code 属性
HTML 中 <pre> 标签根本没有 code 属性——这是个常见误解。你看到的“code”其实是另一个独立标签，不是 pre 的属性。写成 <pre code="js">... 会被浏览器忽略，高亮库也完全不识别。
必须用 <pre><code> 嵌套结构
所有主流高亮库（highlight.js、Prism.js）只扫描这种嵌套组合：<pre><code class="js">...。单独用 <pre> 或 <code> 都不行：
-
<pre>console.log(1);</pre>→ 保留缩进但无语义，不触发高亮 -
<code class="js">console.log(1);</code>→ 行内渲染，换行和缩进全被压缩 <pre><code class="js">function f() { return 1; }</code>→ ✅ 唯一可靠写法
class 必须写在 <code><code> 上，且格式要对
高亮库靠 <code> 的 class 判断语言，写错位置或格式就等于没写：
- ✅ 正确：
<code class="javascript">、<code class="lang-html"> - ❌ 错误：
<pre class="javascript"><code>（class 在 pre 上）、<code class="js">（highlight.js 不认简写）、<code lang="js">（部分库不支持 lang 属性） - ⚠️ 注意：Prism.js 对 class 宽松些，
class="html"也能识别；highlight.js 严格认language-xxx前缀
代码里的 <、>、& 必须转义
如果不转义，浏览器会把 <div> 当成真实标签解析，轻则格式错乱，重则执行脚本：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：
<code class="html"><div id="app"></div></code>→ 页面可能真渲染出一个 div - ✅ 正确：
<code class="html"><div id="app"></div></code> - 服务端输出前调
htmlspecialchars()；前端动态插入时用textContent赋值，别用innerHTML
最容易被忽略的是：高亮库只管打标签，颜色全靠 CSS 主题文件。漏掉 highlight.min.css 或 prism.css，代码块永远是黑底白字——不是高亮失败，是样式根本没加载。
