必须用 <pre><code> 嵌套结构，单独 <code> 无法触发高亮、丢失格式且语义缺失；HTML 特殊字符需手动转义为

pre 和 code 必须嵌套，不能只用 code

浏览器把 <code> 当作行内元素，换行、缩进、多个空格全被压成一个空格——直接塞多行 HTML 代码进去，格式全丢，还可能被解析成真实标签。高亮库（如 highlight.js 或 Prism.js）默认只扫描 <pre><code> 这种结构，单独的 <code> 标签根本不会处理。

正确写法是：

<div id="app">
  <p>Hello</p>
</div>

错误写法包括：

• <p><code class="html"><div></div></code></p>（没 <pre>，不触发高亮）
• <pre><div class="app"></div></pre>（没 <code>，语义缺失、转义易漏、库不识别）

HTML 特殊字符必须提前转义，不是靠 CSS 或 JS 补救

所有出现在 <code> 内容里的 <、>、& 都得手动变成 、<code>>、&。否则浏览器在 DOM 解析阶段就把 <div> 当成真实标签执行，后面内容错位，甚至整个 <pre> 提前闭合。

立即学习“前端免费学习笔记（深入）”；

常见疏漏点：

• 前端动态插入时用了 innerHTML，但没对原始字符串做 textContent 替代或实体化处理
• 服务端渲染没调 htmlspecialchars() 类函数，直接拼接原始 HTML 字符串
• 复制粘贴代码时忘了检查是否含未转义的 &，比如 data-id="1&2" 变成 data-id="1&2" 才安全

第三方库引入后没高亮？先查这三件事

highlight.js 和 Prism.js 都依赖明确的触发时机和结构约定，不是“引入就亮”。

高频失败原因：

• class 值写错：比如写成 class="js" 或 class="HTML"；正确应为 class="html"（推荐）或 class="html"（highlight.js 兼容，但 Prism.js 更认 language- 前缀）
• 没显式初始化：highlight.js 必须在 DOM 加载完后调 hljs.highlightAll()；Prism.js 虽自动运行，但若脚本在 <pre><code> 之前加载，也会漏掉
• CSS 没引入或路径失效：高亮本质是加 class 后靠 CSS 着色，没样式表等于白搭；CDN 地址过期、404、被广告拦截器屏蔽都可能导致“有 class 没颜色”

字体与空白控制不设，高亮效果直接打折

即使语法着色成功，如果 <pre><code> 的基础样式没调，用户看到的可能是模糊字体、塌陷缩进、横向滚动条乱跳。

关键 CSS 必加项：

• font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace —— 避免衬线体干扰括号、分号辨识
• tab-size: 4 —— 否则 Safari 或旧版 Chrome 把制表符当 8 格，缩进错乱
• white-space: pre 或保持 <pre> 默认行为 —— 确保空格、换行不被压缩
• overflow-x: auto —— 长行代码不撑破容器

这些不是锦上添花，而是让高亮真正可用的底线设置。很多人卡在“看着像高亮了”，其实颜色对了但字体糊、缩进崩、换行断，实际阅读体验极差。