如何用HTML代码优化代码块高亮结构

小枫吖_2983

2026-07-25

873人浏览

原创

必须嵌套在中单独写标签，因为highlight.js或prism.js仅扫描结构；单独使用会被浏览器压缩空白符，且无语义，导致高亮失效、可访问性差。

如何用html代码优化代码块高亮结构

为什么

必须嵌套在<pre class="brush:php;toolbar:false;">里

单独写 标签不会触发 highlight.js 或 Prism.js 的高亮——库只扫描 <pre class="brush:php;toolbar:false;"><code> 这种嵌套结构。浏览器把 <code> 当作行内元素，所有换行、缩进、连续空格都会被压缩成单个空格；而 <pre class="brush:php;toolbar:false;"> 虽保留格式，但不带语义，屏幕阅读器和搜索引擎无法识别这是代码，高亮库也默认跳过它。</pre>

常见错误现象：

写了 <p><code class="js">console.log(1)
用了 <div><code class="html"><div></div>

漏掉 <pre class="brush:php;toolbar:false;"></pre>，只留 <code><code>

正确结构只有一种：<pre class="brush:php;toolbar:false;"><code class="js">...</code></pre>。别试图用 CSS 修复格式错乱——解析阶段就错了，样式再好也没用。

HTML特殊字符怎么转义才不影响高亮

代码里含 、<code>>、& 不转义，浏览器会当真实标签解析。比如 <script>alert(1)</script> 塞进 <code>，页面真会弹窗。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

安全做法：

服务端输出前调用 htmlspecialchars() 类函数（PHP）或 DOMPurify.sanitize()（JS）
前端动态插入时，用 textContent 替代 innerHTML
或把原始代码塞进 <script type="text/plain"></script>，再读取 .textContent 插入 <pre class="brush:php;toolbar:false;"><code></code></pre>

别手动替换 & → &：容易漏，且 & 在 HTML 中要写两次才保险（第一次被解码，第二次才保留）。

高亮没颜色？先查这三处硬性条件

写了 <pre class="brush:php;toolbar:false;"><code class="js"></code> 却没颜色，大概率卡在这三处：</pre>

class 值不规范：Prism.js 更认 language-javascript 或 js；highlight.js 接受 javascript，但推荐 language-javascript；写成 Javascript 或 JS 就不触发
脚本加载时机不对：highlight.js 必须在 DOM 加载完成后调用 hljs.highlightAll()；Prism.js 虽自动运行，但如果 <script></script> 放在 <pre class="brush:php;toolbar:false;"><code></code> 上方，可能漏掉已存在的代码块</pre>
CSS 没加载或 404：高亮本质是往 <code> 里加子元素并设 color，没样式表等于白搭；广告拦截器或 CDN 失效也会导致“有 class 没颜色”

CSS 四项必须设，否则高亮效果打折

即使语法着色成功，字体模糊、缩进错位、长行溢出，用户照样看不清。这四条 CSS 缺一不可：

font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace：避免衬线体干扰小字号下的括号、分号辨识
tab-size: 4：否则 Safari 或旧 Chrome 把制表符当 8 格，IDE 复制过来的 Python 缩进全乱
white-space: pre：确保空格、换行不被压缩（
```
 默认行为就是这个，但显式声明更稳）
```
overflow-x: auto：长代码行不撑破容器，横向滚动条只在需要时出现

隐藏代码块时别用 display: none 或 hidden 属性——高亮库依赖 DOM 渲染和文本提取，移走或删掉节点后，Prism.highlightElement() 可能报 "Cannot read property 'textContent' of null"。真要隐藏，用 position: absolute; left: -9999px; top: -9999px;，保持结构完整。