HTML中pre预格式化文本 HTML中pre标签显示代码块

必须嵌套使用<pre><code>标签，且需转义HTML特殊字符、正确设置language-xxx类名、统一用空格缩进并添加overflow-x: auto。

为什么只用

 标签显示多行代码会乱成一团</H3><p><code>code

是行内元素，浏览器会忽略它里面的换行符和多余空格，所有内容强行压成一行。比如写成 <pre><code>function a() {n return 1;n}</code></pre>，若只套 code 不套 pre，结果就是 function a() { return 1; } ——缩进没了、换行没了、语义也弱了。

常见错误现象：

• 代码块挤在一行，根本没法读
• 复制时丢失缩进，粘贴到编辑器里全是平的
• 屏幕阅读器无法识别这是“一段完整代码”，只当普通文字朗读

正确做法是必须嵌套：<pre><code>...</code></pre>。pre 负责保留格式，code 负责声明语义——两者缺一不可。

HTML 特殊字符（、&）不转义会导致页面结构崩溃

直接把含 <div> 的 HTML 代码塞进 <pre><code> 里，浏览器会真把它当标签解析：轻则 <div> 被吃掉、后续内容错位；重则整个 pre 块提前闭合，后面 DOM 全乱。

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

必须手动转义以下字符：

• < →
• > → >
• & → &

别指望 CSS 或 JS 补救——这是 HTML 解析阶段就发生的破坏，转义必须在插入前完成。服务端输出可统一做 HTML 实体编码；前端动态渲染建议用 textContent 而非 innerHTML 插入原始字符串。

语法高亮不起作用？大概率是 class 名写错了

highlight.js 或 Prism.js 这类库不会自动猜语言。它们只认特定命名格式的 class 或 language-xxx 属性。

典型错误写法：

• <code class="js"> —— 太模糊，可能被其他样式覆盖，且 highlight.js 默认不识别
• <code data-lang="javascript"> —— 多数库默认不读 data-lang
• <code class="javascript"> —— Prism 要求是 language-javascript，highlight.js 接受但更推荐标准前缀

推荐写法（兼容主流库）：

• <code class="javascript">
• <code class="python">
• <code class="html">

别漏掉 highlight.js 的初始化调用：hljs.highlightAll() 必须在 DOM 加载完、且脚本已加载后执行，通常放在 </body> 前。

长代码横向溢出、缩进错位、Tab 显示不一致

pre 默认用 white-space: pre，不换行也不折行，超宽代码直接撑破容器。同时，不同浏览器对 Tab 字符（t）的宽度处理不一致（有的当 4 空格，有的当 8），导致缩进错位。

实操建议：

• CSS 中加 overflow-x: auto 让横向滚动可用
• 用空格代替 Tab 缩进（推荐 2 或 4 空格），避免跨浏览器差异
• 如需换行辅助阅读，可设 white-space: pre-wrap，但注意这会让连续空格被压缩 —— 所以仍要优先保证源码本身用空格缩进
• 不要依赖 pre 的 width 属性（XHTML 已废弃，现代浏览器也不支持）

最易被忽略的一点：很多人以为加了 pre 就万事大吉，其实转义、class 命名、缩进方式、滚动控制，四个环节只要一个没对，代码块就不是“能用”，而是“看起来像能用”。