code标签是行内元素，会压缩空白字符；多行代码必须用pre+code嵌套，pre保留格式，code声明语义，缺一不可。
code 标签不是代码块容器，它只负责语义声明；多行代码必须用 pre + code 嵌套，否则格式全丢。
为什么单用 code 会把换行和缩进压成一行
code 是行内元素，浏览器默认压缩所有空白字符——包括换行符、制表符和连续空格。哪怕你写成：
function add(a, b) {
return a + b;
}
实际渲染出来就是：function add(a, b) { return a + b; }，括号错位、逻辑难读。
- 常见错误现象：复制粘贴到编辑器里全是平的，
console.log()被塞进段落却缩进错乱 - 适用场景：仅限穿插在句子中的短标识，比如
useState、npm install、/src/utils.js - 别给
code设width或margin——它不响应这些属性，强行加只会让布局不可控
多行代码必须用 pre 包 code，缺一不可
pre 保留原始格式（空格、换行、缩进），code 声明“这是代码”——前者管“怎么显示”，后者管“这是什么”。高亮库（如 Prism.js）也只扫描 pre 下的 code 元素。
立即学习“前端免费学习笔记（深入）”；
- 正确结构：
function greet() { console.log("hi"); } - 漏掉
code：屏幕阅读器读作“预格式化文本”，不是“JavaScript 代码” - 漏掉
pre：所有缩进和换行被浏览器吞掉，只剩一坨平文本 -
class属性不能少：写成class="javascript"或language-js，否则高亮不触发
pre + code 的 CSS 关键设置
没样式也能显示，但体验差。几个硬性要点必须加：
-
pre必须设overflow-x: auto，否则长代码行直接撑破容器 -
code要设display: block，否则它作为行内元素，不继承pre的宽高和滚动控制 - 字体推荐：
font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace，比默认更稳 - 缩进统一用空格（2 或 4 个），别用 Tab——不同环境渲染宽度不一致，容易错行
- 如果代码里含
<、>、&，必须提前转义为、<code>>、&，否则浏览器真会解析成标签
居中代码块时最容易踩的坑
pre 默认是块级元素，但它的宽度由内容撑开，margin: 0 auto 不生效。直接对父容器设 text-align: center 会破坏内部缩进，让高亮错位。
- 可靠做法：用
div包裹pre，给div设max-width和margin: 0 auto，再重置pre的默认上下 margin - 内联
code居中：要么放p里并设text-align: center，要么单独设display: block+margin: 0 auto，但要手动调line-height或padding补齐行高 - 真正容易被忽略的是混用边界：有人把整段 Shell 脚本塞进
code，有人把console.log()单独包一层pre。判断标准只有一个——要不要保留原始换行和缩进。
