diff2html generates pretty HTML diffs from git or unified diff output.
-
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
Go to diff2html
- WebJar
- Node Module
- Node CLI
- Manually download and import:
- Browser
- bundles/js/diff2html.min.js - includes the diff parser and html generator
- bundles/js/diff2html-ui.min.js - includes the wrapper of diff2html that adds highlight, synchronized scroll, and other nice features
- Node.js
- lib/diff2html.js - targeted for es5, includes the diff parser and html generator
- lib-esm/diff2html.js - targeted for es6 - includes the diff parser and html generator
- Browser
To load correctly in the Browser you always need to include the stylesheet in the final HTML.
Import the stylesheet
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="bundles/css/diff2html.min.css" />You can also refer to it from a CDN like CDNJS.
Import the stylesheet and the library code
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="bundles/css/diff2html.min.css" />
<!-- Javascripts -->
<script type="text/javascript" src="bundles/js/diff2html.min.js"></script>It will now be available as a global variable named Diff2Html.
document.addEventListener("DOMContentLoaded", () => {
var diffHtml = global.Diff2Html.html("<Unified Diff String>", {
drawFileList: true,
matching: "lines",
outputFormat: "side-by-side"
});
document.getElementById("destination-elem-id").innerHTML = diffHtml;
});const Diff2html = require("diff2html");
const diffJson = Diff2html.parse("<Unified Diff String>");
const diffHtml = Diff2html.html(diffJson, { drawFileList: true });
document.getElementById("destination-elem-id").innerHTML = diffHtml;- Typescript
import * as Diff2Html from "diff2html";
import { Component, OnInit } from "@angular/core";
export class AppDiffComponent implements OnInit {
outputHtml: string;
constructor() {
this.init();
}
ngOnInit() {}
init() {
let strInput =
"--- a/server/vendor/golang.org/x/sys/unix/zsyscall_linux_mipsle.go\n+++ b/server/vendor/golang.org/x/sys/unix/zsyscall_linux_mipsle.go\n@@ -1035,6 +1035,17 @@ func Prctl(option int, arg2 uintptr, arg3 uintptr, arg4 uintptr, arg5 uintptr) (\n \n // THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT\n \n+func Pselect(nfd int, r *FdSet, w *FdSet, e *FdSet, timeout *Timespec, sigmask *Sigset_t) (n int, err error) {\n+\tr0, _, e1 := Syscall6(SYS_PSELECT6, uintptr(nfd), uintptr(unsafe.Pointer(r)), uintptr(unsafe.Pointer(w)), uintptr(unsafe.Pointer(e)), uintptr(unsafe.Pointer(timeout)), uintptr(unsafe.Pointer(sigmask)))\n+\tn = int(r0)\n+\tif e1 != 0 {\n+\t\terr = errnoErr(e1)\n+\t}\n+\treturn\n+}\n+\n+// THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT\n+\n func read(fd int, p []byte) (n int, err error) {\n \tvar _p0 unsafe.Pointer\n \tif len(p) > 0 {\n";
let outputHtml = Diff2Html.html(strInput, { drawFileList: true, matching: "lines" });
this.outputHtml = outputHtml;
}
}- HTML
<!DOCTYPE html>
<html>
<head>
<title>diff2html</title>
</head>
<body>
<div [innerHtml]="outputHtml"></div>
</body>
</html>.angular-cli.json- Add styles
"styles": [
"diff2html.min.css"
]<template>
<div v-html="prettyHtml" />
</template>
<script>
import * as Diff2Html from "diff2html";
import "diff2html/bundles/css/diff2html.min.css";
export default {
data() {
return {
diffs:
"--- a/server/vendor/golang.org/x/sys/unix/zsyscall_linux_mipsle.go\n+++ b/server/vendor/golang.org/x/sys/unix/zsyscall_linux_mipsle.go\n@@ -1035,6 +1035,17 @@ func Prctl(option int, arg2 uintptr, arg3 uintptr, arg4 uintptr, arg5 uintptr) (\n \n // THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT\n \n+func Pselect(nfd int, r *FdSet, w *FdSet, e *FdSet, timeout *Timespec, sigmask *Sigset_t) (n int, err error) {\n+\tr0, _, e1 := Syscall6(SYS_PSELECT6, uintptr(nfd), uintptr(unsafe.Pointer(r)), uintptr(unsafe.Pointer(w)), uintptr(unsafe.Pointer(e)), uintptr(unsafe.Pointer(timeout)), uintptr(unsafe.Pointer(sigmask)))\n+\tn = int(r0)\n+\tif e1 != 0 {\n+\t\terr = errnoErr(e1)\n+\t}\n+\treturn\n+}\n+\n+// THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT\n+\n func read(fd int, p []byte) (n int, err error) {\n \tvar _p0 unsafe.Pointer\n \tif len(p) > 0 {\n"
};
},
computed: {
prettyHtml() {
return Diff2Html.getPrettyHtml(this.diffs, {
inputFormat: "diff",
drawFileList: true,
matching: "lines",
outputFormat: "side-by-side"
});
}
}
};
</script>Intermediate Json From Git Word Diff Output
getJsonFromDiff(input: string, configuration?: Options): Result[]
Pretty HTML diff
getPrettyHtml(input: any, configuration?: Options): string
Check out the docs/demo.html for a demo 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'drawFileList: show a file list before the diff:trueorfalse, default isfalsediffStyle: show differences level in each line:wordorchar, default iswordmatching: matching level:'lines'for matching lines,'words'for matching lines and words or'none', default isnonematchWordsThreshold: similarity threshold for word matching, default is 0.25matchingMaxComparisons: perform at most this much comparisons for line matching a block of changes, default is2500maxLineSizeInBlockForComparison: maximum number os characters of the bigger line in a block to apply comparison, default is200maxLineLengthHighlight: only perform diff changes highlight if lines are smaller than this, default is10000compiledTemplates: object with previously compiled templates to replace parts of the htmlrawTemplates: object with raw not compiled templates to replace parts of the htmlrenderNothingWhenEmpty: render nothing if the diff shows no change in its comparison:trueorfalse, default isfalseFor more information regarding the possible templates look into src/templates
** Diff2HtmlUI Helper Options **
synchronisedScroll: scroll both panes in side-by-side mode:trueorfalse, default isfalse
For more information regarding the possible templates look into src/templates
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
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="bundles/css/diff2html.min.css" />
<!-- Javascripts -->
<script type="text/javascript" src="bundles/js/diff2html-ui.min.js"></script>const targetElement = document.getElementById("destination-elem-id");
const configuration = { drawFileList: true, matching: "lines" };
const diff2htmlUi = new Diff2HtmlUI(diffString, targetElement, configuration);
// or
const diff2htmlUi = new Diff2HtmlUI(diffJson, targetElement, configuration);diff2htmlUi.draw();<!-- Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css" />
<link rel="stylesheet" type="text/css" href="bundles/css/diff2html.min.css" />
<!-- Javascripts -->
<script type="text/javascript" src="bundles/js/diff2html-ui.min.js"></script>Pass the option
highlightwith value true or invokediff2htmlUi.highlightCode()afterdiff2htmlUi.draw().
document.addEventListener("DOMContentLoaded", () => {
const diffString = `diff --git a/sample.js b/sample.js
index 0000001..0ddf2ba
--- a/sample.js
+++ b/sample.js
@@ -1 +1 @@
-console.log("Hello World!")
+console.log("Hello from Diff2Html!")`;
const targetElement = document.getElementById("myDiffElement");
const configuration = { inputFormat: "json", drawFileList: true, matching: "lines", highlight: true };
const diff2htmlUi = new Diff2HtmlUI(diffString, targetElement, configuration);
diff2htmlUi.draw();
diff2htmlUi.highlightCode();
});Add the dependencies.
<!-- Javascripts -->
<script type="text/javascript" src="bundles/js/diff2html-ui.min.js"></script>Invoke the Diff2HtmlUI helper Pass the option
fileListTogglewith value true or invokediff2htmlUi.fileListToggle()afterdiff2htmlUi.draw().
document.addEventListener("DOMContentLoaded", () => {
const targetElement = document.getElementById("myDiffElement");
var diff2htmlUi = new Diff2HtmlUI(lineDiffExample, targetElement, { drawFileList: true, matching: "lines" });
diff2htmlUi.draw();
diff2htmlUi.fileListToggle(false);
});- Big files
- Big lines
- Disable the line matching algorithm, by setting the option
{"matching": "none"}when invoking diff2html
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.
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
Copyright 2014-2016 Rodrigo Fernandes. Released under the terms of the MIT license.
This project is inspired in pretty-diff by Scott GonzΓ‘lez.