pre标签原样渲染源码中的空格、换行和制表符，必须嵌套code标签以保证语义与可访问性，展示代码需转义html字符并指定等宽字体栈。
pre 标签只保留源码里的空格、换行和制表符，不自动修复缩进逻辑
它不是“让代码看起来整齐”的美化工具，而是浏览器渲染阶段强制按字符位置原样输出的机制。你写几格空格、几个换行，它就显示几格、几行——前提是这些字符真在 HTML 源码里存在。
常见错误现象：
-
pre里写成单行 HTML（比如被压缩过），即使内容本身有缩进，pre也无能为力 - 用
text-indent模拟缩进，pre不识别，照样当普通字符渲染 - 复制粘贴代码时编辑器自动把制表符转成空格，或反之，导致对齐错乱
使用场景：展示真实源码片段、日志原始输出、ASCII 表格、带缩进的 YAML/INI 配置文件内容。
必须嵌套 code 标签，否则语义缺失且可访问性差
pre 负责格式，code 负责声明“这是代码”，两者分工明确。只用 pre，屏幕阅读器会把它读作普通段落；只用 code，换行和缩进全丢。
正确结构只有这一种：
<pre class="brush:js;toolbar:false;"><code>function foo() {<br> return 1;<br>}</code>
容易踩的坑：
- 把
code放在pre外面，比如<code><pre class="brush:php;toolbar:false;">...</pre>—— 语义倒置，部分语法高亮库不识别 - 用
div+white-space: pre替代pre，虽能模拟行为，但失去语义和默认等宽字体支持 - 忽略 class 命名规范（如
brush:js），某些旧版高亮插件依赖该类名触发解析
中文代码对齐歪斜？问题出在字体族没设对
默认 monospace 在 Windows 上常映射到“微软雅黑”，而它中文是全角、英文是半角，导致 console.log("你好") 和 console.log("hello") 列不对齐。
必须显式指定等宽字体栈：
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
关键点：
- 别只写
monospace—— 它只是关键字，不是具体字体 - 优先列 macOS/Linux 常见等宽字体，再 fallback 到
monospace - 中文字体如 “Courier New” 对中文支持差，不推荐直接用
往 pre 里塞 HTML 代码前，必须转义 、<code>>、&
pre 不做任何 HTML 解析过滤，它只忠实地渲染你给它的字符串。如果你直接写 <div>hello</div>，浏览器会在解析 HTML 阶段就把这个 <div> 当真实标签处理，轻则内容截断，重则 DOM 结构崩坏。
<p>安全做法只有两种：</p>
<ul>
<li>服务端输出前统一做 HTML 实体编码：<code> → <code>，<code>> → >，& → &
textContent 赋值，而不是 innerHTML
注意：pre 本身不提供转义能力，指望 CSS 或 JS 后期补救已经晚了——HTML 解析器早在样式和脚本执行前就完成破坏。
