标签仅用于语义化行内代码片段，不保留格式；多行代码必须用嵌套组合，前者保换行缩进，后者声明语义，且需转义HTML字符、设置overflow-x: auto和display: block。

code 标签不是代码块容器，它只负责语义声明——告诉浏览器“这段文字是计算机代码”，不处理换行、缩进或排版。想靠它直接展示多行函数或配置片段，一定会塌成一行。

什么时候该用 code 单独出现

仅限嵌入段落中的短内容，比如函数名、命令、路径、属性名这类无需格式保留的片段：

• 调用 fetch() 时传入 AbortSignal
• 配置项写在 package.json 的 scripts 字段里
• 错误信息如 ReferenceError: x is not defined

这些场景下，code 是行内元素，自然跟随段落流，加粗/变色/背景色都可，但不能设 width 或 margin 来控制布局 —— 它不是盒子。

为什么 pre + code 是唯一可靠组合

单用 pre：屏幕阅读器读作“预格式化文本”，语义丢失；单用 code：所有换行和连续空格被压缩，function add(a, b) { return a + b; } 渲染后变成 function add(a, b) { return a + b; }，括号错位、逻辑难读。

正确结构必须是：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

<pre class="brush:php;toolbar:false;"><code class="js">function greet(name) {
  return `Hello, ${name}!`;
}</code>

其中：

• pre 负责保留原始换行与缩进（包括 Tab 和空格）
• code 声明这是代码内容，而非 ASCII 艺术或日志
• class="js" 不是必需，但能触发 Prism.js 或 highlight.js 的语法高亮

容易忽略的三个硬性要求

漏掉任意一个，轻则显示异常，重则破坏 DOM：

• HTML 特殊字符必须转义： 写成 ，> 写成 >，& 写成 &；否则浏览器会尝试解析
  为真实标签
• pre 必须加 overflow-x: auto，否则长代码行直接撑破容器，移动端尤其明显
• code 在 pre 内要设 display: block，否则它作为行内元素，无法响应 pre 的宽高与滚动控制

真正卡住人的，往往不是怎么写，而是没意识到 pre 和 code 各自只干一件事：一个管“怎么显示”，一个管“这是什么”。混用、省略、错层，都会让代码片段变形或语义失效。