Diff

Usage

<Diff OldText="@older.Xml" NewText="@newer.Xml" Language="xml" Title="v3 → v4" />

<Diff OldText="@before" NewText="@after" Language="csharp" Layout="DiffLayout.Split" />

The diff is computed and colored on the server, so it looks the same with JavaScript off. Lines removed and added carry a − or + and their old or new line number; the numbers and signs aren't copied when you select the lines.

Two versions

Use OldText and NewText for the two texts and Language to color them; unchanged lines away from the changes fold.

<Diff OldText="@V3" NewText="@V4" Language="xml" Title="v3 → v4" />

Each text is colored whole before it's cut into lines, so a comment or value across several lines keeps its color. In a removed line beside an added one, the changed words are marked, unless less than half of the longer line is unchanged (MarkWords turns this off). Context sets how many unchanged lines stay beside each change (3); the rest fold into a row that opens them in place.

Side by side

Use Layout DiffLayout.Split to put the old text beside the new; below 45rem wide it shows as unified.

<Diff OldText="@Before" NewText="@After" Language="csharp" Title="OrderTotals.cs" Layout="DiffLayout.Split" />

Each removed line sits beside the line it became, and long lines wrap rather than scroll. Unchanged lines are drawn on both sides, so a split diff sends them twice.

Every line

Use Fold="false" to show every unchanged line and LineNumbers="false" to leave the numbers out, for a short text.

<Diff OldText="@Before" NewText="@After" Language="json" Fold="false" LineNumbers="false" />

A diff computed first

Use Lines for a diff you computed with TextDiff.Compare or elsewhere, such as to count the changes first.

@{
    // Null when the texts differ by more lines than Compare looks for.
    var lines = TextDiff.Compare(Before, After);
}
<Column Gap="3">
    <Row Gap="2" Align="Align.Center">
        <TextBlock Weight="FontWeight.Medium">Release notes</TextBlock>
        @if (lines is not null)
        {
            <Badge Status="Status.Success">@lines.Count(l => l.Kind == DiffKind.Added) added</Badge>
            <Badge Status="Status.Danger">@lines.Count(l => l.Kind == DiffKind.Removed) removed</Badge>
        }
    </Row>
    @if (lines is not null)
    {
        <Diff Lines="lines" />
    }
    else
    {
        <TextBlock>Too many changes to show.</TextBlock>
    }
</Column>

TextDiff.Compare(oldText, newText) returns every line of both texts as a DiffLine (its Kind, OldNumber, NewNumber and Text), or null when they differ by more lines than it looks for. Lines from elsewhere should be every line of both texts, in order, removed lines before the added lines that replace them.

No changes, or too many

Use SameText and TooManyText to change the notes shown when the texts are the same, or differ by more than MaxChanges lines.

<Column Gap="4">
    <Diff OldText="@Text" NewText="@Text" Title="settings.json" />
    <Diff OldText="@Text" NewText="@Other" MaxChanges="2" Title="settings.json" />
</Column>

Large texts

The lines both texts start and end with cost nothing; past them, the comparison's work grows with the length of the rest times the lines that differ, and MaxChanges (1,000 lines removed and added) bounds it. Folded lines are still in the page, ready to open, so a 5,000-line file with one change sends 5,000 lines; set MaxHeight to keep a long diff in a scrolling box.

Mode support

Accessibility

Parameters

See also

• Code: inline code or a block, highlighted on the server.
• Demos: Version history.