CodeBlock
展示带语法高亮的代码。中文惯用名：代码块。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.code-block |
| 名称 | CodeBlock |
| 二级分类 | 媒体与内容（media） |
| 用途 | 展示带语法高亮的代码 |
| 描述 | 中文惯用名：代码块。 |
预览
静态结构：卡片（border rounded-md bg-muted）= 复制按钮（右上角，复制成功变 √ 两秒）+ 高亮体（复用 @pactor-app/markdown 的 Prism Light 高亮器，已注册 bash/css/js/jsx/ts/tsx/json/md/python/yaml 及别名，未注册语言降级纯文本）。
DSL 结构
{
"type": "CodeBlock",
"props": {
"code": "export const hello = () => console.log(\"hello\");",
"language": "ts",
"copyable": true
}
}何时用
何时使用
- 展示带语法高亮的代码：接口示例、配置片段、错误堆栈。
- 需要一键复制的代码分享场景。
何时不用
- Markdown 文档中的行内代码：由 Markdown 组件的代码块承接。
- 代码编辑：本组件只读，编辑场景需代码编辑器。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 高亮代码 | Prism one-light 配色 | 接口 / 配置示例 |
| 纯文本 | 未注册语言降级 | 日志、堆栈、任意文本 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
code | string | '' | 代码内容 |
language | string | 'text' | 语言（Prism 注册表；未注册降级纯文本） |
copyable | boolean | true | 是否显示复制按钮 |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- language 标注准确，高亮才有意义；不确定就用 text。
- 超长代码（百行以上）考虑折叠或只贴关键片段。
- 密钥 / 令牌等敏感内容不要渲染进代码块。
正例
- ✓ API 文档：请求示例 ts/json 高亮 + 一键复制。
- ✓ 错误详情：堆栈文本以 text 语言展示。
反例
- ✕ 把 CodeBlock 当编辑器（只读组件）。
- ✕ 展示含真实密钥的配置（应脱敏）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。