Code block

以黑色凹槽展示代码：墨黑边框，使用宿主项目的等宽字体，并带复制按钮与行标记。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/code-block

示例

带行号，以及代码变更

route.ts

const route = plan("rail-yards", "north-gate");route.avoid("gate-4");await route.go();

route.avoid("gate-4");route.via("canal");await route.go();

code-block-diff.tsx

import {  CodeBlock,  CodeBlockActions,  CodeBlockContent,  CodeBlockCopyButton,  CodeBlockHeader,  CodeBlockLine,  CodeBlockTitle,} from "@/components/zero/code-block";const route = `const route = plan("rail-yards", "north-gate");route.avoid("gate-4");await route.go();`;export default function CodeBlockDiff() {  return (    <div className="grid w-full max-w-lg gap-4">      <CodeBlock>        <CodeBlockHeader>          <CodeBlockTitle>route.ts</CodeBlockTitle>          <CodeBlockActions>            <CodeBlockCopyButton value={route} />          </CodeBlockActions>        </CodeBlockHeader>        <CodeBlockContent lineNumbers>{route}</CodeBlockContent>      </CodeBlock>      <CodeBlock size="sm">        <CodeBlockActions>          <CodeBlockCopyButton value={'route.via("canal");'} />        </CodeBlockActions>        <CodeBlockContent>          <CodeBlockLine variant="removed">            route.avoid("gate-4");          </CodeBlockLine>          <CodeBlockLine variant="added">route.via("canal");</CodeBlockLine>          <CodeBlockLine variant="highlighted">await route.go();</CodeBlockLine>        </CodeBlockContent>      </CodeBlock>    </div>  );}

行为

头部可选，用于放置标题与操作按钮；没有头部时，操作按钮位于角落，指针悬停在 CodeBlock 上时才显示。CodeBlockCopyButton 复制代码后显示一个对勾，持续两秒。

CodeBlockContent 通过 lineNumbers 显示行号，通过 wrap 让长行自动折行，否则横向滚动。CodeBlockLine 可将一行标记为新增（强调色边线与 +）、删除（红色与 −）或高亮。组件本身不做语法着色；如有需要，可将已高亮的 span 作为子元素传入。

属性

CodeBlock

属性	类型	默认值	说明
variant	"default" \| "danger"	"default"	墨黑边框，或表示错误的红色。
size	"default" \| "sm"	"default"	文字大小与内边距。

CodeBlockContent

属性	类型	默认值	说明
lineNumbers	boolean	false	为每行编号（子元素为字符串时）。
wrap	boolean	false	长行自动折行，而非横向滚动。
startLine	number	1	首行的行号。

CodeBlockLine

属性	类型	默认值	说明
variant	"default" \| "added" \| "removed" \| "highlighted"	"default"	该行的标记方式。

CodeBlockCopyButton

属性	类型	默认值	说明
value	string	—	要复制的内容。
labels	{ copy?: string; copied?: string }	"Copy" / "Copied"	复制前后按钮的可访问名称。