pre标签仅渲染原始字符，格式丢失源于内容写入前已丢失 或空格；应使用textcontent而非innerhtml写入，避免html解析导致空白符被破坏。
pre 标签本身不“保存”格式，它只忠实地渲染你塞进去的字符——如果保存后打开发现缩进没了、换行变一行、空格被压扁，问题一定出在内容写入前就已丢失真实
、 或连续空格。
用 textContent 写入，别碰 innerHTML
这是最常被跳过的一步，也是 90% 排版错乱的根源。
- ✅ 正确：
preEl.textContent = apiResponse.body—— 绕过 HTML 解析，保留所有原始空白 - ❌ 错误：
preEl.innerHTML = apiResponse.body—— 若响应含或 <code>&，可能被当标签解析；若含字面量，它就真显示成文字 - ⚠️ 更隐蔽的错：
preEl.innerText = str—— 浏览器会 normalize 空白，把多个空格、
确认字符串里真有
，不是 \n 字面量
后端返回 JSON 时，换行符常被双重转义为 "line1
line2"，JS JSON.parse() 后得到的是含两个反斜杠的字符串，不是真实换行。
- 验证方法：
console.log(JSON.stringify(yourString))—— 如果看到"line1\nline2"，说明还没还原；看到"line1 line2"（换行出现在控制台第二行），才是真实换行 - 服务端要返回原始字节
\n；前端接收后别再JSON.stringify()或拼接 - 从
textarea读值是安全的（textarea.value天然保留input[type="text"]不支持多行，别用它传代码
必须配齐三样 CSS 才算真正生效
只写 <pre class="brush:php;toolbar:false;"></pre> 是不够的。现代项目中 reset.css、字体 fallback、容器宽度都会破坏效果。
-
white-space: pre-wrap—— 比默认pre更实用：保留缩进与空格，同时允许长行自动折行（避免横向撑破） -
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Microsoft YaHei Mono', monospace—— 显式声明中英文等宽字体栈，防中文缩进塌陷 -
overflow-x: auto; max-width: 100%—— 横向滚动必须配对父容器宽度限制，否则滚动条不触发 - 额外建议：
tab-size: 4统一制表符宽度，避免编辑器差异导致错位
表格里放 pre 时缩进失效？不是标签问题，是 CSS 覆盖了
直接把 pre 塞进 td，缩进常被抹掉——不是你写错了，是表格单元格默认 white-space: normal 覆盖了 pre 的行为。
- 给
pre加内联样式：style="white-space: pre-wrap; font-family: monospace;" - 或统一给表格设：
td { white-space: pre-wrap; font-family: monospace; }—— 但注意这会影响所有单元格文本 - 别用
white-space: pre-line：它会合并空格，只保留换行，不适合代码 - 务必检查开发者工具里
pre元素计算后的white-space值是否仍是pre或pre-wrap
真正难的不是写对 pre，而是确保从后端响应、JS 解析、DOM 插入到最终 CSS 渲染，每个环节都没吃掉那个关键的
或空格。一旦中间某步用了 innerText、模板引擎自动转义、或没指定等宽字体，格式就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
