Code
code行内代码 · <code> 等宽皮肤 + tone(default/primary/danger) + RSC
用法
行内代码
包裹在正文中的短代码 token,整体随行流动。
运行
pnpm install 安装依赖tsx
<span className="text-sm text-foreground">
运行 <Code>pnpm install</Code> 安装依赖
</span>色调变体
tone 走语义 token:default / primary / danger。
const x = 1--filter=wwwrm -rftsx
<>
<Code>const x = 1</Code>
<Code tone="primary">--filter=www</Code>
<Code tone="danger">rm -rf</Code>
</>何时用
正文中嵌入行内代码片段(命令、标识符、路径),等宽皮肤 + tone 着色,可在 RSC 直接渲染。多行/带语法高亮的代码块用 CodeBlock;带复制按钮的命令片段用 Snippet;展示键盘按键用 Kbd。
导入
ts
import { Code, codeVariants } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| tone | "default" | "primary" | "danger" | "default" | 配色语气:默认 / 主色(强调)/ 危险(破坏性命令) |
其余 <code>(HTMLElement)原生属性透传。codeVariants 为 CVA 样式函数,可在自定义元素上复用皮肤类名。
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 代码内容 |
禁忌 / 坑
暂无已知坑。
相关
Playground
const x = 1<Code>const x = 1</Code>