HTML中code标签如何保留代码格式-html教程-PHP中文网

code 标签是行内元素，不保留换行、缩进和连续空格，导致多行代码被压成一行、语义错乱，如函数显示为单行、路径丢失分隔符、html 字符未转义。

html中code标签如何保留代码格式

code 标签本身不保留换行和缩进

code 是行内元素，浏览器会忽略其中的换行符、制表符和连续空格——这不是 bug，是规范行为。你粘贴进去的多行 JS 或 Python，渲染出来就是压成一行的平铺文本，括号错位、逻辑断裂，复制到编辑器里根本没法直接运行。

常见错误现象包括：

写
```
function add(a, b) {<br>  return a + b;<br>}
```
，实际显示为 function add(a, b) { return a + b; }
Shell 命令
```
ls -l<br>/home/user
```
渲染成 ls -l /home/user，丢失路径分隔语义
带 HTML 字符的代码（如 x ）未转义，导致浏览器解析失败、后续结构错乱

多行代码必须用

 嵌套

真正能保留原始格式的是 pre 元素，但它只负责“预格式化”，不声明“这是代码”；code 负责语义，但不保格式。二者必须嵌套使用，缺一不可。

正确结构是：

<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"><code class="js">function hello() {
  console.log('hi');
}</code>

关键点：

pre 必须设 <code>overflow-x: auto，否则长代码行会撑破容器
code 应设 display: block，否则它作为行内元素，不响应 pre 的宽高和滚动控制
若需语法高亮，class 属性（如 class="js"）必须加在 code 上，highlight.js 或 Prism.js 才能识别语言
代码中含 、<code>>、& 时，必须手动转义为 、<code>>、&

单行代码别误塞进

写“调用 fetch() 时传 signal”这种句子，code 就够了。硬塞进 pre 会带来三个问题：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

pre 是块级元素，默认带上下 margin，插在段落中会让行高异常增大
屏幕阅读器读作“预格式化文本”，不是“fetch 函数”，语义错误
CSS 统一给 pre 加背景色，结果把 ASCII 艺术或日志也染上了

判断标准只有一个：要不要保留原始换行和缩进。要 → 用 pre+code；不要 → 只用 code。

容易被忽略的 CSS 和字体细节

只写 font-family: monospace 不够可靠——不同系统 fallback 字体差异大，Windows 下可能用 Courier New，macOS 下用 Menlo，Linux 下甚至用 DejaVu Sans Mono，等宽但字宽、行高等渲染表现不一致。

推荐显式指定字体栈：

code {
  font-family: "SFMono-Regular", "Fira Code", "Consolas", "Liberation Mono", "Menlo", monospace;
  font-size: 0.875em;
  background-color: #f6f6f6;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

还要注意：