Code Block

語法高亮程式碼區塊含複製鈕，內建輕量 tokenizer 與逐行進場動畫。

零依賴的語法高亮程式碼區塊：自帶 regex tokenizer（不需 shiki / prism），支援檔名頂欄、行號、指定行強調、一鍵複製與逐行 stagger 淡入。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

語言language

顯示行號showLineNumbers

macOS 視窗圓點traffic

複製按鈕copy

逐行進場動畫animate

<CodeBlock />

安裝

npx shadcn@latest add https://webberui.com/r/code-block.json

或在 components.json 設定 registries 後，改用 @webberui/code-block 安裝。

安裝依賴後，從 registry JSON（/r/code-block.json 的 files[0].content）複製 code-block.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

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

<CodeBlock
  code={`const hello = "world";`}
  language="tsx"
  filename="example.tsx"
  showLineNumbers
/>

支援的語言關鍵字：tsx、jsx、ts、js、python、bash、css、json、html。未知語言會退回通用模式，仍會高亮字串、註解與數字。

Props

Prop	型別	預設值	說明
`code`	`string`	—	要顯示的程式碼字串
`language`	`string`	`"tsx"`	語言標記，決定關鍵字與註解語法
`filename`	`string`	—	頂欄左側顯示的檔名／標題
`showLineNumbers`	`boolean`	`false`	是否顯示行號
`highlightLines`	`number[]`	`[]`	要強調的行號（1-based），加底色
`copy`	`boolean`	`true`	是否顯示複製鈕
`traffic`	`boolean`	`false`	頂欄顯示 macOS 風格紅黃綠圓點
`animate`	`boolean`	`true`	進入視口時逐行 stagger 淡入
`maxHeight`	`number`	—	內容區最大高度（px），超出則捲動

可及性

使用者系統開啟「減少動態效果」時，直接靜態渲染，不套用逐行動畫
複製鈕帶 aria-label，複製成功後在複製與勾選圖示間平滑切換
首次渲染與 SSR 一致，掛載後才啟用動畫，避免 hydration mismatch

Playground

安裝

使用

Props

可及性

On this page