diff2html generates pretty HTML diffs from git diff output.

• line-by-line and side-by-side diff

• new and old line numbers

• inserted and removed lines

• GitHub like style

• Code syntax highlight

• Line similarity matching

Go to diff2html

• WebJar

• Node Module

• Bower Package

• Node CLI

• Manually download and import dist/diff2html.min.js into your page

Pretty HTML diff

Diff2Html.getPrettyHtml(exInput, configuration)

Intermediate Json From Git Word Diff Output

Diff2Html.getJsonFromDiff(exInput)

Check out the index.html for a complete example.

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

• inputFormat: the format of the input data: 'diff' or 'json', default is 'diff'
• outputFormat: the format of the output data: 'line-by-line' or 'side-by-side', default is 'line-by-line'
• showFiles: show a file list before the diff: true or false, default is false
• 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
• matchingMaxComparisons: perform at most this much comparisons for line matching a block of changes, default is 2500

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

HTML resource imports

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="dist/diff2html.css">

<!-- Javascripts -->
<script type="text/javascript" src="dist/diff2html.js"></script>
<script type="text/javascript" src="dist/diff2html-ui.js"></script>

Init

var diff2htmlUi = new Diff2HtmlUI({diff: diffString});
// or
var diff2htmlUi = new Diff2HtmlUI({json: diffJson});

Draw

diff2htmlUi.draw('html-target-elem', {inputFormat: 'json', showFiles: true, matching: 'lines'});

Highlight Code

diff2htmlUi.highlightCode('html-target-elem');

Collapse File Summary List

diff2htmlUi.fileListCloseable('html-target-elem', false);

Add the dependencies. Choose one color scheme, and add the main highlight code. If your favourite language is not included in the default package also add its javascript highlight file.

<!-- Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/github.min.css">

<!-- Javascripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/languages/scala.min.js"></script>
<script type="text/javascript" src="dist/diff2html-ui.js"></script>

Invoke the Diff2HtmlUI helper

$(document).ready(function() {
    var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
    diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'});
    diff2htmlUi.highlightCode('#line-by-line');
});

Add the dependencies.

<!-- Javascripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<script type="text/javascript" src="dist/diff2html-ui.js"></script>

Invoke the Diff2HtmlUI helper

$(document).ready(function() {
    var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
    diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'});
    diff2htmlUi.fileListCloseable('#line-by-line', false);
});

This is a developer friendly project, all the contributions are welcome. To contribute just send a pull request with your changes following the guidelines described in CONTRIBUTING.md. I will try to review them as soon as possible.

Copyright 2014-2016 Rodrigo Fernandes. Released under the terms of the MIT license.

This project is inspired in pretty-diff by Scott González.