1
-function greet(name) {1
+function greet(name: string) {2
- console.log("Hello, " + name);2
+ console.log(`Hello, ${name}!`);3
+ return name;34
}Overview
A code diff viewer component with Shiki syntax highlighting. Supports both unified and split (side-by-side) view modes with line numbers and addition/deletion highlighting.
Installation
bunx shadcn@latest add @elements/code-diff-viewerUsage
import { CodeDiffViewer } from "@/components/elements/devtools/code-diff-viewer";
const oldCode = `function greet(name) {
console.log("Hello " + name);
}`;
const newCode = `function greet(name: string) {
console.log(\`Hello \${name}!\`);
}`;
export function DiffExample() {
return (
<CodeDiffViewer
oldCode={oldCode}
newCode={newCode}
language="typescript"
mode="unified"
showLineNumbers
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
oldCode | string | - | Original code content |
newCode | string | - | Modified code content |
language | string | "typescript" | Programming language for highlighting |
mode | "unified" | "split" | "unified" | Diff view mode |
showLineNumbers | boolean | true | Show line numbers |
className | string | - | Additional CSS classes |
Modes
- Unified: Shows changes inline with + and - prefixes
- Split: Side-by-side comparison of old and new code
Features
- Shiki syntax highlighting
- Unified or split view modes
- Line numbers with old/new mapping
- Color-coded additions and deletions
- Responsive layout