Installation
Usage
Props
Code snippet to display in the “before” section
Code snippet to display in the “after” section
Programming language for syntax highlighting (e.g., “typescript”, “javascript”)
Filename to display in the header
Shiki theme to use for light mode
Shiki theme to use for dark mode
Color for highlighting code lines
Additional CSS classes to apply
Features
- Side-by-side code comparison
- Syntax highlighting via Shiki
- Diff notation support (add/remove lines)
- Focus mode for specific lines
- Theme-aware (light/dark mode)
- Responsive layout
- Line-by-line highlighting
- VS separator indicator
Notation Support
The component supports Shiki transformers for:- Diff notation (
// [!code ++],// [!code --]) - Focus notation (
// [!code focus]) - Highlight notation (
// [!code highlight])