DiffViewer

Vergleicht zwei Texte/HTML-Strings GitHub-style: Sub-Wort-Highlighting, Statistik, Collapse, Leerzeichen- und Groß-/Kleinschreibung-Toggle in der Toolbar.

Gerenderte Artikel-Ansicht

Wie ein Chatbot einen Artikel überarbeitet hat – Änderungen im gerenderten Fließtext, H1/H2 bleiben lesbar. Mit den Buttons oben zwischen Side-by-Side und Gerendert wechseln.

9 hinzugefügt 7 gelöscht

Urlaubstipps für den Sommer

Der Sommer ist die perfekte Zeit für einen Urlaub. Ob Strand oder ~~Berge~~ – für jeden ist etwas dabei.

Strand

Sandstrände laden zum Entspannen ein. Vergessen Sie nicht Ihre Sonnencreme!

Mallorca
Kroatien
Griechenland

Berge

Wer lieber wandert, findet in den Alpen unvergessliche Erlebnisse.

Die Berge rufen – und man muss einfach ~~gehen~~.

Urlaubstipps für den Sommer 2025

Der Sommer ist die perfekte Zeit für einen Urlaub. Ob Strand, Berge oder Städtereise – für jeden Geschmack ist etwas dabei.

Strand & Meer

Sandstrände laden zum Entspannen und Erholen ein. Vergessen Sie nicht Ihre Sonnencreme und ausreichend Wasser!

Mallorca
Kroatien
Griechenland
Türkei

Berge & Natur

Wer lieber wandert, findet in den Alpen und den Dolomiten unvergessliche Erlebnisse für die ganze Familie.

Die Berge rufen – und man muss einfach folgen.

HTML-Diff: Bootstrap → OoComponents Migration

Typische Code-Migration. Die Leerzeichen-Option ignoriert reine Einrückungs-Unterschiede – klick drauf und beobachte, wie viele „Änderungen" verschwinden.

5 gelöscht

1~ <div class="container">

1~ <Stack Orientation="OoOrientation.Vertical" Gap="@OoSpace.S3">

2~ <div class="row">

2~ <h5>Benutzer</h5>

3~ <div class="col-md-8">

3~ <TextBox Label="Name" @bind-Value="_name" />

4~ <h5 class="card-title">Benutzer</h5>

4~ <Stack Orientation="OoOrientation.Horizontal" Gap="@OoSpace.S2">

5~ <input type="text" class="form-control" placeholder="Name" />

5~ <Button Text="Speichern" ButtonStyle="OoColorPalette.Primary" Size="OoSize.Lg" />

6~ <button class="btn btn-primary btn-lg" onclick="save()">Speichern</button>

6~ <Button Text="Abbrechen" ButtonStyle="OoColorPalette.Neutral.Ghost" />

7~ <button class="btn btn-secondary" onclick="cancel()">Abbrechen</button>

7~ </Stack>

8~ </div>

8~ </Stack>

9- </div>

10- </div>

Groß-/Kleinschreibung ignorieren

Der Text ist inhaltlich gleich, nur die Schreibweise unterscheidet sich. Mit dem Aa-Toggle werden alle Zeilen als unverändert erkannt.

3 hinzugefügt 3 gelöscht

1~ Willkommen bei Onesown Components!

1~ WILLKOMMEN BEI unseren COMPONENTS!

2 Diese Bibliothek enthält wiederverwendbare Blazor-Komponenten.

3~ Unterstützte Features: DataGrid, Inputs, Layout, Navigation.

3~ Unterstützte Features: INPUTS, LAYOUT, NAVIGATION.

4~ Kontakt: support@onesown.at

4~ Kontakt: SUPPORT@ONESOWN.AT

Eigene Texte ausprobieren

Beide Felder bearbeiten – der Diff aktualisiert sich sofort.

Alter Text

Neuer Text

3 hinzugefügt 1 gelöscht

1~ <div class="container">

1~ <Stack>

2~ <h2>Hallo Welt</h2>

2~ <h2>Hallo Onesown</h2>

3~ </div>

3~ <p>Neue Zeile</p>

4+ </Stack>

SKILL.md – Diffviewer

---
name: DiffViewer
description: Onesown Blazor Komponente DiffViewer (Viewer). Verwende diesen Skill wenn du die DiffViewer-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# DiffViewer

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Viewer  
**Basisklasse:** `OoComponentBase`  

Zeigt zwei Texte im Diff-Vergleich an: Side-by-Side (Spalten) oder Rendered (gerenderte HTML-Ansicht mit Änderungsmarkierungen). Unterstützt Wort-Highlighting, Zeilennummern, Kontext-Collapse, Statistik-Leiste sowie Leerzeichen- und Groß-/Kleinschreibungsignorierung.

**Live-Demo:** https://components.schini.com/demo/diffviewer  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``AltText`` | ``string`` | ``string.Empty`` | Der ursprüngliche (alte) Text. |
| ``NeuText`` | ``string`` | ``string.Empty`` | Der neue (geänderte) Text. |
| ``AltTitel`` | ``string`` | ``"Alt"`` | Spaltenüberschrift für die alte Version. |
| ``NeuTitel`` | ``string`` | ``"Neu"`` | Spaltenüberschrift für die neue Version. |
| ``Modus`` | ``DiffViewerModus`` | ``DiffViewerModus.SideBySide`` | Initialer Darstellungsmodus (wird beim ersten Render übernommen). |
| ``ZeigeZeilennummern`` | ``bool`` | ``true`` | Ob Zeilennummern angezeigt werden sollen. |
| ``KontextZeilen`` | ``int`` | ``3`` | Unveränderte Abschnitte einklappen. 0 = deaktiviert. |
| ``IgnoriereLeerzeichen`` | ``bool`` | ``false`` | Leerzeichen beim Vergleich ignorieren (Standard: false). |
| ``IgnoriereGrossKlein`` | ``bool`` | ``false`` | Groß-/Kleinschreibung ignorieren (Standard: false). |
| ``ZeigeStatistik`` | ``bool`` | ``true`` | Statistik-Leiste (hinzugefügt/gelöscht) anzeigen. |

## Geerbte Parameter (OoComponentBase)

Alle nicht deklarierten HTML-Attribute (``class``, ``style``, ``data-*``, ``aria-*``, ...) werden an das Root-Element weitergereicht.

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` |  | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |

## Hinweise

- Natives HTML-Attribut class wird automatisch an das Root-Element weitergegeben
- Natives HTML-Attribut style wird automatisch an das Root-Element weitergegeben
- Alle weiteren nicht deklarierten Attribute (data-*, aria-*, id, tabindex, …) werden ebenfalls weitergereicht
- Größe der Komponente via Size mit OoSize-Konstanten steuern (OoSize.Xs bis OoSize.Xl)
- Darstellungsmodus: Modus="DiffViewerModus.SideBySide" (Standard) oder Modus="DiffViewerModus.Rendered"
- Zeilennummern ausblenden: ZeigeZeilennummern="false"
- Unveränderte Abschnitte einklappen: KontextZeilen="3" zeigt je 3 Zeilen Kontext um Änderungen; 0 deaktiviert das Einklappen
- Leerzeichen beim Vergleich ignorieren: IgnoriereLeerzeichen="true"
- Groß-/Kleinschreibung ignorieren: IgnoriereGrossKlein="true"
- Statistik-Leiste (hinzugefügt/gelöscht) ausblenden: ZeigeStatistik="false"
- Spaltenüberschriften anpassen: AltTitel="Version 1" NeuTitel="Version 2"