R
布局与内容CodeBlock单色驱动主题语法高亮复制按钮

代码块

干净的代码块，整套主题都由一条强调色推导而来。传代码和一个 hex，剩下的交给它。

hero.tsx
import FluidOrb from "@/components/ui/fluid-orb"


export function Hero() {
  return (
    <FluidOrb size={220} color="#fc4c01" />
  )
}

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/code-block.tsx。

npx shadcn@latest add swamimalode07/rare-ui/code-block

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

code-block.tsx
import { CodeBlock } from "@/components/ui/code-block"


const code = `export function hello() {
  return "你好，Rare UI"
}`


export function Demo() {
  return (
    <CodeBlock
      code={code}
      language="tsx"
      accent="#fc4c01"
      filename="hello.tsx"
      showLineNumbers
      highlightLines={[2]}
    />
  )
}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性类型默认值说明
codestring—要渲染的源码。
languagestring"tsx"Prism 语言 id。
accentstring—任意 hex，整套配色由它推导。
mode"auto" | "dark" | "light""auto"明暗模式，auto 跟随页面。
filenamestring—标题栏文件名。
showFramebooleantrue是否显示外框。
showHeaderbooleantrue是否显示标题栏。
showLineNumbersboolean—是否显示行号。
showCopyButtonbooleantrue是否显示复制按钮。
highlightLinesnumber[]—需要高亮的 1-based 行号。