code标签用于内联标记技术性名词、配置项、命令或接口字段，确保可读性与语义准确；需手动转义HTML字符，显式声明等宽字体及适配深色模式，并避免破坏换行逻辑。
code 标签在项目管理文档里不是用来“贴代码块”的，而是精准标记文档中出现的技术性名词、配置项、命令或接口字段——它解决的是“读者能不能一眼分清这是代码还是普通文字”这个实际问题。
什么时候该用 code 而不是 </H3>
<p>项目管理文档里大量出现的是上下文嵌入式技术词，比如：</p>
<ul>
<li>环境变量名：<code>NODE_ENV</code>、<code>CI_PIPELINE_ID</code></li>
<li>配置文件字段：<code>timeout_minutes</code>、<code>retry_on_failure</code></li>
<li>CLI 命令片段：<code>npm run build</code>、<code>git checkout -b feat/login</code></li>
<li>API 路径段：<code>/v2/projects/{id}/tasks</code></li>
<li>工具名称（带版本）：<code>eslint@8.56.0</code></li>
</ul>
<p>这些都该用单个 <code>code</code> 包裹，而不是套 <pre class="brush:php;toolbar:false;">。因为它们是句子的一部分，要内联、要换行、要随段落流式排版。一旦用了 <pre class="brush:php;toolbar:false;">，就会强制独占一行、破坏阅读节奏，还可能撑破容器宽度。</p>
<H3>为什么直接写 <code><env></code> 会出错</H3>
<p>项目文档常要展示 XML/HTML 片段、YAML 键名或带尖括号的模板语法，但 <code>code</code> 不做 HTML 解析逃逸——你写：</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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill6712" title="Wechat HTML Publisher">Wechat HTML Publisher</a>
<p>直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"><task status="pending">Review PR</task>
浏览器会尝试解析 <task> 为真实标签，导致内容消失或 DOM 错乱。正确做法是手动转义：
-
<→ -
>→> -
&→&
所以最终得写成：
<task status="pending">Review PR</task>
漏掉任意一个，渲染就不可靠。自动化构建流程里建议用 Markdown 渲染器（如 remark）或预处理器（如 Nunjucks）自动转义，别靠手。
样式和可访问性不能只靠默认值
浏览器虽默认给 code 加等宽字体，但实际项目文档里常遇到三类问题：
- Windows 上默认用 Courier New，字形发虚；macOS/iOS 默认 SF Mono 或 Menlo，更清晰——建议显式声明：
font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; - 深色背景文档里，
code默认黑底白字，对比度不足；需配合主题重设color和background-color - 屏幕阅读器会读
code内容时加“代码”前缀（如“代码：npm run build”），所以里面别塞冗余符号，例如✅ npm run build的 ✅ 会被朗读成“白色复选标记 npm run build”，干扰理解
真正容易被忽略的，是把 code 当作“高亮容器”来用：加背景色、设圆角、加边框……这些操作本身没问题，但一旦没同步处理 white-space: pre-wrap 或 word-break: break-all，长命令（比如带一堆 query 参数的 curl）就会在单词中间硬折行，语义全毁。
