Code Block

轻量语法高亮代码块，含文件名、行号、复制按钮与块内横向滚动。

#code #syntax #copy

在沙盒中编辑

复制一段给 AI 编程工具的提示词，包含源码、依赖和用法

属性

CodeBlockProps

同时支持以下类型的全部属性： Omit<React.ComponentProps<"div">, "children">

属性	类型	默认值	说明
code* 必填	`string`	—	—
language	`CodeLanguage`	—	—
filename	`string`	—	—
showLineNumbers	`boolean`	—	—

安装

$ npx shadcn@latest add https://chromotion.dev/r/code-block.json

同类组件

Diff Viewer

并排/统一文本差异对比，含行号与词级高亮。

Line Chart

多系列平滑折线/面积图，支持悬浮十字准线、图例开关与描线动画。

Gauge

半圆仪表盘，带指针或弧形填充、阈值色带与 meter 语义。