应使用而非包裹单行内嵌代码；需套以确保语义正确和高亮生效；常见错误包括未转义HTML字符、空格缩进无效、响应式失效。

什么时候该用

 而不是 <pre class="brush:php;toolbar:false;">？</H3>
<p>单独一行内嵌代码片段（比如函数名、变量、命令）必须用 <code>，它语义正确、默认不换行、样式轻量。浏览器默认会给 <code> 加等宽字体和浅灰背景，适合穿插在段落中说明：<code>console.log()

、git commit -m、__init__.py。如果误用

 包裹单个词，会强制换行+缩进，破坏行文流，还可能被屏幕阅读器读作“预格式化块”，造成语义错误。</p>

<H3><pre class="brush:php;toolbar:false;"> 里为什么还得套一层 <pre class="brush:php;toolbar:false;">？</H3>
<p>HTML 规范允许但不强制 <pre class="brush:php;toolbar:false;"> 内嵌 <code>，但实际项目中强烈建议套用——因为 <pre class="brush:php;toolbar:false;"> 只保证空格/换行保留，不传达“这是代码”的语义；而 <code> 提供语义 + 默认样式增强。搜索引擎、语法高亮库（如 Prism.js）、辅助工具都依赖这层标记。常见写法是：<pre class='brush:php;toolbar:false;'>def hello():\n    print("world")

。漏掉 标签，Prism 可能无法自动触发 Python 高亮，或者某些 CSS 重置规则会意外抹掉 <pre class="brush:php;toolbar:false;"> 的等宽字体。&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;用 &lt;pre class='brush:php;toolbar:false;'&gt; 时容易踩的三个坑&lt;/H3&gt; &lt;p&gt;&lt;ul&gt; &lt;li&gt;直接把原始代码粘进去没转义 HTML 特殊字符：比如 &lt;code&gt;&lt;div&gt;</pre> 会被浏览器解析为标签而非文本，必须先转义成 <code><div>；服务端渲染需用 escape 函数，静态页面可用在线工具或 VS Code 插件自动转换

用空格缩进却忘了

 默认只认换行符，不认空格语义：4 个空格缩进在 <pre class="brush:php;toolbar:false;"> 中只是 4 个可见字符，不会被识别为“代码块缩进层级”，所以别指望它自动对齐或折叠；真正需要结构化缩进请用 <code>tab-size</code> CSS 属性控制显示宽度</li>
<li>响应式失效：未设 <code>overflow-x: auto</code> 或 <code>white-space: pre-wrap</code>，长代码行会撑破容器；推荐组合写法：<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">...

要不要用第三方高亮库？什么情况下可以不用

纯展示、语言简单（如 HTML/XML/Shell 命令）、且不追求行号/复制按钮时，原生

<code> 足够：加几行 CSS 就能实现基础可读性。但一旦涉及 Python/JS/SQL 等多关键字语言，或需要支持 dark mode、键盘导航、无障碍焦点，就绕不开 Prism.js 或 highlight.js。注意：它们都要求 <pre class="brush:php;toolbar:false;"><code> 结构，且依赖 <code> 标签上的 <code>language-xxx

类名（如 ）来判断语法类型；漏写类名，高亮就失效。