标签仅用于语义化标记行内短小技术词，如函数名、命令、变量等；多行代码必须用组合，否则格式崩坏、语义缺失。

code 标签不是代码块容器，它只负责语义标记——告诉浏览器“这是个技术名词”，不处理换行、缩进或高亮。

什么时候该用 code 而不是

只在句子中提一个短小、上下文明确的技术词时用 code：

• fetch()、useState()、os.path.join() —— 函数或方法名
• npm install、git commit -m —— 命令行指令
• userProfile、MAX_RETRY —— 变量或常量名
• /src/utils.js、package.json —— 路径或文件名

常见错误是把整段逻辑塞进去：if (x —— 这里含 <code> 和 <code>{，既没转义又跨行，渲染会错乱甚至破坏 DOM。

为什么直接粘贴多行代码进 code 会塌成一行

code 是纯行内元素，浏览器默认折叠所有换行符、制表符和连续空格。你写成：

anything-to-html

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

下载

<pre class="brush:php;toolbar:false;">function add(a, b) {
  return a + b;
}

实际渲染效果等同于：function add(a, b) { return a + b; }

—— 括号错位、缩进消失、根本没法读。

这不是 bug，是规范行为。W3C 明确定义 code 不保留格式，它只管“这是代码”，不管“怎么排版”。

HTML 特殊字符必须手动转义，否则解析失败

只要 code 内容里出现 、<code>> 或 &，就必须写成对应 HTML 实体：

• 替代 <code>（如写 <code>x ，不是 <code>x ）
• > 替代 >（如 Array<string></string>）
• & 替代 &（如 name=foo&id=123）

漏转义的典型后果：浏览器把 <div> 当成真实标签解析，后续内容消失；或者整个 <code>code 段被截断，CSS/JS 加载异常。

真正容易被忽略的是语义与格式的职责分离

开发者常混淆两件事：pre 管“怎么显示”，code 管“这是什么”。单用 pre，屏幕阅读器读作“预格式文本”，不是“JavaScript 代码”；单用 code，格式全崩。二者嵌套才是唯一合规解法。而社区帖子里大量误用，根源不在不会写，而在没分清“我要强调这个词”和“我要展示这段可执行逻辑”的差别。