应始终嵌套使用 展示多行代码，其中 用于行内短代码， 单独使用缺乏语义；需转义 HTML 特殊字符、统一用空格缩进、配合基础 CSS 保证可读性。

<code> 和 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 是 HTML 中唯二能语义化表达“这是代码”的原生标签，但它们行为完全不同：单独用 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 无法保留换行和缩进，单独用 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 缺少代码语义，容易被屏幕阅读器或搜索引擎误判为普通预格式文本。&lt;/p&gt; &lt;H3&gt;什么时候该用 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 标签&lt;/H3&gt; &lt;p&gt;只用于行内短代码，比如函数名、变量、命令、HTML 属性值这类嵌在句子中的内容。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;浏览器默认用等宽字体渲染，但会忽略所有空白符（空格、制表符、换行）&lt;/li&gt; &lt;li&gt;不能嵌套 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;，也不能在里面写多行逻辑&lt;/li&gt; &lt;li&gt;示例：&lt;code&gt;&lt;p&gt;调用 &lt;code&gt;fetch()&lt;/code&gt; 发起请求&lt;/p&gt;&lt;/code&gt; —— 这样是合法且推荐的&lt;/li&gt; &lt;li&gt;如果硬把多行 JS 塞进 &lt;code&gt;&lt;code&gt;&lt;/code&gt;，缩进全塌，大括号错位，可读性归零&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;为什么 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 单独用不推荐&lt;/H3&gt; &lt;p&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 确实保留空格和换行，但它本身不声明“这是代码”，只是“按原样显示”。对无障碍访问、SEO、样式复用都不友好。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;屏幕阅读器可能读作“预格式化文本”，而非“JavaScript 代码块”&lt;/li&gt; &lt;li&gt;CSS 里想统一给所有代码加背景色，&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 会把诗歌、ASCII 艺术、日志输出也一并染上&lt;/li&gt; &lt;li&gt;没有语义，后续加语法高亮 JS 库（如 highlight.js）通常依赖 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 作为识别入口&lt;/li&gt; &lt;li&gt;正确写法永远是 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt;...&lt;/code&gt;</pre>，而不是只用 <pre class="brush:php;toolbar:false;"></pre>

<pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 嵌套时的三个实操细节</pre>

这个组合是展示多行代码的事实标准，但容易在细节上翻车。

• 缩进必须用空格，别用 Tab —— 某些编辑器或 CMS 会把 Tab 转成 4 或 8 个空格不一致，导致渲染错位
• 如果代码里含 、<code>>、&，必须手动 HTML 实体转义，否则会被浏览器解析为标签：<、>、&
• CSS 中给 <pre class="brush:php;toolbar:false;"></pre> 设 overflow-x: auto，再给 <code> 设 display: block，否则长代码行会撑破容器或被截断
• 不要给 <code> 直接设 white-space: pre —— 它已经继承自 <pre class="brush:php;toolbar:false;"></pre>，重复设置可能干扰样式层叠

不加 CSS 也能让代码可读的最低成本方案

很多人卡在“没配好 highlight.js 就不敢上线”，其实纯 HTML + 原生 CSS 就能跨过第一道门槛。

• 给 <code> 加类 class="js"（语言标识），即使不配高亮，也为后续留了钩子
• 最小样式只需三行：pre { background: #f6f6f6; padding: 1em; border-radius: 4px; }、code { font-family: ui-monospace, 'SFMono-Regular', monospace; }、pre code { display: block; }
• 别用 font-size: 12px —— 小屏设备下几乎不可读，14px 是底线
• 移动端记得加 pre { max-width: 100%; }，否则代码块横向溢出，用户得左右拖拽

真正难的不是嵌套标签，而是每次复制粘贴代码前，下意识检查是否做了 HTML 实体转义、缩进是否统一、<pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 是否漏闭合 —— 这些地方一错，整块代码就变成乱码，且很难一眼定位问题。</pre>