diff2html

What is diff2html?

The diff2html npm package is a tool that allows you to convert unified diff output into HTML. It is useful for visualizing differences between files in a human-readable format, making it easier to review changes in code.

What are diff2html's main functionalities?

Generating HTML from Diff

This feature allows you to convert a unified diff string into an HTML string. The HTML output can then be embedded into a web page for visual representation of the differences.

const Diff2Html = require('diff2html');
const diffString = 'diff --git a/file1 b/file1\nindex 83db48f..f7353a0 100644\n--- a/file1\n+++ b/file1\n@@ -1 +1 @@\n-Hello World\n+Hello Diff2Html';
const outputHtml = Diff2Html.html(diffString);
console.log(outputHtml);

Generating JSON from Diff

This feature allows you to parse a unified diff string into a JSON object. The JSON output can be used for further processing or custom rendering.

const Diff2Html = require('diff2html');
const diffString = 'diff --git a/file1 b/file1\nindex 83db48f..f7353a0 100644\n--- a/file1\n+++ b/file1\n@@ -1 +1 @@\n-Hello World\n+Hello Diff2Html';
const outputJson = Diff2Html.parse(diffString);
console.log(outputJson);

Styling the Diff Output

This feature allows you to customize the HTML output with various options such as drawing a file list and matching lines. This makes the diff output more informative and easier to navigate.

const Diff2Html = require('diff2html');
const diffString = 'diff --git a/file1 b/file1\nindex 83db48f..f7353a0 100644\n--- a/file1\n+++ b/file1\n@@ -1 +1 @@\n-Hello World\n+Hello Diff2Html';
const outputHtml = Diff2Html.html(diffString, { drawFileList: true, matching: 'lines' });
console.log(outputHtml);

Other packages similar to diff2html

diff

The 'diff' package provides a set of tools to compare strings, arrays, and objects. It is more focused on providing the raw differences rather than visualizing them, making it suitable for backend processing and custom diff algorithms.

jsdiff

The 'jsdiff' package is another tool for comparing text differences. It offers a variety of diff algorithms and can output differences in several formats, including JSON. However, it does not provide built-in HTML rendering like diff2html.

git-diff

The 'git-diff' package is designed to generate diffs in the same format as the git diff command. It is useful for applications that need to integrate with git repositories but does not offer HTML rendering capabilities.

README

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

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

Thanks

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

---