是行内元素，浏览器会折叠空白符，导致缩进消失、换行塌陷；必须嵌套在中以保留格式并确保语义、SEO和可访问性。

为什么单用

 会导致缩进消失、换行塌陷</H3>
<p><code> 是行内元素，浏览器会像处理普通文字一样折叠所有空白符——多个空格变一个，换行当空格，制表符被忽略。哪怕你写成：</p>
<pre class='brush:php;toolbar:false;'>function foo() {
  return "hello";
}

实际渲染出来就是 function foo() { return "hello"; }，缩进和换行全没了。

• 只适合包裹单个标识符，比如 console.log、useState、JSON.parse
• 不能承载多行逻辑，哪怕只有两行带缩进的代码，也必须配合

• 默认样式只是等宽字体，不带背景、边框或内边距，需手动加 CSS 才像“代码块”

为什么必须用

<pre class="brush:php;toolbar:false;"> 嵌套，而不是反过来或单独用 <pre class="brush:php;toolbar:false;"></H3>
<p><pre class="brush:php;toolbar:false;"> 负责保留格式（空格、换行、缩进），但它本身没有语义——屏幕阅读器读不出“这是代码”，搜索引擎也难识别内容类型。W3C 明确推荐 <pre class="brush:php;toolbar:false;"><code> 嵌套结构，而非仅用 <pre class="brush:php;toolbar:false;"> 或 <code><pre class="brush:php;toolbar:false;">。</p>
<ul>
<li>顺序不能错：<pre class="brush:php;toolbar:false;"> 是块级容器，<code> 必须嵌在里面，否则 <code> 的语义无法生效</li>
<li>单独用 <pre class="brush:php;toolbar:false;"> 会保留格式，但 SEO 和可访问性弱，且某些高亮库（如 Prism.js）依赖 <code> 上的 <code>language-js

类来触发解析

标签紧贴 <pre class="brush:php;toolbar:false;"> 开闭标签写，别留换行：写成 &lt;pre class='brush:js;toolbar:false;'&gt;...</pre>，不是 <pre class="brush:php;toolbar:false;">\n&lt;code&gt;...\n&lt;/code&gt;\n</pre>

HTML 中写代码时，哪些字符必须转义

如果你把真实 HTML 片段（比如含 <div>）直接塞进 <pre class="brush:php;toolbar:false;">&lt;code&gt; 里，浏览器会把它当标签解析，导致结构错乱甚至脚本执行。必须对 &lt;code&gt;&lt;&lt;/code&gt;、&lt;code&gt;&gt;&lt;/code&gt;、&lt;code&gt;&amp;&lt;/code&gt; 做 HTML 实体转义。&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/skill9972&quot; title=&quot;Wechat Article Html&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg&quot; alt=&quot;Wechat Article Html&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill9972&quot; title=&quot;Wechat Article Html&quot;&gt;Wechat Article Html&lt;/a&gt; &lt;p&gt;将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求&quot;转成微信格式&quot;、&quot;生成公众号文章 HTML&quot;、&quot;排版到微信草稿箱&quot;、&quot;微信粘贴格式&quot;时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill9972&quot; title=&quot;Wechat Article 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;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;ul&gt; &lt;li&gt;&lt;code&gt;&lt;&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;li&gt;常见错误：复制一段 React JSX 到 &lt;code&gt; 标签里，忘了转义 &lt;code&gt;&lt;Component /&gt;&lt;/code&gt;，结果页面直接渲染出空组件或报错&lt;/li&gt; &lt;li&gt;服务端渲染时建议用 &lt;code&gt;textContent&lt;/code&gt; 插入或模板引擎自动转义；前端 JS 动态插入可用 &lt;code&gt;document.createTextNode()&lt;/code&gt; 避免风险&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;长代码行溢出、复制体验差，怎么快速修&lt;/H3&gt; &lt;p&gt;没加样式控制的 &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt; 容易撑破容器，尤其 JSON 或日志类宽文本。用户想复制还常误选到行号或空格。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;加 &lt;code&gt;overflow-x: auto</pre> 和 <code>white-space: pre（不要用 pre-wrap，它会破坏缩进对齐）

用 tab-size: 4 统一制表符宽度，避免不同编辑器缩进不一致

复制功能别手写：用 navigator.clipboard.writeText() + 按钮绑定，注意权限提示

行号是锦上添花，但若用 JS 动态生成，记得在 textContent 渲染后再加，否则空行或首尾换行会错位

最常被跳过的细节是：嵌套结构中 的 class 名（如 <code>language-py）必须写在 上，不是 <pre class="brush:php;toolbar:false;"> 上；高亮库靠这个识别语言。漏了就只能灰底白字，语法零高亮。</pre>