程式碼區塊 Code Block｜免費 React 元件

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

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

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add code-block

Code Block 是用 React、Tailwind CSS 與 Motion 做的語法高亮程式碼區塊（code block／code highlight）元件，複製鈕使用 lucide-react 圖示；高亮由檔案內建的逐字元 tokenizer 處理，不需要另外安裝語法高亮套件。

Playground

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

語言language

顯示行號showLineNumbers

macOS 視窗圓點traffic

複製按鈕copy

逐行進場動畫animate

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<CodeBlock/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

適用情境

產品官網或 landing page 上展示安裝指令與 API 呼叫範例。
部落格、技術文章或更新日誌裡的短程式碼片段。
教學步驟頁，用強調行標出這一步改動的地方。
SaaS 後台的「整合設定」頁，顯示 webhook 範例或 SDK 初始化程式碼。

安裝

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

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

使用

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。未知語言會退回通用模式，仍會高亮字串、註解與數字。

範例

在 Server Component 讀取檔案內容

元件只需要一個 code 字串，可以在 Next.js 的 Server Component 用 fs 讀取範例檔，再交給 CodeBlock 顯示。

// app/docs/setup/page.tsx
import { readFile } from "node:fs/promises";
import { CodeBlock } from "@/components/ui/code-block";

export default async function SetupPage() {
  const code = await readFile("examples/client.ts", "utf8");

  return (
    <CodeBlock code={code} language="ts" filename="client.ts" showLineNumbers />
  );
}

教學步驟：強調改動的行

highlightLines 用 1-based 行號標出重點，搭配 traffic 顯示紅黃綠圓點的視窗頂欄。

<CodeBlock
  language="tsx"
  filename="app/layout.tsx"
  traffic
  showLineNumbers
  highlightLines={[2, 7]}
  code={`import "./globals.css";
import { Toaster } from "@/components/ui/toaster";

export default function RootLayout({ children }) {
  return (
    <html lang="zh-Hant">
      <body>{children}<Toaster /></body>
    </html>
  );
}`}
/>

長輸出：限制高度、關閉動畫

終端機輸出或設定檔較長時，用 maxHeight 讓內容區捲動，animate={false} 直接顯示不做逐行淡入。

<CodeBlock
  language="bash"
  filename="終端機"
  animate={false}
  maxHeight={240}
  code={deployLog}
/>

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

常見問題

可以在 Next.js App Router 使用嗎？

可以。檔案開頭已有 "use client"，在 Server Component 頁面中照常 import，並可直接把伺服器端讀到的字串傳給 code。首次渲染與 SSR 一致，掛載後才啟用動畫。

支援哪些語言？

language 會辨識 tsx、jsx、ts、js、python（py）、bash（sh、shell、zsh）、css（scss）、json、html（xml）。其他值會走類 JavaScript 的通用規則，仍會高亮字串、註解與數字。

怎麼改高亮配色？

各類 token 的顏色定義在原始碼的 TOKEN_CLASS 物件，每項都是 Tailwind class（含 dark: 變體），直接修改即可。外框與背景色可透過 className 覆寫。

複製鈕複製的是什麼？

複製的是 code 去掉結尾換行後的內容，成功後圖示切換為勾選、2 秒後恢復。瀏覽器不允許存取剪貼簿時（例如非 HTTPS 環境），元件會安靜略過，不會拋出錯誤。

需要哪些依賴？

motion、lucide-react、clsx 與 tailwind-merge，語法高亮本身沒有額外套件。不想用 CLI 時，可在安裝區的「手動」分頁複製原始碼。

Code Block

把這個效果裝進你的專案

本頁目錄