code标签需显式添加背景色、边框、内边距、行高和对齐样式以提升辨识度；须与kbd语义分离，路径参数应分粒度包裹；单行用code，多行代码块必须嵌套在pre中。

code 标签默认样式太弱，直接用会丢失语义辨识度

code 标签本身只设置 font-family: monospace，在多数现代 CSS 框架（如 Tailwind、Bootstrap）或重置样式（normalize.css）下，它和普通文本几乎无视觉差异。用户快速扫读时根本注意不到这是可执行代码片段，更难区分变量名、命令、路径等不同角色。

必须显式补充以下基础样式才能起作用：

• 加背景色：background-color: #f5f5f5（浅灰底是通用安全选择）
• 加边框与圆角：border: 1px solid #ddd; border-radius: 3px
• 设内边距：padding: 0.1em 0.4em（比固定像素更适配字号缩放）
• 控制行高与对齐：line-height: 1.3; vertical-align: middle，避免和周围文字错位

嵌套 code 与 kbd 时，语义不能混用

技术文档中常出现「运行 npm run build，然后按 Ctrl + C 终止」这类混合内容。这里 npm run build 是命令行指令，必须用 code；而 Ctrl 是物理按键动作，必须用 ，两者不可互换，也不能包裹进同一个

 标签里。</p>
<p>常见错误写法：<code><code>Ctrl+C</code>

→ 屏幕阅读器读作 “C T R plus C”，不是按键组合；<code><kbd>Ctrl</kbd> + <kbd>C</kbd></code> → 嵌套违反语义，且部分浏览器渲染异常。

立即学习“前端免费学习笔记（深入）”；

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

正确结构示例：

<p>运行命令：<code>npm run build</code&gt；过程中按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 终止。</p>

路径、参数、环境变量要分粒度包裹，避免一整段塞进一个

</H3>
<p>比如 <code>/usr/local/bin/node_modules/.bin/eslint --ext .js,.ts src/

这类长命令，若全塞进单个 标签，既不利于样式微调（如高亮 <code>--ext 参数），也不方便响应式折行或复制操作。

推荐按语义切分：

• 可执行路径：/usr/local/bin/node_modules/.bin/eslint
• 标志参数：--ext（可单独加 class="flag" 高亮）
• 值部分：.js,.ts 和 src/（便于后续 JS 控制复制逻辑）

这样写不仅利于维护，还能配合 CSS 实现 hover 复制、点击展开说明等交互。

在单页文档中，

 标签需配合预格式化容器 <pre class="brush:php;toolbar:false;"> 使用，但别滥用</H3>
<p><code>code

是行内标签，适合短片段；多行代码块必须包裹在 pre 内，否则换行符和缩进会被浏览器忽略。但注意：pre 默认字体偏大、行高松散，直接套用易破坏段落节奏。

实用建议：

• 单行命令、文件名、变量名 → 只用 code，不套 pre
• 2 行以上、含缩进的代码块 → 必须用 <pre><code>...</code></pre>
• 所有 pre 应统一加 overflow-x: auto 和 max-width，防止宽代码撑破窄屏
• 别给 pre 加 white-space: pre-wrap 以外的空格处理——它会让代码意外折行或吞空格

真正容易被忽略的是：很多团队把所有代码都丢进 pre，结果导致文档中段落间距失控、响应式断点失效、甚至影响 SEO 文本密度判断。粒度控制，才是单页技术文档排版的隐性门槛。