单独使用 code 标签无法被 highlight.js 或 prism.js 识别，因其默认仅扫描 pre 元素内的 code 子节点；code 需嵌套于 pre 中、class 带 language- 或 lang- 前缀、内容须 html 转义，且必须配置基础 css（如 font-family、white-space）才能正确高亮。
code 标签本身不参与高亮逻辑，它只是语义容器；真正起作用的是 pre 与 code 的嵌套结构、class 值规范、以及后续 JS 库的解析触发点。
为什么单独用 code 标签无法被 highlight.js 或 Prism.js 识别
这两个库默认只扫描 pre 元素内部的 code 子节点——这是硬编码的匹配规则，不是可配置项。浏览器把 code 当作行内元素，换行、缩进、连续空格全被压缩，语法解析器根本拿不到原始结构信息。
-
<p><code class="js">const x = 1;→ 完全忽略，连语言判断都不会做 <div> <code class="html"><div></div>→ 不触发，即使 class 写对也白搭- 正确起点只能是：
<pre class="brush:js;toolbar:false;">const x = 1;</pre> - ✅ 接受：
class="javascript"、class="lang-html"、class="python" - ❌ 拒绝：
class="js"、class="javascript"、class="HTML"（大小写敏感）、class="html5" - 不确定语言时，用
class="plaintext"强制不着色，比错配更安全 - 手动转义规则：
→ <code>，<code>>→>，&→& - 服务端渲染务必调用
htmlspecialchars()类函数 - 前端动态插入时，别用
innerHTML = str，改用textContent或先实体化再赋值 - 必加样式：
pre { font-family: ui-monospace, 'SFMono-Regular', monospace; tab-size: 4; white-space: pre; overflow-x: auto; } -
code行内样式建议加背景和圆角：background: #f8f9fa; padding: 2px 6px; border-radius: 3px; - 主题 CSS（如
github-dark.min.css）必须显式引入，它不随 JS 自动加载
code 上的 class 必须带 language- 或 lang- 前缀
highlight.js 严格依赖这个前缀来决定启用哪个语言解析器；Prism.js 虽稍宽松，但推荐统一用标准写法，避免跨库迁移时出问题。
HTML 特殊字符必须在塞入 code 前转义
浏览器在 DOM 构建阶段就会解析 、<code>>、&，如果没转义，<script>alert(1)</script> 这类内容会真执行，或者直接导致 pre 提前闭合、后续 HTML 错位。
高亮生效 ≠ 高亮可用：基础 CSS 不能省
即使 highlightAll() 成功运行、所有 span.token 类都被打上，若没设 font-family、tab-size、white-space，用户看到的仍是糊字、塌缩进、横向滚动失效的“假高亮”。
最常被跳过的其实是转义和字体设置——前者让高亮静默失败，后者让高亮形同虚设。结构对了只是起点，不是终点。
