Wolfgang Illmeyer 7335c3bab3 Enhancements for highlighting

1. Fixed a bug that prevented highlighting when more lines were deleted
from a replacement block than added

2. Added similarity search feature to match similar lines for
highlighting.

3. Highlighting: Support for matching "ins" and "del" markers to allow
for a "change" marker

4. Bugfix: All lines are now split into prefix and content spans

2015-11-27 11:39:08 +01:00

3.6 KiB

Raw Blame History

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
Line similarity matching

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 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.

Configuration

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
matchWords: matches changed words in diff output lines: true or false, default is false
matchWordsThreshold: similarity threshold for word matching, default is 0.25

Syntax Highlight

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/8.6/styles/github.min.css">

<!-- Javascripts -->
<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.getPrettyHtml(diffJson, { inputFormat: 'json' });
    document.getElementById("side-by-side").innerHTML = Diff2Html.getPrettyHtml(diffJson, { inputFormat: 'json', outputFormat: 'side-by-side' });

    // 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.6 KiB Raw Blame History