Code Comparison
並排 diff 的程式碼比較，逐行揭示增刪並自動語法上色。
並排呈現修改前後的程式碼，以 LCS 逐行 diff 標記新增與刪除，並帶有輕量語法上色與逐行揭示動畫。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.05
0.4
<CodeComparison />
安裝
npx shadcn@latest add https://webberui.com/r/code-comparison.json或在 components.json 設定 registries 後，改用 @webberui/code-comparison 安裝。
安裝依賴後，從 registry JSON（/r/code-comparison.json 的 files[0].content）複製 code-comparison.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { CodeComparison } from "@/components/ui/code-comparison";
<CodeComparison
beforeCode={before}
afterCode={after}
beforeFilename="greet.js"
afterFilename="greet.ts"
language="tsx"
/>;beforeCode 與 afterCode 傳入多行字串即可，元件會自動計算逐行差異。左側面板標記被刪除的行，右側面板標記新增的行。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
beforeCode | string | — | 修改前的原始碼 |
afterCode | string | — | 修改後的原始碼 |
beforeFilename | string | "before" | 左側面板檔名 |
afterFilename | string | "after" | 右側面板檔名 |
language | string | "tsx" | 語言標記，決定 # 是否為註解與右上標籤 |
showLineNumbers | boolean | true | 是否顯示行號 |
stagger | number | 0.05 | 逐行揭示的間隔（秒） |
duration | number | 0.4 | 單行動畫時長（秒） |
可及性
- 使用者系統開啟「減少動態效果」時，直接渲染靜態的並排 diff，不播放揭示動畫
- 語法上色與增刪標記的
+/-符號、色塊皆為裝飾層（aria-hidden），程式碼文字本身照常朗讀