# Code Diff
> Compare editable source with full-source syntax colors and literal code diffs.
**Source:** [https://diff.svelte.page/examples/code-diff](https://diff.svelte.page/examples/code-diff)
**Markdown mirror:** [https://diff.svelte.page/examples/code-diff.md](https://diff.svelte.page/examples/code-diff.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: compare code.
Each complete source is highlighted before composing character, word, or line diffs. Comments and strings keep their syntax context. Register only the languages you use.
**Metadata:** tag: `READABILITY` | modes: `3` | input: `editable`
### Source
#### CodeDiffDemo.svelte
Source file: [src/lib/examples/code-diff/demos/CodeDiffDemo.svelte](https://github.com/humanspeak/svelte-diff/blob/main/docs/src/lib/examples/code-diff/demos/CodeDiffDemo.svelte)
```svelte
{themeCss}
Try a change
{#each presets as preset (preset.name)}
{/each}