code标签本身不保留换行和缩进，因其是行内元素，浏览器会压缩换行符、制表符及连续空格；多行代码必须用嵌套，前者保留格式，后者声明语义，缺一不可。
code 标签本身不保留换行和缩进，直接塞多行代码进去只会压成一行——这不是 bug，是它的设计行为。
为什么单用 code 显示多行代码会塌成一行
code 是行内元素，浏览器默认忽略其中的换行符、制表符和连续空格。哪怕你写成：
function add(a, b) {
return a + b;
}
实际渲染出来就是：function add(a, b) { return a + b; }——所有结构全丢。
- 常见错误现象：复制粘贴到编辑器里全是平的，括号错位，根本没法读
- 使用场景：只适合嵌在段落里的短内容，比如函数名
useState、命令npm install、路径/src/utils.js - 别把它当容器用——
code不是div，不能设width或margin来控制布局
多行代码必须用 pre + code 嵌套
pre 负责保留格式，code 负责声明语义，二者缺一不可。单独用 pre 会被屏幕阅读器读作“预格式化文本”，不是“JavaScript 代码”；单独用 code 则格式全崩。
立即学习“前端免费学习笔记（深入）”；
- 正确结构必须是：
<code><pre class="brush:php;toolbar:false;"><code class="js">...</code>
-
class="js"不是必须，但加上能触发 highlight.js 或 Prism.js 的语法高亮 - 如果代码里含
、<code>>、&，必须提前转义：、<code>>、&，否则浏览器会尝试解析为标签 - 缩进统一用空格（2 或 4 个），别用 Tab——不同环境渲染宽度不一致，容易错行
pre 上加什么 CSS 才不翻车
没样式也能显示，但体验差。几个关键点：
-
pre必须设overflow-x: auto，不然长代码行直接撑破容器 -
code要设display: block，否则它作为行内元素，不响应pre的宽高和滚动控制 - 别给
code单独设white-space: pre——它已从pre继承，重复设置可能干扰层叠 - 字体建议用
ui-monospace, 'SFMono-Regular', 'Consolas', monospace，比默认等宽更稳
单行代码别误塞进 pre
写“调用 fetch() 时传 signal”这种句子，code 就够了。塞进 pre 会带来三个问题：
-
pre是块级元素，默认带上下 margin，插在段落中会让行高异常增大 - 屏幕阅读器读作“预格式化文本”，语义错误
- CSS 里统一给
pre加背景色，结果把 ASCII 艺术或日志也染上了
真正容易被忽略的是混用边界：有人把整段 Shell 脚本塞进 code，有人把 console.log() 单独包一层 pre。记住唯一判断标准——要不要保留原始换行和缩进。
