code标签不提供高亮，仅作语义标记和等宽渲染；实现HTML代码语法高亮需pre嵌套code、外部高亮库（如Highlight.js）及正确转义三者缺一不可。
code 标签本身**不提供高亮**，它只做语义标记和等宽字体渲染。真要让 HTML 代码在网页上带颜色、有语法区分，必须配合 pre 结构 + 外部高亮库（如 Highlight.js）+ 正确转义，缺一不可。
为什么单独用 code 标签无法高亮 HTML 代码
code 是纯语义标签，浏览器只把它当“这段是代码”，不会解析里面是不是 <div>、<code>class="foo" 或 // comment。它既不识别语言，也不加 class，更不调用任何着色逻辑。
- 写
<code><html></html></code>→ 浏览器会尝试解析为真实标签，导致 DOM 崩塌、内容消失或 XSS 风险 - 即使加了
class="html"，code单独存在也不会被 Highlight.js 或 Prism.js 扫描 —— 它们只认pre嵌套结构 - 行内使用
code（比如解释一个属性名）可以，但那是语义标注，不是语法高亮
pre 和 code 必须嵌套，且 class 要写对
所有主流高亮库都强制要求 pre 包裹 code，因为 pre 保留换行与空格，这是解析缩进、层级、块结构的前提。
- ✅ 正确：
<div class="app"></div>
- ❌ 错误：
<div class="app"></div>（无pre，不扫描） - ❌ 错误：
<div class="app"></div>
（无code，无语义，不识别语言） - ❌ 错误：
<div class="app"></div>
（highlight.js要求language-html或lang-html，html不触发）
HTML 特殊字符必须转义，否则直接解析失败
把原始 HTML 字符串（如 <button onclick="alert(1)">Click</button>）直接塞进 code 里，浏览器会在 DOM 构建阶段就把它当真实标签处理，导致：
-
code内容被截断或丢失 - 高亮器读到的是残缺文本，甚至报错
- 恶意脚本可能被执行（XSS）
安全做法只有两种：
立即学习“前端免费学习笔记（深入）”；
- 手动转义：
<→，<code>>→>，&→&（注意&要写两次） - 用
script type="text/plain"包裹原始代码，再用 JS 提取textContent插入pre>code—— 完全绕过 HTML 解析，最稳
Highlight.js 初始化必须等 DOM 就绪，且 CSS 不能漏
常见“引入了却没颜色”，90% 是这三处断链：
-
hljs.highlightAll()放在<head>里执行 →pre>code还没生成，扫描不到 - 只引了
highlight.min.js，没引主题 CSS（如default.min.css）→ 解析成功但全是黑白 - 用了已废弃的
hljs.initHighlightingOnLoad()→ v11+ 中静默失效，新版文档已移除
推荐写法：
<script>
document.addEventListener('DOMContentLoaded', () => {
hljs.highlightAll();
});
</script>
或更简单：把 script 放在 </body> 前。
真正难的不是加高亮，而是确保 pre>code 结构在 Markdown 渲染、Vue/React 生命周期、CMS 输出或模板引擎中始终不被删空格、不被自动包裹、不被合并标签 —— 一旦结构断裂，高亮就静默消失，连控制台警告都没有。
