HTML中pre和code标签的组合使用与代码展示最佳实践-html教程-PHP中文网

多行代码必须用嵌套，单行代码只用；因是行内元素，会压缩换行与空格，导致格式崩、语义丢、高亮失效，且HTML特殊字符必须转义为、&。

html中pre和code标签的组合使用与代码展示最佳实践

多行代码必须用

<code></code> 嵌套，单行代码只用 <code><code></code> —— 混用或漏嵌会导致格式崩、语义丢、高亮失效。</code>

为什么`单独不能显示多行代码`

是行内元素，浏览器会把换行符、制表符、连续空格全部压缩成一个空格。哪怕源码里写成三行，最终渲染出来就是一整行挤在一起。

常见错误现象：function foo() {\n return true;\n} 渲染后变成 function foo() { return true; }，缩进和换行全没了
复制粘贴到编辑器里也是平的，没法直接运行
屏幕阅读器读作普通文字，不会提示“这是一段 JavaScript 代码”
语法高亮库（如 Prism.js）通常忽略没嵌在里的

<code></code> 组合里哪些字符必须转义

所有出现在 内容里的 HTML 特殊字符都得手动实体化，否则浏览器会在解析阶段就把它当标签执行，不是“展示代码”，而是“运行代码”。

必须转义： → ，> → >，& → &
错误示例：直接塞进去，会被解析，后续内容错位甚至整个提前闭合
服务端渲染建议统一调用 htmlspecialchars() 或等效函数；前端动态插入时优先用 textContent 而非 innerHTML


别指望 CSS 或 JS 后期补救——这是 HTML 解析器干的事，转义必须在插入 DOM 前完成
语法高亮不起作用的三个高频原因
写了 
<code class="js"></code> 却没高亮？大概率卡在这几个地方。


											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										


class 名不匹配：Prism.js 默认认 language-javascript，highlight.js 接受 javascript 但更推荐加 language- 前缀；写成 js 或 JS 多数库不识别
没初始化高亮逻辑：highlight.js 需要显式调用 hljs.highlightAll()，且必须在 DOM 加载完成、脚本已加载之后执行
 没被正确包裹在  里：有些高亮库只扫描 <code></code> 结构，单独的 <code><code></code> 不触发</code>

CSS 样式控制最容易被忽略的四件事
浏览器对 
 的默认样式差异很大，不重置就上线，用户看到的代码块可能字体发虚、缩进错乱、横向溢出。

没设 font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace —— 字体变成衬线体，小字号下括号、分号根本分不清
没设 tab-size: 4 —— IDE 复制过来的缩进在 Safari 或旧 Chrome 里变成 8 格或塌成 2 格
没清 margin ——  上下留白过大，段落间距失控
没处理长行：缺 overflow-x: auto 或 white-space: pre-wrap，代码横向撑破容器，移动端完全不可用

真正麻烦的不是写对标签，而是每次复制代码时都要人工转义  > &，还不能依赖编辑器自动做——很多 Markdown 渲染器或 CMS 导出时会跳过这步。线上文档一旦漏转，轻则格式错乱，重则 XSS 风险。这个环节没有银弹，只能靠流程卡点或构建时自动扫描。