必须用嵌套展示多行代码，因是行内元素会压缩换行与空格，单独使用则缺失代码语义且影响高亮与无障碍；嵌套时需转义html特殊字符，css须重置样式、设等宽字体并处理缩进问题。
多行代码必须用 <pre class="brush:php;toolbar:false;"><code></code> 嵌套，单行代码才用 <code><code></code> —— 混用、漏嵌或顺序颠倒，轻则缩进塌陷、复制失效，重则高亮不触发、屏幕阅读器误读。</code></pre>
为什么<code>单独放多行代码会塌成一行
<code> 是行内元素，浏览器默认把换行符、制表符、连续空格全压缩成一个空格。哪怕你写的是带 4 层缩进的 Python 函数，最终渲染出来就是一整行，括号错位、逻辑难辨。
- 常见错误现象：
function foo() {\n return true;\n}渲染后变成function foo() { return true; } - 复制到编辑器里也是平的，没法直接运行
- 屏幕阅读器读作普通文字，不会提示“这是一段 JavaScript 代码”
- 语法高亮库（如
Prism.js）通常忽略没嵌在<pre class="brush:php;toolbar:false;"></pre>里的<code>
为什么<pre class="brush:php;toolbar:false;"></pre>单独用会丢失“这是代码”的语义
<pre class="brush:php;toolbar:false;"></pre> 确实保留空格和换行，但它只说自己是“预格式化文本”，不声明内容类型。搜索引擎可能当普通段落索引，屏幕阅读器读作“一段对齐文字”，而不是“JavaScript 函数”。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 语法高亮库（如
highlight.js）默认不扫描纯<pre class="brush:php;toolbar:false;"></pre>，直接跳过 - CSS 写
pre { background: #f0f0f0; }，结果把日志、ASCII 图、诗歌全染了色 - 无障碍工具无法区分代码和普通文本，影响可访问性评分
<pre class="brush:php;toolbar:false;"><code></code> 嵌套时 HTML 特殊字符必须转义</pre>
只要原始代码含 、<code>>、&，就必须实体化，否则浏览器会在解析阶段就把它当标签执行，不是“展示代码”，而是“运行代码”。
- 例如：
<div id="app"></div>直接塞进<code>，<div> 会被解析，后续内容错位甚至整个 <code><pre class="brush:php;toolbar:false;"><code></code> 提前闭合 </pre> <li>服务端渲染建议统一调用 <code>htmlspecialchars()或等效函数 - 前端动态插入时优先用
textContent，别用innerHTML - 必须重置默认
margin/padding，加上overflow-x: auto防止长行溢出 -
pre code { display: block; }—— 不加这句，<code>仍按行内处理，横向滚动可能失效 - 字体必须设为等宽：
font-family: ui-monospace, 'SFMono-Regular', monospace;，别依赖浏览器默认
CSS 控制代码块最容易被忽略的三件事
不显式设置样式，代码块在不同设备上可能完全不可见或难以区分。
最易被忽略的是：HTML 源码中 <pre class="brush:php;toolbar:false;"></pre> 标签本身的缩进也会被渲染——如果模板里把 <pre class="brush:php;toolbar:false;"></pre> 写在缩进后，首行就会多出几个空格。要么让标签从行首开始，要么用注释消除：<!--<pre class="brush:php;toolbar:false;"><code class="js">-->
