code标签仅作语义标记，不渲染、不响应数据；必须与pre配合保留格式，内容需手动转义，高亮依赖pre>code结构且需正确class。
标签不是组件，别把它当 Vue 或 React 的 <code>slot 用
它只是语义化标记，不渲染、不执行、不响应数据变化。你在 Vue 单文件组件里写 <code>{{ apiName }}</code>，实际输出的是纯静态文本，不会随 apiName 变化而更新；在 React 中直接 <code>{process.env.API_URL}</code>，也仅在首次渲染时求值，后续环境变量改了它也不会重 render。
标签不参与任何框架的响应式系统，它和 <code>span一样“哑”，只是多了个等宽字体和语义提示- 框架中真正需要动态代码展示时，应先完成字符串插值（如模板字面量或
useMemo），再把结果塞进标签 - 若内容含 HTML 字符（如
props.children），必须手动转义：用DOMPurify.sanitize()或textContent赋值，避免innerHTML引发 XSS
标签必须和 <code>pre 配合才能显示多行代码
单用
会吃掉所有换行和缩进，哪怕你写成：</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><pre class='brush:php;toolbar:false;'>function add(a, b) {
return a + b;
}
如果漏掉 pre，只留 <code>标签，浏览器就把它压成一行：<code>function add(a, b) { return a + b; }，语义对了，格式全毁。
- 多行代码块结构必须是
pre包裹code，顺序不能反 -
pre负责保留空格与换行，code负责声明“这是代码”——两者缺一不可 -
pre默认可能横向溢出容器，加overflow-x: auto和tab-size: 2是基本操作 - 别给
code单独设white-space: pre：它会让行内代码块撑开段落行高，破坏排版节奏
标签里的特殊字符必须手动转义，框架不会帮你做
想展示 x < y && z > 0，直接写就会被浏览器当成标签解析：从 < y && z > 开始，后面所有内容都可能消失或错位。
- 常见要转义的只有三个：
<、>、& - JSX 中可用
{String.raw<code>x }避免字符串提前解析，但最终仍得进 DOM - Vue 模板里不能依赖
v-html自动转义，它只防 XSS 不保格式；真要用，得先过he.escape() - SSR 场景下（如 Next.js / Nuxt），服务端吐出的 HTML 必须已转义，否则客户端 hydration 会失败
标签不提供语法高亮，高亮库只认 <code>pre > code 结构
Prism.js、highlight.js 这些库启动时，会默认查找 pre > code 组合，并根据 code 的 class（如 language-js）决定如何分词着色。如果你只写 <code class="js">const a = 1，它们根本不会触发。
- 高亮生效前提是：有
pre容器 +code子元素 + 正确的class或data-language属性 - 动态插入代码块后，需手动调用
Prism.highlightAll()，否则新节点不会被处理 - 使用
react-syntax-highlighter等封装库时，它内部已处理好结构和转义，但底层仍是靠pre > code
最常被忽略的一点：语义和格式是两件事，混为一谈就会让代码片段既难读又难维护。一个没 pre 的 标签，看着像代码，其实不是；一个没 code 的 pre，格式对了，但搜索引擎和读屏器不知道那是代码。
