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 显式定制。

行高亮（highlight-lines）

highlight-lines 用 "1,3-5" 范围语法高亮指定行（1-based，逗号分隔单点或闭区间；空白忽略，非法片段跳过）：

行高亮

示例代码

行聚焦（focus-lines）

focus-lines 聚焦指定行，其余行向主题文字色掺色淡化（color-mix，非透明度），适合讲解时突出关键代码：

行聚焦

示例代码

diff 模式（diff）

diff 开启后按行首字符着色：+ 前缀行绿色（新增）、- 前缀行红色（删除）：

diff 差异着色

示例代码

内容折叠（max-rows）

max-rows 限制显示行数，超出时折叠并显示展开/收起尾行（0 表示不封顶，非法值忽略）：

max-rows 折叠

示例代码

API

oas-code

属性

属性	说明	类型	默认值
code	源代码原文	string	—
color	行内文字色：支持 11 个预设名（magenta / red / volcano / orange / gold / lime / green / cyan / blue / geekblue / purple，映射 --oas-preset-*-text token）或任意 CSS 色值	string	—
copyable	显示复制按钮	string	true
diff	diff 模式：按行首 +/- 整行着色（增绿减红，语义色 token）	boolean	—
focus-lines	行聚焦：指定聚焦行，其余行淡化	string	—
highlight-lines	行高亮："1,3-5" 范围语法指定高亮行（1-based）	string	—
inline	行内代码模式：渲染为等宽浅底小框，适合正文内嵌代码片段	boolean	—
language	语言：js/ts/html/css/json，未知按纯文本	string	—
max-rows	最大显示行数，超出折叠 + 展开/收起尾行（0 不封顶）	string	—
show-line-number	显示行号栏	boolean	—
size	行内字号档：xs / small / medium（默认）/ large；非法值回落 medium 并告警	string	—
trim	去首尾空白（默认 true，trim="false" 保留）	string	true
variant	行内形态：subtle（默认浅底）/ outline（描边）/ plain（纯文字）/ solid（实底）；非法值回落 subtle 并告警	—	—
word-wrap	长代码换行显示，不横向滚动	boolean	—

事件

事件	说明
oas-copy	复制成功，detail: { text }
oas-copy-error	复制失败，detail: { text }

CSS 变量

CSS 变量	默认值
--oas-code-color	var(--oas-color-text-primary)
--oas-code-focus-dim-strength	58%
--oas-code-font	0.875em
--oas-code-highlight-bg	color-mix(in srgb, var(--oas-color-primary) 8%, transparent)
--oas-code-on-color	var(--oas-color-bg)