資料展示
Code Comparison
並排 diff 的程式碼比較，逐行揭示增刪並自動語法上色。
並排呈現修改前後的程式碼，以 LCS 逐行 diff 標記新增與刪除，並帶有輕量語法上色與逐行揭示動畫。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add code-comparisonPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.05
0.4
編輯中的呼叫預設屬性
<CodeComparison/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/code-comparison.json或在 components.json 設定 registries 後，改用 @webberui/code-comparison 安裝。
使用
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），程式碼文字本身照常朗讀