diff2html

diff2html generates pretty HTML diffs from git diff or unified diff output.

Features
Online Example
Distributions
Usage
Diff Text Input
Diff2HtmlUI Usage
Diff2Html Usage
Troubleshooting
- 1. Out of memory or Slow execution
Contribute
Contributors
License
Thanks

Features

Supports git and unified diffs
Line by line and Side by side diff
New and old line numbers
Inserted and removed lines
GitHub like visual style
Code syntax highlight
Line similarity matching
Easy code selection

Online Example

Go to diff2html

Distributions

jsdelivr CDN
WebJar
Node Library
NPM CLI
Manually use from jsdelivr or build the project:
- Browser / Bundle
  - Parser and HTML Generator
    - bundles/js/diff2html.min.js - includes the diff parser and html generator
  - Wrapper and helper adding syntax highlight, synchronized scroll, and other nice features
    - bundles/js/diff2html-ui.min.js - includes the wrapper of diff2html with highlight for all highlight.js supported languages
    - bundles/js/diff2html-ui-slim.min.js - includes the wrapper of diff2html with "the most common" highlight.js supported languages
    - bundles/js/diff2html-ui-base.min.js - includes the wrapper of diff2html without including a highlight.js implementation. You can use it without syntax highlight or by passing your own implementation with the languages you prefer
- NPM / Node.js library
  - ES5
    - lib/diff2html.js - includes the diff parser and html generator
    - lib/ui/js/diff2html-ui.js - includes the wrapper of diff2html with highlight for all highlight.js supported languages
    - lib/ui/js/diff2html-ui-slim.js - includes the wrapper of diff2html with "the most common" highlight.js supported languages
    - lib/ui/js/diff2html-ui-base.js
  - ES6
    - lib-esm/diff2html.js - includes the diff parser and html generator
    - lib/ui/js/diff2html-ui.js - includes the wrapper of diff2html with highlight for all highlight.js supported languages
    - lib/ui/js/diff2html-ui-slim.js - includes the wrapper of diff2html with "the most common" highlight.js supported languages
    - lib/ui/js/diff2html-ui-base.js - includes the wrapper of diff2html without including a highlight.js implementation. You can use it without syntax highlight or by passing your own implementation with the languages you prefer

Usage

Diff2Html can be used in various ways as listed in the distributions section. The two main ways are:

Diff2HtmlUI: using this wrapper makes it easy to inject the html in the DOM and adds some nice features to the diff, like syntax highlight.
Diff2Html: using the parser and html generator directly from the library gives you complete control about what you can do with the json or html generated.

Below you can find more details and examples about each option.

Diff Text Input

diff2html accepts the text contents of a unified diff or the superset format git diff (https://git-scm.com/docs/git-diff) (not combined or word diff). To provide multiples files as input just concatenate the diffs (just like the output of git diff).

Diff2HtmlUI Usage

Simple wrapper to ease simple tasks in the browser such as: code highlight and js effects

Invoke Diff2html
Inject output in DOM element
Enable collapsible file summary list
Enable syntax highlight of the code in the diffs

Diff2HtmlUI API

Create a Diff2HtmlUI instance

constructor(target: HTMLElement, diffInput?: string | DiffFile[]) // diff2html-ui, diff2html-ui-slim
constructor(target: HTMLElement, diffInput?: string | DiffFile[], config: Diff2HtmlUIConfig = {}, hljs?: HighlightJS) // diff2html-ui-base

Generate and inject in the document the Pretty HTML representation of the diff

draw(): void

Enable extra features

synchronisedScroll(): void
fileListToggle(startVisible: boolean): void
highlightCode(): void
stickyFileHeaders(): void

Diff2HtmlUI Configuration

synchronisedScroll: scroll both panes in side-by-side mode: true or false, default is true
highlight: syntax highlight the code on the diff: true or false, default is true
fileListToggle: allow the file summary list to be toggled: true or false, default is true
fileListStartVisible: choose if the file summary list starts visible: true or false, default is false
fileContentToggle: allow each file contents to be toggled: true or false, default is true
stickyFileHeaders: make file headers sticky: true or false, default is true
All the options from Diff2Html are also valid configurations in Diff2HtmlUI

Diff2HtmlUI Browser

Mandatory HTML resource imports

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />

<!-- Javascripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>

Init

const targetElement = document.getElementById('destination-elem-id');
const configuration = { drawFileList: true, matching: 'lines' };

const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
// or
const diff2htmlUi = new Diff2HtmlUI(targetElement, diffJson, configuration);

Draw

diff2htmlUi.draw();

Syntax Highlight

NOTE: The highlight.js css should come before the diff2html css

<!-- Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />

<!-- Javascripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>

Pass the option highlight with value true or invoke diff2htmlUi.highlightCode() after diff2htmlUi.draw().

document.addEventListener('DOMContentLoaded', () => {
  const diffString = `diff --git a/sample.js b/sample.js
  index 0000001..0ddf2ba
  --- a/sample.js
  +++ b/sample.js
  @@ -1 +1 @@
  -console.log("Hello World!")
  +console.log("Hello from Diff2Html!")`;
  const targetElement = document.getElementById('myDiffElement');
  const configuration = { drawFileList: true, matching: 'lines', highlight: true };
  const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
  diff2htmlUi.draw();
  diff2htmlUi.highlightCode();
});

When using the auto color scheme, you will need to specify both the light and dark themes for highlight.js to use.

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css"
  media="screen and (prefers-color-scheme: light)"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css"
  media="screen and (prefers-color-scheme: dark)"
/>

Collapsable File Summary List

Add the dependencies.

<!-- Javascripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>

Invoke the Diff2HtmlUI helper Pass the option fileListToggle with value true or invoke diff2htmlUi.fileListToggle() after diff2htmlUi.draw().

document.addEventListener('DOMContentLoaded', () => {
  const targetElement = document.getElementById('myDiffElement');
  var diff2htmlUi = new Diff2HtmlUI(targetElement, lineDiffExample, { drawFileList: true, matching: 'lines' });
  diff2htmlUi.draw();
  diff2htmlUi.fileListToggle(false);
});

Diff2HtmlUI Examples

Example with plain HTML+CSS+JS

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <!-- Make sure to load the highlight.js CSS file before the Diff2Html CSS file -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"
    />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
  </head>
  <script>
    const diffString = `diff --git a/sample.js b/sample.js
index 0000001..0ddf2ba
--- a/sample.js
+++ b/sample.js
@@ -1 +1 @@
-console.log("Hello World!")
+console.log("Hello from Diff2Html!")`;

    document.addEventListener('DOMContentLoaded', function () {
      var targetElement = document.getElementById('myDiffElement');
      var configuration = {
        drawFileList: true,
        fileListToggle: false,
        fileListStartVisible: false,
        fileContentToggle: false,
        matching: 'lines',
        outputFormat: 'side-by-side',
        synchronisedScroll: true,
        highlight: true,
        renderNothingWhenEmpty: false,
      };
      var diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
      diff2htmlUi.draw();
      diff2htmlUi.highlightCode();
    });
  </script>
  <body>
    <div id="myDiffElement"></div>
  </body>
</html>

StimulusJS with TypeScript

import { Controller } from '@hotwired/stimulus';

import { Diff2HtmlUI, Diff2HtmlUIConfig } from 'diff2html/lib/ui/js/diff2html-ui-slim.js';

// Requires `npm install highlight.js`
import 'highlight.js/styles/github.css';
import 'diff2html/bundles/css/diff2html.min.css';

export default class extends Controller {
  connect(): void {
    const diff2htmlUi = new Diff2HtmlUI(this.diffElement, this.unifiedDiff, this.diffConfiguration);

    diff2htmlUi.draw();
  }

  get unifiedDiff(): string {
    return this.data.get('unifiedDiff') || '';
  }

  get diffElement(): HTMLElement {
    return this.element as HTMLElement;
  }

  get diffConfiguration(): Diff2HtmlUIConfig {
    return {
      drawFileList: true,
      matching: 'lines',
    };
  }
}

Diff2Html Usage

Diff2Html API

JSON representation of the diff

function parse(diffInput: string, configuration: Diff2HtmlConfig = {}): DiffFile[];

Pretty HTML representation of the diff

function html(diffInput: string | DiffFile[], configuration: Diff2HtmlConfig = {}): string;

Diff2Html Configuration

The HTML output accepts a Javascript object with configuration. Possible options:

outputFormat: the format of the output data: 'line-by-line' or 'side-by-side', default is 'line-by-line'
drawFileList: show a file list before the diff: true or false, default is true
srcPrefix: add a prefix to all source (before changes) filepaths, default is ''. Should match the prefix used when generating the diff.
dstPrefix: add a prefix to all destination (after changes) filepaths, default is ''. Should match the prefix used when generating the diff
diffMaxChanges: number of changed lines after which a file diff is deemed as too big and not displayed, default is undefined
diffMaxLineLength: number of characters in a diff line after which a file diff is deemed as too big and not displayed, default is undefined
diffTooBigMessage: function allowing to customize the message in case of file diff too big (if diffMaxChanges or diffMaxLineLength is set). Will be given a file index as a number and should return a string.
matching: matching level: 'lines' for matching lines, 'words' for matching lines and words or 'none', default is none
matchWordsThreshold: similarity threshold for word matching, default is 0.25
maxLineLengthHighlight: only perform diff changes highlight if lines are smaller than this, default is 10000
diffStyle: show differences level in each line: 'word' or 'char', default is 'word'
renderNothingWhenEmpty: render nothing if the diff shows