HTML中实现代码高亮展示的pre code结构与第三方库引入-html教程-PHP中文网

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

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

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

正确写法是：
<div id="app">
  <p>Hello</p>
</div>
错误写法包括：

<p><code class="html"><div></div>
（没 <pre class="brush:php;toolbar:false;"></pre>，不触发高亮）

<pre class="brush:php;toolbar:false;"><div class="app"></div></pre>（没 <code>，语义缺失、转义易漏、库不识别）

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

所有出现在 <code> 内容里的 、<code>>、& 都得手动变成 <、>、&。否则浏览器在 DOM 解析阶段就把 <div> 当成真实标签执行，后面内容错位，甚至整个 <code><pre class="brush:php;toolbar:false;"></pre> 提前闭合。
常见疏漏点：

ModelScope
一个面向AI开发者的开源模型与数据社区，提供模型、数据集和相关工具资源，方便用户探索、使用和开发人工智能应用。

下载

前端动态插入时用了 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 class="brush:php;toolbar:false;"><code></code> 之前加载，也会漏掉</pre>

CSS 没引入或路径失效：高亮本质是加 class 后靠 CSS 着色，没样式表等于白搭；CDN 地址过期、404、被广告拦截器屏蔽都可能导致“有 class 没颜色”

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

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

关键 CSS 必加项：

font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace —— 避免衬线体干扰括号、分号辨识

tab-size: 4 —— 否则 Safari 或旧版 Chrome 把制表符当 8 格，缩进错乱

white-space: pre 或保持 <pre class="brush:php;toolbar:false;"></pre> 默认行为 —— 确保空格、换行不被压缩

overflow-x: auto —— 长行代码不撑破容器

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