应使用 pre + code 嵌套结构保留代码换行缩进；code 是行内元素会压缩空白，需 pre 控制空白字符；html 特殊字符必须转义防解析错误；css 需设 overflow-x: auto、display: block 和等宽字体。
code 标签单独放多行代码，一定会塌成一行——这不是 bug，是它的设计行为。
为什么code里换行缩进全丢了
code 是行内元素，浏览器默认把换行符、制表符、连续空格全压缩成单个空格。哪怕你写的是带 4 层缩进的 Python 函数，渲染出来就是平的：
function add(a, b) {
return a + b;
}
实际显示为：function add(a, b) { return a + b; }，复制到编辑器里也一样，没法直接运行。
- 屏幕阅读器读作普通文字，不会提示“这是一段 JavaScript 代码”
- 语法高亮库（如 Prism.js）通常忽略没嵌在
pre里的code - 想保留原始结构，必须靠
pre来接管空白字符控制权
什么时候该用pre + code嵌套
只要代码块含换行、缩进、多行结构，就必须用 pre 包裹 code。常见场景包括：
- 展示函数体、组件定义、配置文件片段（如
package.json） - Shell 脚本、SQL 查询、JSON 响应体
- 任何需要用户复制后能直接粘贴运行的代码
正确结构是：
function foo() {\n return true;\n}。注意顺序不能颠倒：code 必须在 pre 内部，否则语义和格式双崩。
HTML 特殊字符不转义会直接执行
如果代码里含 、<code>>、&，不转义就会被浏览器当成标签解析。例如：
<div id="app"></div>
直接塞进 code 会导致 <div> 被解析，后续内容错位甚至整个 <code>pre 提前闭合。
- 服务端渲染建议统一调用
htmlspecialchars()或等效函数 - 前端动态插入时优先用
textContent，别用innerHTML - 转义后应为：
<div id="app"></div>
CSS 控制代码块最容易漏掉的三件事
不加样式，代码块在某些设备上可能完全不可见或难以区分：
-
pre必须设overflow-x: auto，否则长代码行直接撑破容器 -
pre code { display: block; }—— 不加这句，code仍按行内处理，横向滚动可能失效 - 字体必须显式设为等宽：
font-family: ui-monospace, 'SFMono-Regular', monospace;，别依赖浏览器默认
真正容易被忽略的是：pre 标签本身的缩进也会被渲染——如果模板里把 pre 写在缩进后，首行就会多出几个空格。要么让标签从行首开始，要么用注释消除：<!--<pre class="brush:php;toolbar:false;"><code class="js">-->
