diff --git a/README.md b/README.md index 816a749..145681c 100644 --- a/README.md +++ b/README.md @@ -128,6 +128,70 @@ import type { | onProcessing | `function` | - | Callback for timing and diff information | | rendererClasses | `object` | - | CSS classes for diff highlighting | +## Custom Rendering with Snippets + +You can customize how the diff is rendered using Svelte snippets. This gives you full control over the HTML structure and styling of each diff part. + +```svelte + + + + {#snippet remove(text: string)} + {text} + {/snippet} + {#snippet insert(text: string)} + {text} + {/snippet} + {#snippet equal(text: string)} + {text} + {/snippet} + {#snippet lineBreak()} +

+ {/snippet} +
+ + +``` + +### Available Snippets + +| Snippet | Parameters | Description | +| --------- | ---------- | -------------------------------------------- | +| remove | `text` | Renders removed text (in originalText only) | +| insert | `text` | Renders inserted text (in modifiedText only) | +| equal | `text` | Renders unchanged text (in both texts) | +| lineBreak | - | Renders line breaks between diff sections | + +You can use these snippets to: + +- Customize the HTML structure of each diff part +- Apply custom styling to different types of changes +- Add additional elements or attributes +- Implement custom animations or transitions +- Add tooltips or other interactive elements + +If you don't provide snippets, the component will use the default rendering with the `rendererClasses` prop. + ## Events The component emits a `processing` event with timing and diff information: