Carregando…Carregando…Carregando…Carregando…Side-by-side or unified code diff viewer with line numbers and syntax highlight.
$ npx kikitocn add code-diff@/lib/utils| 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 |
Code Diff — unified diff with LCS algorithm
| 1 | - | function greet(name) { | |
| 2 | - | console.log("Hello, " + name) | |
| 3 | - | return name | |
| 1 | + | function greet(name: string): string { | |
| 2 | + | const msg = `Hello, ${name}!` | |
| 3 | + | console.log(msg) | |
| 4 | + | return msg | |
| 4 | 5 | } | |
| 5 | 6 | ||
| 6 | - | const user = "World" | |
| 7 | + | const user = "Kikito" | |
| 7 | 8 | greet(user) |
import { CodeDiff } from "@/components/ui/cn/code-diff/CodeDiff";
export function CodeDiffExample() {
return (
<CodeDiff />
);
}