CodeBlock
code-block代码块 · 多行 <pre> + 一键复制(剪贴板+反馈) + 可选语言标签
用法
基础用法
传入多行代码（用 \n 换行），自动语法着色 + 右上角复制按钮。
<Lens zoom={1.8}>
<img src="/photo.jpg" />
</Lens>tsx
const code = `<Lens zoom={1.8}>
<img src="/photo.jpg" />
</Lens>`;
<CodeBlock code={code} />带语言标签
lang 在左上角显示语言标识，并影响着色规则。
tsx
import { Button } from "@hulianui/ui";
// 点击计数示例
export function Demo() {
const [n, setN] = useState(0);
return <Button onClick={() => setN(n + 1)}>点了 {n} 次</Button>;
}tsx
<CodeBlock code={code} lang="tsx" />Shell 命令
lang="bash" 按 Shell 规则着色命令名与 flag。
bash
# 安装并构建
pnpm add @hulianui/ui
pnpm --filter @hulianui/ui buildtsx
<CodeBlock code={shell} lang="bash" />关闭着色 / 不可复制
highlight={false} 渲染纯文本；copyable={false} 去掉复制按钮。
import { Button } from "@hulianui/ui";
// 点击计数示例
export function Demo() {
const [n, setN] = useState(0);
return <Button onClick={() => setN(n + 1)}>点了 {n} 次</Button>;
}<Lens zoom={1.8}>
<img src="/photo.jpg" />
</Lens>tsx
<>
<CodeBlock code={code} highlight={false} />
<CodeBlock code={code} copyable={false} />
</>何时用
展示多行代码片段，自带语法着色、右上角语言标签与一键复制。单行命令/内联标识用 Snippet；只是一段内联 code 文字用 Code；展示前后差异用 CodeDiff。
导入
ts
import { CodeBlock, HighlightedCode, tokenizeCode, type CodeToken, type CodeTokenType } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| code* | string | — | 代码文本，多行用 \n |
| lang | string | — | 右上角语言标签（如 "tsx"），同时决定着色规则走 JS 家族还是 Shell |
| copyable | boolean | true | 是否显示复制按钮 |
| highlight | boolean | true | 是否语法着色；关掉则纯文本 |
| className | string | — | 容器类名 |
禁忌 / 坑
暂无已知坑。
相关
Playground
tsx
import { Button } from "@hulianui/ui";
// 点击计数示例
export function Demo() {
const [n, setN] = useState(0);
return <Button onClick={() => setN(n + 1)}>点了 {n} 次</Button>;
}<CodeBlock code={code} lang="tsx" />