Snippet
snippet代码片段 · 命令提示符 + 一键复制(剪贴板+反馈)
用法
基础用法
单行可复制命令，默认带 $ 提示符与右侧复制按钮。
$
pnpm add @hulianui/uitsx
<Snippet>pnpm add @hulianui/ui</Snippet>无提示符（代码片段）
symbol={null} 去掉提示符，按 JS 规则着色，适合粘贴代码片段。
const theme = useTheme()tsx
<Snippet symbol={null}>const theme = useTheme()</Snippet>自定义复制文本
text 指定实际复制内容，可与展示文本不同。
$
pnpm --filter ... buildtsx
<Snippet text="pnpm --filter @hulianui/ui build">
pnpm --filter ... build
</Snippet>何时用
展示单行命令/代码片段，前置提示符 + 一键复制，适合安装命令、CLI 指令。多行代码块用 CodeBlock；纯内联标识文字用 Code。
导入
ts
import { Snippet } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| text | string | — | 复制到剪贴板的文本；缺省时取 children（仅当为字符串时） |
| symbol | string ｜ null | "$" | 命令提示符；传 null 不显示，适合非命令片段 |
| lang | string | — | 语法着色语言（如 "tsx"/"bash"），仅 children 为字符串时生效 |
| highlight | boolean | true | 是否语法着色，仅 children 为字符串时生效 |
| className | string | — | 容器类名 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 显示内容（字符串或节点） |
禁忌 / 坑
text/lang/highlight的着色与复制兜底仅在children为字符串时生效；传入节点时只能手动给text指定复制内容。