pre和code必须嵌套且顺序为pre包裹code，否则DOM被修正导致格式崩坏、高亮失效；需转义特殊字符、避免pre缩进，并重置样式、设等宽字体、启用横向滚动。
为什么单独放多行代码会塌成一行</H3>
<p><code>code
是行内元素，浏览器默认压缩所有换行符、制表符和连续空格为单个空格。哪怕源码里写的是带缩进的 Python 函数，最终渲染出来就是def hello():print("Hi")这种不可读形态。
常见表现包括：
- 复制到编辑器后缩进全丢，无法直接运行
- 屏幕阅读器读作普通文字，不提示“这是一段 JavaScript 代码”
- Prism.js 或 highlight.js 默认跳过未嵌在
pre里的code
为什么pre单独用会丢失“这是代码”的语义
pre保留格式没错，但它只声明“这是预格式化文本”，不说明内容类型。搜索引擎可能当普通段落索引，CSS 也难精准隔离样式。
后果很实际：
立即学习“前端免费学习笔记（深入）”；
- 高亮库（如 highlight.js）默认不扫描纯
pre，语法着色直接失效 - 无障碍工具无法区分代码和 ASCII 艺术或日志，可访问性评分掉档
- 如果只写
pre { background: #f0f0f0; }，所有预格式化内容（包括诗歌、错误堆栈）都被染色
pre和code必须嵌套，且顺序不能颠倒
HTML 规范与所有主流高亮库（Prism.js、highlight.js）只认precode结构。颠倒成codepre是非法嵌套，浏览器会自动修正 DOM：把pre踢到外面，code孤立，结果格式崩坏、高亮失效。
正确写法只有一个：
function foo() {
return true;
}
注意三点：
- 必须是
pre包裹code，不是反过来 - 原始代码含
<、>、&时，必须提前转义为、<code>>、& -
pre标签本身别缩进——模板里如果pre写在缩进后，首行会多出空格
CSS 控制代码块最容易被忽略的三件事
不加样式，代码块在不同设备上可能完全不可见或难以区分。
必须做：
- 重置
pre和code的默认margin/padding，加上overflow-x: auto防长行溢出 - 显式设置
pre code { display: block; }，否则code仍按行内处理，横向滚动可能失效 - 字体必须设为等宽：
font-family: ui-monospace, 'SFMono-Regular', monospace;，别依赖浏览器默认
最隐蔽的坑是：HTML 源码中pre标签本身的缩进也会被渲染——要么让标签从行首开始，要么用注释消除：<!--<pre><code class="js">-->
