应使用 标签而非 标签标记行内函数、变量或命令，如 fetch()，以确保等宽渲染、不破坏段落流且语义正确。
单行代码必须用 ，别套 <pre class="brush:php;toolbar:false;">
在段落中提函数、变量或命令时， 是唯一语义正确的选择。比如写“调用 <code>fetch() 时需传入 <code>AbortSignal”，浏览器会以等宽字体渲染，且不撑开上下行距、不破坏段落流。
-
fetch()✅ 正确：行内、语义清晰、屏幕阅读器读作“fetch 函数” -
fetch()
❌ 错误：是块级元素，自带 margin，塞进段落会视觉断裂
- 漏转义
或 <code>>（如写x ）→ 浏览器解析失败，后续 HTML 结构错乱 - 别给
加 <code>white-space: pre：长命令会横向溢出，且基线对不齐
多行代码必须用 组合，缺一不可
函数体、配置片段、命令输出这类内容，只用
会塌成一行，缩进全丢；只用 <pre class="brush:php;toolbar:false;"> 则失去“这是代码”的语义，高亮库（如 Prism.js）无法识别语言，SEO 和读屏器也难理解。
- 正确结构：
<code>function hello() { console.log('hi'); }</code>——保格式，<code> 定语义</code>
- 错误写法：
function hello() { console.log('hi'); } → 渲染为单行，无缩进 - 错误写法：
function hello() { console.log('hi'); }→ 搜索引擎当普通预格式文本，不索引为代码 - HTML 特殊字符必须手动转义：
、<code>>、&，哪怕只是写个比较表达式
嵌套 时要小心转义和字体继承
标签本身不解析 HTML，所有尖括号、引号、与符号都得手动转义，否则会被浏览器当作标签或实体处理。同时，它默认不继承父级等宽字体，容易混用系统字体。
- 想展示 ，必须写成
<div class="box"> <li>建议在 CSS 中显式设置：<code>font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;- 避免用
style="font-family: Arial"这类非等宽字体，会破坏代码可读性不支持语法高亮，颜色、关键字加粗等必须靠 Prism.js / highlight.js 注入 class 后再配 CSS
别把
当样式容器用很多人给
加 background、border 或 padding，指望它自动变成“代码块”。但问题在于：<code> 是行内元素，不会阻止文字折行，长命令可能在单词中间断开；也没有默认等宽字体保障；更无法区分字符串、注释等语法成分。- 需要背景色/圆角/内边距？用 class 包裹后统一控制，例如
npm install - 需要响应式换行？用
word-break: break-all要谨慎——它会在任意字符处断行，影响可读性 - 真正需要块级交互（如复制按钮、行号）？应基于
<pre class="brush:php;toolbar:false;"> 构建，而非强行拉伸 <code></code>
就能让整段 HTML 后续内容消失，而没设 font-family 的 <code> 在某些系统上会渲染成宋体，一眼看不出来是代码。 - 避免用
