code标签仅用于语义声明段落内单行代码标识，不负责样式；多行代码须用嵌套，ui文字禁用；需转义html字符，推荐显式设置等宽字体栈及inline-block对齐。

code 标签不是容器，它只负责语义声明——告诉浏览器“这段是代码”，不负责换行、缩进、高亮或样式控制。用错地方，轻则格式塌陷，重则 DOM 破损。

什么时候必须用 code，而不是 pre 或纯文本

判断标准只有一个：是否嵌在段落中、是否单行、是否需保持行高一致。

• ✅ 正确场景：fetch()、useState、npm install、/src/api/index.ts —— 这些都是上下文依赖的短标识，应直接用 code 包裹
• ❌ 错误场景：function hello() { return 'hi'; } —— 多行函数体，code 会压成一行，必须改用 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 嵌套</pre>
• ❌ 错误场景：点击【提交】按钮 —— UI 文字不是源代码，用 button 或普通文本更合适

code 的合法属性与实用技巧

code 支持所有全局属性，但真正常用且安全的只有三个：class、id、title。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• class：用于 CSS 控制字体、背景、内边距等，例如 class="js" 可被 Prism.js 识别语言
• id：方便锚点跳转或 JS 操作，如 id="error-handler"
• title：鼠标悬停提示，适合解释缩写或非常规命名，如 title="AbortSignal 实例"
• ⚠️ 避免用 style 内联样式——它难复用、难维护，且易与主题冲突

HTML 字符转义是硬性要求，漏掉就解析失败

只要 code 内容含 、<code>>、&，就必须转义，否则浏览器会尝试解析为标签，导致内容消失或结构错乱。

• 写 x 0，而不是 x 0
• 写 <div class="app">，而不是 <code><div class="app"> <li>工具建议：VS Code 插件 “Auto Rename Tag” 不管用，得靠手动或预处理脚本（如 remark-<a style="color:#f60; text-decoration:underline;" title="html" href="https://m.php.cn/zt/15763.html" target="_blank">html</a>）自动转义</li> <h3>样式控制的关键点：别依赖默认，但别过度干预</h3> <p>浏览器默认给 <code>code 设了 font-family: monospace，但这不够稳定。实际部署时需显式声明：
  • 推荐字体栈：font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace
  • 必须加 display: inline-block 或 vertical-align: middle，否则和周围文字基线不对齐
  • 禁用 white-space: pre —— 它会让长命令溢出容器，且破坏行内流布局
  • 背景色和圆角可加，但内边距建议 ≤ 4px，避免撑开段落行高

  最容易被忽略的是边界感：有人把整段 Shell 脚本塞进 code，有人把 console.log() 单独包一层 pre。记住，code 的职责从来不是“看起来像代码块”，而是“这里是代码”。语义对了，样式才不会翻车。