<code>标签仅语义化内联代码，不自带高亮、缩进或换行处理；需配合CSS基础样式（如等宽字体、背景色）和框架安全方案（如Vue的v-html、React的react-markdown）才能正确渲染，且必须避免XSS风险。
<code> 标签本身只是语义化标记一段内联代码，不带语法高亮、不自动缩进、不处理换行——它在脚手架文档里起作用的前提，是配合 CSS 和（可选）JS 做基础渲染，而不是靠它自己“写对就能高亮”。
为什么直接写 <code>fetch()</code> 在 Vue/React 项目里常不生效
现代前端框架默认会转义 HTML 字符串：v-text 或 {} 插值中写 <code>console.log</code>，实际渲染出来的是字面量 <code>console.log，根本不会变成标签。必须显式使用 v-html（Vue）或 dangerouslySetInnerHTML（React），但这两者有 XSS 风险，不能无条件放开。
- Vue 文档中应写成：
<code><span class="token function">fetch</span>()</code>，再配.token.function { color: #007acc; } - React 中建议用
react-markdown+remark-highlight.js解析 Markdown 的```js块，而非手动拼<code> - 若硬要用纯 HTML，必须确保内容来自可信源（如脚手架内置的静态文档），且加
class="js"方便后续样式定位
<code> 标签嵌套 <pre> 的必要性与常见错位
<code> 只负责语义，<pre> 才保留空格和换行。单独用 <code>const a = 1<br>const b = 2</code>
- 错误：把换行写成
<br>——<code>不解析 HTML 标签，<br>会被当作文本显示 - 正确：外层包
<pre><code>const a = 1\nconst b = 2</code></pre>，换行用真实 \n（JS 模板字符串或 Markdown 渲染后生成） - 注意：Vite/Hugo 等工具对
.md文件中的```块默认生成<pre><code>，但若手写 HTML，漏掉<pre>就只剩一行
脚手架文档中统一代码块样式的最小配置
不依赖 Prism 或 Highlight.js 也能让 <code> 可读：只需三处 CSS 控制。
立即学习“前端免费学习笔记（深入）”；
code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.875em; background: #f6f8fa; padding: 0.2em 0.4em; border-radius: 6px; }pre code { display: block; padding: 1em; overflow-x: auto; line-height: 1.4; }-
code.language-js { color: #e74c3c; }（按语言加 class，比全局配色更可控）
如果脚手架用的是 VitePress 或 Docusaurus，它们已内置这些规则；自研文档站则必须在全局 CSS 里补全，否则 <code> 在不同页面表现不一致。
CI 流程里检查 <code> 标签是否闭合或误嵌套的实操方式
HTMLHint 默认不校验 <code> 的嵌套合法性（比如 <code><pre>...</pre></code> 是错的），需手动加规则：
- 在
.htmlhintrc中启用"tag-pair": true，它会报<code>未闭合、或<p><code>xxx</p></code>这类非法嵌套 - 但
tag-pair对<template>内的代码块无效（Vue SFC），此时得靠eslint-plugin-vue的vue/multi-word-component-names类规则间接约束 - 真正保险的做法：在文档构建前跑
npx html-validate --config .htmlvalidate.json docs/**/*.html，它比 HTMLHint 更严格识别嵌套层级
别指望一个标签写对就万事大吉——<code> 的可用性取决于它在哪种上下文被解析、由谁渲染、是否被框架拦截，以及有没有配套的样式和校验兜底。
