Carregando…Carregando…Carregando…Carregando…Side-by-side or unified code diff viewer with line numbers and added/removed highlighting.
$ npx kikitocn add code-diff@/lib/utilsimport { CodeDiff } from "@/components/ui/cn/code-diff/CodeDiff";
export function CodeDiffExample() {
return (
<CodeDiff before="Exemplo" after="Exemplo" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
before* | string | — | Conteúdo original (antes) |
after* | string | — | Conteúdo modificado (depois) |
language | string | undefined | Linguagem para highlight (ex: 'typescript') |
filename | string | undefined | Nome do arquivo exibido no cabeçalho |
showLineNumbers | boolean | true | Exibe números de linha |
splitView | boolean | false | Exibe before e after lado a lado |
maxHeight | number | undefined | Altura máxima com scroll vertical |
className | string | — | Classes CSS extras |
style | CSSProperties | — | Estilos inline pro container |
Code Diff — unified diff with LCS algorithm
| Removed: function greet(name) { |
| Removed: console.log("Hello, " + name) |
| Removed: return name |
| Added: function greet(name: string): string { |
| Added: const msg = `Hello, ${name}!` |
| Added: console.log(msg) |
| Added: return msg |
| } |
| Removed: const user = "World" |
| Added: const user = "Kikito" |
| greet(user) |
Code Diff — split view
| Removed: function greet(name) { |
| Removed: console.log("Hello, " + name) |
| Removed: return name |
| } |
| Removed: const user = "World" |
| greet(user) |
| Added: function greet(name: string): string { |
| Added: const msg = `Hello, ${name}!` |
| Added: console.log(msg) |
| Added: return msg |
| } |
| Added: const user = "Kikito" |
| greet(user) |