pre标签只保留源码中真实存在的空格、换行符（ ）、制表符（ ），不修复缺失或还原转义字符；必须嵌套code标签以兼顾格式与语义；中文对齐需显式指定等宽字体栈；动态插入内容应使用textcontent确保原样渲染。
pre标签保留什么、不保留什么
pre只保留源码里真实存在的空格、换行符（
）、制表符（ ），它不修复缺失，也不还原被转义的字符。你写几格空格、几行换行，它就显示几格、几行——前提是这些字符真在 HTML 源码中。
常见误解是“pre能自动对齐代码”或“能修好压缩过的 JSON”。实际上：
- 若后端返回 "line1\nline2"（即字面量
而非真实换行），pre 会原样显示反斜杠和n
- 若模板引擎把
转成空格或删掉，pre 收到的就是平铺字符串，再怎么套标签也没用
- white-space: pre 这类 CSS 只是模拟行为，语义上不是 pre 标签，屏幕阅读器不会识别为预格式化内容
必须嵌套code标签，不能反过来
pre 负责格式保留，code 负责语义声明——这是分工。只用 pre，屏幕阅读器读作普通段落；只用 code，缩进和换行全丢。
正确结构唯一：<pre class="brush:js;toolbar:false;"><code>function foo() { return 1; }</code></pre>
错误写法包括：
- <code><pre class="brush:php;toolbar:false;"></pre>（语义倒置，高亮库常不识别）
- <pre class="brush:php;toolbar:false;"><div>...</div></pre>（div 是块级标签，HTML5 规范禁止在 pre 中直接嵌套）
- <pre class="brush:php;toolbar:false;"><p>...</p></pre>（同样违反规范，部分浏览器容错但不可靠）
中文代码对齐歪斜？问题出在字体栈
Windows 上默认 monospace 常映射到“微软雅黑”，而它中文是全角、英文是半角，导致 console.log("你好") 和 console.log("hello") 列不对齐。
必须显式指定等宽字体栈：font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
注意：
- 别只写 monospace，它只是 fallback 关键字，不是具体字体
- 优先列 macOS/Linux 常见字体，再 fallback 到 monospace
- “Courier New” 对中文支持差，不推荐直接使用
动态插入内容时，用textContent别碰innerHTML
JS 动态设置 pre 内容，textContent 是唯一 100% 保证换行符原样进入 DOM 的方式。它绕过 HTML 解析，连 & 都不会被二次解析。
推荐写法：
const el = document.querySelector('pre');<br>
el.textContent = `line1
line2
line3`;
绝对避免：
-
el.innerHTML = "line1\nline2";（若字符串含用户输入或 API 数据，可能被当标签解析）-
el.innerText = ...（触发重排，且某些浏览器会压缩空白）- React 中用
dangerouslySetInnerHTML 前必须确保内容已预转义- Vue 中优先用
v-text 或直接操作 textContent最常被忽略的点：pre 不转义、不解析、不修正——它只忠实地渲染你给它的字符串。传进去的是 HTML 实体，它就显示实体；传进去的是未转义的 <div>，浏览器就在解析阶段把它当真实标签处理。能不能用好，取决于你往里塞什么，而不是它能帮你做什么。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
