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

diff2html

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

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 style

• Code syntax highlight

• Line similarity matching

• Easy code selection

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

Browser Library

Import the stylesheet and the library code

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

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

It will now be available as a global variable named Diff2Html.

Node Module

let dif2html = require("diff2html").Diff2Html

API

Pretty HTML diff

getJsonFromDiff(input: string, configuration?: Options): Result

Intermediate Json From Git Word Diff Output

getPrettyHtml(input: any, configuration?: Options): string

Check out the docs/diff2html.d.ts for a complete API definition in TypeScript.

Check out the docs/demo.html for a demo 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
• matching: matching level: 'lines' for matching lines, 'words' for matching lines and words or 'none', default is none
• synchronisedScroll: scroll both panes in side-by-side mode: true or false, default is false
• 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
• templates: object with previously compiled templates to replace parts of the html
• rawTemplates: object with raw not compiled templates to replace parts of the html

For more information regarding the possible templates look into src/templates

Diff2HtmlUI Helper

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

How to use

Mandatory 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'});

Syntax Highlight

Add the dependencies. Choose one color scheme, and add the main highlight code. Note that the stylesheet for the color scheme must come before the main diff2html stylesheet. 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.6.0/styles/github.min.css">
<link rel="stylesheet" type="text/css" href="dist/diff2html.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.6.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.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');
});

Collapsable File Summary List

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);
});

Troubleshooting

1. Out of memory or Slow execution

Causes:

• Big files
• Big lines

Fix:

• Disable the line matching algorithm, by setting the option {"matching": "none"} when invoking diff2html

Contributions

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.

License

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

Thanks

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

---