Code 代码块
代码块组件（自研正则 token 高亮，零第三方高亮引擎），支持常见语言基础着色、行号与复制按钮。
JavaScript
JavaScript 高亮
关键字 / 字符串 / 注释 / 数字 / 函数 / 运算符基础着色。
TypeScript
TypeScript 高亮
HTML
HTML 高亮
标签名与属性名分别着色。
CSS
CSS 高亮
JSON
JSON 高亮
行号 + 复制
显示行号
show-line-number 显示行号栏；右上角复制按钮（copyable="false" 可关闭），点击复制源码并派发 oas-copy 事件。
复制按钮开关
copyable 复制按钮
copyable 控制右上角复制按钮（默认 true）：设为 false 隐藏按钮；点击按钮将源码写入剪贴板并短暂显示「已复制」。
未知语言
未知语言按纯文本渲染
语言未知时按纯文本渲染（已转义），不报错。
行内代码（inline）
inline 渲染行内代码（等宽+浅底小框，不块级不换行，适合正文内嵌代码片段）：
行内代码
使用
换行（word-wrap）
word-wrap 时长代码换行不横向滚动：
长代码换行
去首尾空白（trim）
trim 默认 true（去首尾空白），trim="false" 保留：
trim 对照
行内尺寸（size）
size 四档（xs/small/medium/large，inline 语境字号档）：
行内尺寸
行内形态（variant）
variant 四形态（subtle 默认浅底 / outline 描边 / plain 纯文字 / solid 实底）：
行内形态
行内颜色（color）
color 支持 11 个预设色名（明暗主题自动适配）或任意 CSS 色值（直接生效，优先于预设与默认）。inline 语境的文字色：
行内颜色
字号定制
字号默认为外层字号的 0.875 倍（0.875em），可用 CSS 变量 --oas-code-font 显式定制。
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
code | 源代码原文 | string | — |
color | 行内文字色：支持 11 个预设名（magenta / red / volcano / orange / gold / lime / green / cyan / blue / geekblue / purple，映射 --oas-preset-*-text token）或任意 CSS 色值 | string | — |
copyable | 显示复制按钮 | string | true |
inline | 行内代码模式：渲染为等宽浅底小框，适合正文内嵌代码片段 | boolean | — |
language | 语言：js/ts/html/css/json，未知按纯文本 | string | — |
show-line-number | 显示行号栏 | boolean | — |
size | 行内字号档：xs / small / medium（默认）/ large；非法值回落 medium 并告警 | — | — |
trim | 去首尾空白（默认 true，trim="false" 保留） | string | true |
variant | 行内形态：subtle（默认浅底）/ outline（描边）/ plain（纯文字）/ solid（实底）；非法值回落 subtle 并告警 | — | — |
word-wrap | 长代码换行显示，不横向滚动 | boolean | — |
事件
| 事件 | 说明 |
|---|---|
oas-copy | 复制成功，detail: { text } |
oas-copy-error | 复制失败，detail: { text } |
引擎选型（架构决策）
自研正则 token 高亮，不引入第三方高亮库：
- 零依赖核心卖点：运行时零第三方依赖；自研正则高亮不引入任何依赖。
- 覆盖主流语言基础着色：js/ts/html/css/json 的关键字/字符串/注释/数字/函数/标签/属性着色覆盖大多数文档场景；精确的语法级高亮（多行状态机、上下文感知）属后续增强，届时再评估。
- 安全：先转义 HTML 再着色，杜绝注入；未知语言纯文本渲染不报错。
- 实现为单遍组合正则（互斥捕获组），一次 replace 完成，无二次处理破坏转义实体的问题。