<code>标签无法实现多行代码展示，因其为行内元素，会压缩换行符和空格；必须嵌套在<pre>中，并转义HTML特殊字符，配合white-space: pre-wrap等CSS属性才能正确渲染。
标签本身不能实现多行代码展示。
它是个行内元素，浏览器会把所有换行符、制表符、连续空格压缩成单个空格。哪怕你写三行带缩进的 JS，最终渲染出来就是 `function foo() { return true; }` 这样挤在一起的一行，语义和格式全崩。
必须用 <pre class='brush:php;toolbar:false;'> 嵌套组合，这是唯一可靠方案。
<h3>为什么单独用 <code> 渲染多行代码会失败</h3>
<p><code> 标签只负责语义（“这是一段代码”）和默认等宽字体，不处理排版。常见错误现象包括：</p>
<ul>
<li>缩进塌陷，Python 或 JSON 直接不可读</li>
<li>大括号错位，JS 函数结构丢失</li>
<li>屏幕阅读器读作普通文字，不提示代码上下文</li>
<li>Prism.js / highlight.js 等高亮库完全忽略，因为它们依赖 <code> 作为入口，但前提是它被包裹在 <pre class="brush:php;toolbar:false;"> 中</li>
</ul>
<h3><pre class="brush:php;toolbar:false;"><code> 组合里哪些字符必须转义</h3>
<p>所有 HTML 特殊字符在 <code> 内容中都得手动实体化，否则浏览器会在解析阶段就执行，不是展示，而是运行：</p>
<ul>
<li><code>< 必须写成 <
> 必须写成 >
& 必须写成 &
比如 <div id="app"></div>，如果漏掉转义，页面可能直接渲染出一个 div 节点，甚至触发 XSS（如含 <script>）。
如何让长代码不溢出又保持可读性
仅靠
<pre class="brush:php;toolbar:false;"> 不够，CSS 控制很关键。三个必设属性：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li><code>white-space: pre-wrap：保留换行和空格，同时允许长行自动换行（比
pre 更友好）
overflow-x: auto：长行不折，出现横向滚动条，避免内容被截断tab-size: 4：统一缩进视觉宽度，防止不同编辑器 Tab 渲染不一致示例 CSS：
<pre class="brush:php;toolbar:false;">pre code {
font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
tab-size: 4;
white-space: pre-wrap;
overflow-x: auto;
}
class 属性加不加有影响吗
加。虽然不加也能显示，但会影响实际效果：
- 不加
class="js" 或 <code>class="json"，Prism.js 无法自动识别语言，高亮规则不触发 - 某些 CSS 重置会覆盖
默认字体，导致非等宽；而 <pre class="brush:php;toolbar:false;"> 的默认样式更稳定，加 class 后更容易针对性控制</li> <li>搜索引擎和辅助工具通过 class 辨别代码类型，提升 SEO 和可访问性</li> </ul> <p>推荐写法：<pre class='brush:php;toolbar:false;'><pre><code class="js">function hello() {<br> console.log('hi');<br>}</code></pre>容易被忽略的是：复制粘贴进 HTML 时，必须确保是纯文本——IDE 复制常带富文本格式或隐藏 Unicode 字符，会导致换行符变成 \r\n 或全角空格，渲染异常。最稳妥的做法是先粘到记事本再中转，或用textContent 动态插入。
