代码块
Code Block
UI 组件也叫：代码片段、代码高亮、Code Snippet、语法高亮
一句话：用等宽字体和语法高亮展示一段代码的区域，通常带语言标签、行号和一键复制按钮。
详细解释
代码块用于在文档、博客、教程里展示代码：浅灰或深色背景，等宽字体，保留缩进和换行，关键字、字符串、注释用不同颜色区分。完整的代码块一般还有右上角的「复制」按钮、左上角的语言或文件名标签、左侧行号，并能高亮某几行。HTML 里用 <pre><code> 表示，语法高亮常用 Shiki、Prism、highlight.js 这些库。
要和 行内代码 区分：句子中间夹的一个函数名或命令（如 npm install）用行内代码，只加一点灰底；多行代码才用代码块。长代码行不要自动换行打乱缩进，应该让代码块横向滚动。能编辑、能运行的在线代码编辑器（如 Monaco、CodeMirror）比代码块复杂得多，不是一回事。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
文档页里的代码块用深灰背景、等宽字体、14px 字号，支持 JavaScript 和 Bash 语法高亮；左上角显示文件名，右上角有「复制」按钮，点击后变为「已复制」持续 2 秒；左侧显示行号，长行横向滚动不自动换行。
结构与适用场景
结构描述
由带背景色的等宽文本区组成，顶部可有文件名或语言标签和复制按钮，左侧可有行号。
适用场景
- 技术文档、博客、教程里需要展示多行代码或命令
- 用户需要把代码复制到自己的项目里运行
- 需要展示配置文件、接口返回的 JSON 等必须保留格式的文本
不适用场景
- 句子中间只提到一个函数名或命令，用行内代码
- 用户需要在页面上编辑并运行代码，用在线代码编辑器
- 展示普通的长段文字，等宽字体会让阅读变慢
常见坏用法
- 没有复制按钮，用户手动选择时总是漏掉首尾字符
- 长代码行自动换行，缩进被打乱看不出结构
- 把代码截图成图片放进页面，无法复制也无法搜索
识别特征
- 一块深色或浅灰底的矩形区域，里面是等宽字体
- 文字有多种颜色，保留缩进
- 右上角有复制图标，左侧可能有一列行号
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
pre:has(> code)pre[class*="language-"]pre.shikidiv[class*="language-"]:has(> pre).highlight:has(pre)