必须嵌套使用标签，且需转义HTML特殊字符、正确设置language-xxx类名、统一用空格缩进并添加overflow-x: auto。

为什么只用

 标签显示多行代码会乱成一团</H3>
<p><code>code

是行内元素，浏览器会忽略它里面的换行符和多余空格，所有内容强行压成一行。比如写成 <pre class="brush:php;toolbar:false;">&lt;code&gt;function a() {\n return 1;\n}&lt;/code&gt;</pre>，若只套 code 不套 pre，结果就是 function a() { return 1; } ——缩进没了、换行没了、语义也弱了。

常见错误现象：

• 代码块挤在一行，根本没法读
• 复制时丢失缩进，粘贴到编辑器里全是平的
• 屏幕阅读器无法识别这是“一段完整代码”，只当普通文字朗读

正确做法是必须嵌套：<pre class="brush:php;toolbar:false;">&lt;code&gt;...&lt;/code&gt;</pre>。pre 负责保留格式，code 负责声明语义——两者缺一不可。

HTML 特殊字符（、&）不转义会导致页面结构崩溃

直接把含 <div> 的 HTML 代码塞进 <code><pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 里，浏览器会真把它当标签解析：轻则 &lt;code&gt;&lt;div&gt; 被吃掉、后续内容错位；重则整个 &lt;code&gt;pre&lt;/code&gt; 块提前闭合，后面 DOM 全乱。&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt; &lt;p&gt;必须手动转义以下字符：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt; → &lt;code&gt;<&lt;/code&gt;&lt;/code&gt;&lt;/li&gt; &lt;li&gt; &lt;code&gt;&gt;&lt;/code&gt; → &lt;code&gt;>&lt;/code&gt; &lt;/li&gt; &lt;li&gt; &lt;code&gt;&amp;&lt;/code&gt; → &lt;code&gt;&amp;&lt;/code&gt; &lt;/li&gt; &lt;/ul&gt; &lt;p&gt;别指望 CSS 或 JS 补救——这是 HTML 解析阶段就发生的破坏，转义必须在插入前完成。服务端输出可统一做 HTML 实体编码；前端动态渲染建议用 &lt;code&gt;textContent&lt;/code&gt; 而非 &lt;code&gt;innerHTML&lt;/code&gt; 插入原始字符串。&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill11445&quot; title=&quot;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg&quot; alt=&quot;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill11445&quot; title=&quot;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&quot;&gt;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&lt;/a&gt; &lt;p&gt;使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill11445&quot; title=&quot;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;h3&gt;语法高亮不起作用？大概率是 class 名写错了&lt;/h3&gt; &lt;p&gt;highlight.js 或 Prism.js 这类库不会自动猜语言。它们只认特定命名格式的 &lt;code&gt;class&lt;/code&gt; 或 &lt;code&gt;language-xxx&lt;/code&gt; 属性。&lt;/p&gt; &lt;p&gt;典型错误写法：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;&lt;code class=&quot;js&quot;&gt;&lt;/code&gt; —— 太模糊，可能被其他样式覆盖，且 highlight.js 默认不识别&lt;/code&gt;&lt;/li&gt; &lt;li&gt;&lt;code&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;/code&gt; —— 多数库默认不读 &lt;code&gt;data-lang&lt;/code&gt;&lt;/code&gt;&lt;/li&gt; &lt;li&gt;&lt;code&gt;&lt;code class=&quot;javascript&quot;&gt;&lt;/code&gt; —— Prism 要求是 &lt;code&gt;language-javascript&lt;/code&gt;，highlight.js 接受但更推荐标准前缀&lt;/code&gt;&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;推荐写法（兼容主流库）：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;&lt;code class=&quot;javascript&quot;&gt;&lt;/code&gt;&lt;/code&gt;&lt;/li&gt; &lt;li&gt;&lt;code&gt;&lt;code class=&quot;python&quot;&gt;&lt;/code&gt;&lt;/code&gt;&lt;/li&gt; &lt;li&gt;&lt;code&gt;&lt;code class=&quot;html&quot;&gt;&lt;/code&gt;&lt;/code&gt;&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;别漏掉 &lt;code&gt;highlight.js&lt;/code&gt; 的初始化调用：&lt;code&gt;hljs.highlightAll()&lt;/code&gt; 必须在 DOM 加载完、且脚本已加载后执行，通常放在 &lt;code&gt;&lt;/code&gt;&lt;/p&gt; &lt;/div&gt;&lt;/code&gt;</pre>