pre标签空格换行未显示的根本原因不是标签失效，而是内容在到达pre前已被模板转义、html解析或压缩移除；需用textcontent注入、显式设置white-space、避免模板转义并统一缩进方式。
为什么 <pre class="brush:php;toolbar:false;"></pre> 里的空格和换行没显示出来
常见原因是 HTML 渲染时忽略了原始空白符，哪怕用了 <pre class="brush:php;toolbar:false;"></pre>，如果内容是动态插入或经过 JS 处理（比如 innerHTML 赋值、模板引擎渲染），空格可能被浏览器自动压缩，或者字符串里实际没存换行符
，而是被转义成 \n 字面量。
<pre class="brush:php;toolbar:false;"></pre> 正确用法与内容来源要求
<pre class="brush:php;toolbar:false;"></pre> 只对真实存在的空白字符起作用：必须是原生的
（换行）、 （制表符）、多个连续空格。它不“修复”被 HTML 解析器吃掉的空白。
- 静态写死在 HTML 中时，直接换行即可：
<pre class="brush:php;toolbar:false;">第一行 第二行（前面两个空格） 第三行
- JS 动态设置时，确保字符串含真实
el.innerHTML = "<pre class="brush:php;toolbar:false;">line1\n line2\nline3</pre>"；注意双反斜杠——JS 字符串字面量中写 - 避免用
textContent往<pre class="brush:php;toolbar:false;"></pre>里塞内容，它会把innerText或更稳妥的textContent+white-space: preCSS 方案
替代方案：当 <pre class="brush:php;toolbar:false;"></pre> 不可控时怎么办
比如内容来自富文本编辑器、日志 API 返回纯字符串、或 SSR 模板里无法保留缩进，这时靠纯 HTML 标签不够稳定。
- 加 CSS 强制保留空白：
<div style="white-space: pre; font-family: monospace;">...</div>，效果等同<pre class="brush:php;toolbar:false;"></pre>，且兼容性更好（支持 IE9+） - 预处理字符串：用正则把用户输入中的
\n替换成<pre class="brush:php;toolbar:false;"></pre>；注意别重复替换，否则\\n会变\n - 服务端输出前做转义控制：Node.js 用
res.send()直接吐带
容易被忽略的细节
Chrome 开发者工具 Elements 面板里看到的换行，不等于渲染出来的换行——那是 HTML 结构视图，实际渲染取决于字符串内容和 CSS 白空间行为。最保险的方式是：在控制台打印 el.innerText，看是否真包含
；再检查 computed styles 里 white-space 是否为 pre 或 pre-wrap。CSS 优先级、父元素 font-family 缺失（导致等宽失效）、甚至 `` 套 `<pre class="brush:php;toolbar:false;">` 的嵌套顺序，都可能让格式“看起来没生效”。</pre>
