标签仅用于语义化行内代码片段，不保留格式；多行代码必须用嵌套组合，前者保换行缩进，后者声明语义，且需转义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 特殊字符必须转义：
写成 <code><，>写成>，&写成&；否则浏览器会尝试解析<div> 为真实标签 <li> <code>pre必须加overflow-x: auto，否则长代码行直接撑破容器，移动端尤其明显 -
code在pre内要设display: block，否则它作为行内元素，无法响应pre的宽高与滚动控制
真正卡住人的，往往不是怎么写，而是没意识到 pre 和 code 各自只干一件事：一个管“怎么显示”，一个管“这是什么”。混用、省略、错层，都会让代码片段变形或语义失效。
