标签本身有效，问题在于内容中的换行符未被正确传递或解析；必须确保字符串含真实 、用textcontent注入、并设置white-space:pre和monospace字体。
直接说结论：<pre class="brush:php;toolbar:false;"></pre> 标签本身有效，但空格和换行“没显示”，90% 的问题出在内容没真正到达它——不是标签失效，而是换行符被吃掉了、转义了、或压根没存进字符串里。
为什么 <pre class="brush:php;toolbar:false;"></pre> 里还是变成一行？
浏览器对 <pre class="brush:php;toolbar:false;"></pre> 的处理很老实：只保留你给它的**真实空白字符**。如果字符串里是字面量
（两个字符：反斜杠 + n），而不是真正的换行符
，那它就原样输出
，不会换行。
- 后端返回 JSON 字符串时，
"line1 line2"经过 JSJSON.parse()后才是带真实
的字符串；若没解析或双重转义（如"line1\nline2"）， - 用
innerHTML赋值时，写el.innerHTML = "<pre class="brush:php;toolbar:false;">line1 line2</pre>"，JS 字符串里的 - 静态写 HTML 时，别手动敲多行再塞进
<pre class="brush:php;toolbar:false;"></pre>：HTML 解析器会把源码换行归一化，导致缩进丢失
怎样让 <pre class="brush:php;toolbar:false;"></pre> 真正起作用？
三件事必须同时做，缺一不可：
- 内容注入必须用
textContent（不是innerHTML）：例如el.textContent = apiResponse，绕过 HTML 解析，确保
不被当标签处理 - CSS 必须显式设置：
white-space: pre（禁用空白折叠） +font-family: monospace（等宽字体，否则缩进错位） - 避免父级样式覆盖：检查 computed styles，确认
white-space最终值是pre，不是被 reset.css 或组件库设成了normal
用 <pre class="brush:php;toolbar:false;"></pre> 显示代码时的常见坑
缩进塌陷、横向溢出、HTML 符号乱解析，都不是 <pre class="brush:php;toolbar:false;"></pre> 的错，而是没补全上下文：
- 制表符
tab-size: 4统一（Safari 需加-moz-tab-size兼容） - 长代码不折行？
white-space: pre就是设计为不折行。要滚动，父容器加overflow-x: auto+max-width；要折行，改用white-space: pre-wrap（但会破坏严格列对齐） - 里面含
<div> 或 <code><script></script>？浏览器会真去解析。必须提前转义：→ <code><，>→>，或改用<pre class="brush:php;toolbar:false;"><code>...</code></pre>嵌套结构真正难的不是加个
<pre class="brush:php;toolbar:false;"></pre>标签，而是从 API 响应、JS 字符串构造、DOM 插入到 CSS 渲染，全程守住那个真实的
和空格不被任何环节吞掉或误解——中间断一环，格式就废了。
