标签无法实现多行代码展示，因其为行内元素，会压缩换行符和空格；必须嵌套在中，并转义html特殊字符，配合white-space: pre-wrap等css属性才能正确渲染。
标签本身不能实现多行代码展示。
它是个行内元素，浏览器会把所有换行符、制表符、连续空格压缩成单个空格。哪怕你写三行带缩进的 JS，最终渲染出来就是 `function foo() { return true; }` 这样挤在一起的一行，语义和格式全崩。
必须用 <pre class="brush:php;toolbar:false;"> 嵌套组合，这是唯一可靠方案。
<h3>为什么单独用 <code> 渲染多行代码会失败</code>
</h3>
<p><code> 标签只负责语义（“这是一段代码”）和默认等宽字体，不处理排版。常见错误现象包括：</code></p>
- 缩进塌陷，Python 或 JSON 直接不可读
- 大括号错位，JS 函数结构丢失
- 屏幕阅读器读作普通文字，不提示代码上下文
- Prism.js / highlight.js 等高亮库完全忽略，因为它们依赖
作为入口，但前提是它被包裹在 <pre class="brush:php;toolbar:false;"> 中</pre>
<code> 组合里哪些字符必须转义</code>
所有 HTML 特殊字符在 内容中都得手动实体化，否则浏览器会在解析阶段就执行，不是展示，而是运行：
必须写成 <code>-
>必须写成> -
&必须写成&
比如 <div id="app"></div>，如果漏掉转义，页面可能直接渲染出一个 div 节点，甚至触发 XSS（如含 <script></script>）。
如何让长代码不溢出又保持可读性
仅靠
<pre class="brush:php;toolbar:false;"> 不够，CSS 控制很关键。三个必设属性：
white-space: pre-wrap：保留换行和空格，同时允许长行自动换行（比 <code>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 后更容易针对性控制
- 搜索引擎和辅助工具通过 class 辨别代码类型，提升 SEO 和可访问性
推荐写法：
<pre class="brush:php;toolbar:false;"><code class="js">function hello() {<br> console.log('hi');<br>}</code>
容易被忽略的是：复制粘贴进 HTML 时，必须确保是纯文本——IDE 复制常带富文本格式或隐藏 Unicode 字符，会导致换行符变成 \r\n 或全角空格，渲染异常。最稳妥的做法是先粘到记事本再中转，或用 textContent 动态插入。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
