CodeBlock

清晰展示可复制的代码，支持语法着色、行号、全屏查看和尺寸调整，适合文档与开发工具。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于展示可复制的代码；使用其内置复制与展开能力。需要编辑代码时先核对支持范围，不假定展示组件是编辑器。

通过 code 提供代码；默认显示复制与展开按钮，visibleLines 控制初始可见行数。
singleLine 是单行展示，没有语言、行号、展开面板或纵向滚动；as="trailing" 替换右侧动作区。

导入

import { CodeBlock } from '@snowui-design-system/components';

用法

变体

显示语言标签

显示行号

显示展开按钮

水平滚动条可见性

API 参考

属性	类型	默认值	示例	描述
`variant`	`"default" \| "singleLine"`	`"default"`	`variant="default"`	`singleLine` 使用 Input 同类 Leading / Content / Trailing 三槽布局；固定为单行展示，不生成高度拖拽、语言、行号、全屏或纵向滚动结构
`code`	`string`	`""`	`code="Example"`	要显示的代码字符串
`language`	`string`	`""`	`language="Example"`	语言标识，同时选择格式化解析器；支持 svelte、js/javascript、jsx、ts/typescript、tsx、html、css/scss/less、json/jsonc、yaml/yml、markdown/md、graphql/gql。空值根据代码识别 Svelte/HTML、JSON 或 JS/TS；未知的显式语言保留原文。
`format`	`boolean`	`true`	`format`	默认按 language 格式化代码；普通态、全屏、行号与复制共享格式化结果。设为 false 保留原文；singleLine 始终保留原文。解析失败、未知语言或输入超过 200,000 字符时保留原文。
`showLanguage`	`boolean`	`true`	`showLanguage`	是否显示语言标识
`showLineNumbers`	`boolean`	`false`	`showLineNumbers`	是否显示代码行号；普通态与全屏态保持一致，避免切换末帧发生代码横向跳变
`showCopyButton`	`boolean`	`true`	`showCopyButton`	是否显示复制按钮
`showExpandButton`	`boolean`	`true`	`showExpandButton`	是否显示全屏放大按钮
`horizontalScrollbarVisibility`	`"always" \| "hover"`	`"always"`	`horizontalScrollbarVisibility="always"`	横向滚动条在内容溢出时常显，或仅在鼠标移入代码块时显示
`visibleLines`	`number`	`5`	`visibleLines={42}`	默认状态最多显示几行代码；内容不足时自适应高度，超出后滚动；全屏模式不受此限制
`copyTimeout`	`number`	`2000`	`copyTimeout={42}`	复制成功图标（Check）的停留时长（ms），超时后恢复 Copy 图标
`children`	`Snippet`	`—`	`<CodeBlock>Content</CodeBlock>`	代码内容或附件源；纯文本会作为代码，`as="trailing"` 会替换右侧动作区
`parts`	`ComponentPartsOf<{ Indicator: typeof Indicator; CopyButton: typeof CopyButton; ExpandButton: typeof ExpandButton; }>`	`—`	`parts={partsOptions}`	仅配置内置 CopyButton、ExpandButton、Indicator；显式 children 配件不继承，操作按钮可通过 emphasis 配置强调程度。