DiffPlex Documentation

DiffPlex.Blazor is a Blazor web application that demonstrates how to use the DiffPlex library for web-based text diffing.

Key Features

• Side-by-Side Diff Viewer: Split-pane view for comparing texts.
• Inline Diff Viewer: Unified view with change indicators.
• Unified Diff Format: Support for Git-style unified diff output.
• Real-time Updates: Live rendering as text is edited.

Visual Styling

The components use CSS to provide a GitHub-like visualization:

• Green: Added lines.
• Red: Deleted lines.
• Yellow: Modified lines.
• Layout: Includes line numbers, change type indicators, and monospace fonts for alignment.

When building the DiffPlex App, follow these requirements:

• Deployment Mode: Ensure the project runs in Package mode, as the configuration is set up for MSIX packaging.
• CPU Architecture: Supported platforms are x64, x86, and arm64.
• Output Behavior:
  • In Debug mode, the app will output test data of texture diffs.
  • In Release mode, the app will output empty data.

The DiffPlex.Wpf assembly also includes a Windows Forms control (a WPF element host control) for use in WinForms applications. It targets .NET 8, .NET 6, .NET Framework 4.8, and .NET Framework 4.6.

1. Install the DiffPlex.Wpf NuGet package.
2. Add the namespace: using DiffPlex.WindowsForms.Controls;
3. Instantiate and add the DiffViewer to your form.

using DiffPlex.WindowsForms.Controls;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        var diffView = new DiffViewer
        {
            Margin = new Padding(0),
            Dock = DockStyle.Fill,
            OldText = oldText,
            NewText = newText
        };
        Controls.Add(diffView);
    }
}

The DiffPlex.Wpf library provides controls for rendering textual diffs in WPF applications. It supports .NET 9, .NET 8, .NET 6, .NET Framework 4.8, and .NET Framework 4.6.

1. Install the DiffPlex.Wpf NuGet package.
2. Add the namespace to your XAML root node: xmlns:diffplex="clr-namespace:DiffPlex.Wpf.Controls;assembly=DiffPlex.Wpf"
3. Choose a control:
   • DiffViewer: Standard viewer with view mode switching via OldText and NewText.
   • SideBySideDiffViewer: Side-by-side viewer using a SideBySideDiffModel.
   • InlineDiffViewer: Inline (unified) viewer using a DiffPaneModel.

Example using DiffViewer:

<diffplex:DiffViewer x:Name="DiffView" />

using DiffPlex.Wpf.Controls;
// ...
DiffView.OldText = oldText;
DiffView.NewText = newText;

The documentation is built with Jekyll and can be run on your local machine:

1. Install Jekyll and Ruby dependencies using bundle install. Note: Windows users may need to follow an unofficial guide to set up Jekyll correctly.
2. From the root /bootstrap directory, run bundle exec jekyll serve.
3. Access the documentation at http://localhost:9001 in your browser.

To explore the interactive side-by-side rendering, inline diff view, and three-way merge capabilities in a Blazor environment, you can run the provided sample application.

cd DiffPlex.Blazor
dotnet run

The DiffPlex.Windows library allows you to render textual diffs in applications targeting the Windows App SDK.

1. Install the DiffPlex.Windows NuGet package.
2. Add the namespace to your XAML root node: xmlns:diffplex="using:DiffPlex.UI"
3. Use the DiffTextView element in your XAML.
4. Populate the view using the SetText method in your code-behind.

<diffplex:DiffTextView x:Name="DiffView" />

using DiffPlex.UI;
// ...
DiffView.SetText(OldText, NewText);