应使用 <code> 标签包裹单行代码片段，如函数名、变量或简短表达式；多行代码须用 <pre><code> 嵌套组合，并转义 HTML 特殊字符；避免手动高亮，推荐 Prism.js 等库处理语法着色。
用 标签包裹单行代码片段</H3>
<p>当只展示一个函数名、变量或简短表达式时，<code> 标签是最轻量且语义正确的选择。它默认是行内元素，不会换行，也不会保留空格和缩进。</p>
<p>常见错误是把多行代码硬塞进 <code>：比如写 <code>function foo() {\n return true;\n} —— 换行符会被浏览器忽略，显示成一行且缺少缩进，可读性差。
正确做法只用于真正“单行”的上下文：
- 文档中提到了
console.log()，需要突出这个函数名 - 说明某个配置项如
maxRetries的默认值 - 在段落里引用命令如
npm install --save-dev eslint
用 嵌套组合展示多行可读代码</H3>
<p><pre class="brush:php;toolbar:false;"> 保留原始换行与空格，<pre class="brush:php;toolbar:false;"> 提供语义标记——两者嵌套才是展示完整代码块的标准写法。单独用 <pre class="brush:php;toolbar:false;"> 缺少语义，单独用 <code> 无法维持格式。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>注意点：</p>
<ul>
<li>必须是 <pre class="brush:php;toolbar:false;"><code>…
，顺序不能反；pre 是块级容器，<pre class="brush:php;toolbar:false;"> 是其子元素</li>
<li>HTML 特殊字符（如 <、>、&）必须转义，否则会被解析为标签：写 <code><div></pre> 而不是 <code><div>
<li>如果从代码文件直接复制粘贴，建议先用工具转义（例如在线 HTML 实体编码器），或手动替换 <、> → <code>>、& → &
示例：
function greet(name) {
if (!name) {
return 'Hello, world!';
}
return `Hello, ${name}!`;
}
避免用 或 <pre class="brush:php;toolbar:false;"> 模拟代码高亮</H3>
<p>原生 HTML 不支持语法着色。<code> 和 <pre class="brush:php;toolbar:false;"> 只负责结构和格式，不处理颜色、关键字加粗等。强行用 <font color="blue">if</font> 这类方式拼凑高亮，会带来三个问题：</p>
<ul>
<li>维护成本高：每次改代码都要同步改一堆 <font> 标签</li>
<li>可访问性差：屏幕阅读器无法识别语义，颜色对色弱用户不可见</li>
<li>响应式失效：内联样式难以适配不同字体或深色模式</li>
</ul>
<p>真实项目中，应交给专门的高亮库（如 Prism.js 或 Highlight.js）处理，它们通过 JS 自动分析并注入 class，再配合 CSS 控制样式。手写 <font> 是退化方案，仅限极简静态页且无维护要求时临时应付。</p>
<H3>注意 <code> 标签在不同上下文中的渲染差异</H3>
<p><code> 默认使用等宽字体（如 <code>monospace
），但具体字体族取决于浏览器和系统设置。如果你发现代码显示歪斜或字符宽度不一致，可能是因为父容器设置了 font-family 覆盖了默认值。
安全做法是显式重置：
code,
pre code {
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}
这段 CSS 能覆盖多数现代系统，同时兼容 macOS、Windows 和 Linux 的默认等宽字体。别漏掉 pre code 这个组合选择器——否则
<pre class="brush:php;toolbar:false;"> 块里的字体可能被 <pre class="brush:php;toolbar:false;"> 的样式干扰。</p> <p>另外，<code> 不会自动换行，长代码行可能撑破容器。加 <code>white-space: pre-wrap或
word-break: break-all 是常见补救，但会破坏代码可读性，优先考虑限制容器宽度或启用水平滚动。
