pre标签是唯一能原样保留空格、制表符和换行的html原生方案，但需手动转义
pre 标签是唯一能原样保留空格、制表符和换行的 HTML 原生方案，不需要 JS 或 CSS 就能生效——但直接用它容易出错，关键在内容转义和样式补救。
为什么 pre 里的代码或 HTML 片段会乱掉
浏览器把 pre 内部当普通 HTML 解析，遇到 <div>、<code><script></script> 这类标签会尝试渲染或执行，而不是显示为纯文本。
- 必须手动把
替换成 <code>，<code>>替换成>，&替换成& - 用
textContent赋值比 innerHTML 安全：比如el.textContent = codeString可跳过转义步骤 - 服务端输出时若已做 HTML 转义（如 Django 的
{{ code|escape }}），前端就不用再处理
pre 默认不换行，长代码横向溢出怎么办
默认 white-space: pre 禁止自动折行，用户得拖动水平滚动条，体验差。
- 加
white-space: pre-wrap允许换行，同时保留原有缩进和空行 - 配合
word-break: break-word或overflow-wrap: break-word处理超长无空格字符串（如 base64） - 设
overflow-x: auto保证横向滚动可用，避免内容被截断
用 pre 显示代码时，为什么缩进看起来不对
因为 pre 默认把制表符 \t 当作 8 字符宽度，而现代编辑器普遍用 2 或 4，导致对齐错乱。
- 用空格替代
\t是最稳妥的做法，尤其在静态 HTML 中 - 如果必须支持制表符，可加 CSS：
tab-size: 4（Chrome/Firefox/Edge 支持，Safari 15+ 支持） - 注意：
tab-size不是所有旧版浏览器都支持，不能依赖它做关键对齐
真正麻烦的不是怎么写 pre，而是怎么确保里面的内容既“可读”又“不被解析”——转义漏一个 ，整块代码就可能消失或破坏页面结构。
