Diff to Html by rtfpessoa

Diff to Html generates pretty HTML diffs from git diff output.

Features

line-by-line and side-by-side diff
new and old line numbers
inserted and removed lines
GitHub like style
Code syntax highlight

Online Example

Go to Diff2HTML

Distributions

WebJar
Node Module
Bower Package
Node CLI
Manually download and import dist/diff2html.min.js into your page

How to use

Pretty Line-by-Line Html From Git Word Diff Output

Diff2Html.getPrettyHtmlFromDiff(exInput)

Pretty Side-by-Side Html From Git Word Diff Output

Diff2Html.getPrettySideBySideHtmlFromDiff(exInput)

Intermediate Json From Git Word Diff Output

Diff2Html.getJsonFromDiff(exInput)

Pretty Line-by-Line Html From Json

Diff2Html.getPrettyHtmlFromJson(exInput)

Pretty Side-by-Side Html From Json

Diff2Html.getPrettySideBySideHtmlFromJson(exInput)

Check out the index.html for a complete example.

Sintax Hightlight

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. jQuery is optional, just using it to help managing the highlight.

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

<!-- Javascripts -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/languages/scala.min.js"></script>

Invoke the highlightjs plugin

document.addEventListener("DOMContentLoaded", function () {
    // parse the diff to json
    var diffJson = Diff2Html.getJsonFromDiff(lineDiffExample);

    // collect all the file extensions in the json
    var allFileLanguages = diffJson.map(function (line) {
        return line.language;
    });

    // remove duplicated languages
    var distinctLanguages = allFileLanguages.filter(function (v, i) {
        return allFileLanguages.indexOf(v) == i;
    });

    // pass the languages to the highlightjs plugin
    hljs.configure({languages: distinctLanguages});

    // generate and inject the diff HTML into the desired place
    document.getElementById("line-by-line").innerHTML = Diff2Html.getPrettyHtmlFromJson(diffJson);
    document.getElementById("side-by-side").innerHTML = Diff2Html.getPrettySideBySideHtmlFromJson(diffJson);

    // collect all the code lines and execute the highlight on them
    var codeLines = document.getElementsByClassName("d2h-code-line-ctn");
    [].forEach.call(codeLines, function (line) {
        hljs.highlightBlock(line);
    });
});

Contributions

All the contributions are welcome.

To contribute just send a pull request with your changes and I will review it asap.

License

Thanks

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

3.4 KiB Raw Blame History