code标签仅语义化标记并默认等宽字体渲染，无语法高亮能力；高亮需CSS/JS库解析并添加token类；多行代码必须嵌套在pre中；命令行内容应使用kbd而非code以保障可访问性。

code 标签本身不提供高亮，它只负责语义化标记和默认等宽字体渲染；真要高亮，得靠 CSS 或 JS 库配合。

为什么 code 标签不自动高亮

它只是个语义标签，浏览器默认只做两件事：用等宽字体显示、保留空格（行内场景下仍受换行影响）。没有语法解析能力，也不识别语言类型。所谓“高亮”，本质是给不同 token（如关键字、字符串、注释）加不同 class 再配色——这一步必须手动或借助工具完成。

• 直接写 <code>const a = 1;</code>，所有字符颜色字体完全一致
• 想让 const 变蓝、1 变橙，就得先有 <code><span class="keyword">const</span> a = <span class="number">1</span></code>
• 手写这种结构不现实，所以实际项目中基本都用 Prism.js、highlight.js 或服务端渲染（如 markdown-it）生成带 class 的 HTML

用 CSS 给 code 加基础样式提升可读性

即使不搞语法高亮，加点视觉区分也能立刻改善体验。关键是别破坏语义，且兼容屏幕阅读器。

• 必须设 font-family 为等宽字体栈，例如 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace
• 加浅灰背景 + 微小内边距，比如 background-color: #f6f8fa; padding: 2px 4px;
• 避免用 border 包裹单个 code —— 容易和周围文本行高冲突，导致基线错位
• 不要设 white-space: pre 在 code 上：它会强制折行失效，反而让长命令溢出容器

多行代码必须套 pre，否则格式全丢

这是最常踩的坑：code 是行内元素，对换行、缩进、多个空格完全无感。哪怕你写成：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

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

function foo() {
  return "hello";
}

浏览器也会把它压成一行显示，除非外层有 pre。

• 正确结构永远是 <pre><code>...</code></pre>，不是 <code><pre>...</pre></code>
• pre 负责保留格式，code 负责声明语义——二者缺一不可
• 如果用了 Prism.js，它会自动在 pre 上加 language-xxx 类，并把内容塞进 code 里，所以你只需写 <pre><code class="js">...</code></pre>
• HTML 特殊字符（<、>、&）必须实体编码，否则会被浏览器当成标签解析掉

混用 kbd 和 code 会导致可访问性问题

有人把命令行指令写成 <code>npm install -D vite</code>，看起来没问题，但对屏幕阅读器来说，它读作“n-p-m space i-n-s-t-a-l-l space dash d space v-i-t-e”，丢失了“这是要你敲的命令”这一层意图。

• 用户输入类内容（终端命令、快捷键组合）该用 kbd，例如 <kbd>npm</kbd> <kbd>install</kbd> <kbd>-D</kbd> <kbd&gt:vite</kbd>
• code 专指源码片段：函数名、变量、配置项值、API 路径等，比如 fetch()、process.env.NODE_ENV、/api/users/:id
• 搜索引擎和辅助技术靠这个区分内容类型，混用会让语义混乱，也影响 SEO 抓取准确性

真正麻烦的从来不是加个 code 标签，而是决定它里面该放什么、外面该包什么、要不要编码、要不要分词、要不要支持复制——每个选择都会影响可维护性和无障碍体验。