diff2html generates pretty HTML diffs from git diff or unified diff output.
- Features
- Online Example
- Distributions
- Usage
- Diff Text Input
- Diff2HtmlUI Usage
- Diff2Html Usage
- Troubleshooting
- Contribute
- Contributors
- License
- Thanks
-
Supports git and unified diffs
-
Line by line and Side by side diff
-
New and old line numbers
-
Inserted and removed lines
-
GitHub like visual style
-
Code syntax highlight
-
Line similarity matching
-
Easy code selection
Go to diff2html
- jsdelivr CDN
- WebJar
- Node Library
- NPM CLI
- Manually use from jsdelivr or build the project:
- Browser / Bundle
- Parser and HTML Generator
- bundles/js/diff2html.min.js - includes the diff parser and html generator
- Wrapper and helper adding syntax highlight, synchronized scroll, and other nice features
- bundles/js/diff2html-ui.min.js -
includes the wrapper of diff2html with highlight for all
highlight.jssupported languages - bundles/js/diff2html-ui-slim.min.js -
includes the wrapper of diff2html with "the most common"
highlight.jssupported languages - bundles/js/diff2html-ui-base.min.js -
includes the wrapper of diff2html without including a
highlight.jsimplementation. You can use it without syntax highlight or by passing your own implementation with the languages you prefer
- bundles/js/diff2html-ui.min.js -
includes the wrapper of diff2html with highlight for all
- Parser and HTML Generator
- NPM / Node.js library
- ES5
- lib/diff2html.js - includes the diff parser and html generator
- lib/ui/js/diff2html-ui.js - includes the
wrapper of diff2html with highlight for all
highlight.jssupported languages - lib/ui/js/diff2html-ui-slim.js -
includes the wrapper of diff2html with "the most common"
highlight.jssupported languages - lib/ui/js/diff2html-ui-base.js
- ES6
- lib-esm/diff2html.js - includes the diff parser and html generator
- lib/ui/js/diff2html-ui.js - includes the
wrapper of diff2html with highlight for all
highlight.jssupported languages - lib/ui/js/diff2html-ui-slim.js -
includes the wrapper of diff2html with "the most common"
highlight.jssupported languages - lib/ui/js/diff2html-ui-base.js -
includes the wrapper of diff2html without including a
highlight.jsimplementation. You can use it without syntax highlight or by passing your own implementation with the languages you prefer
- ES5
- Browser / Bundle
Diff2Html can be used in various ways as listed in the distributions section. The two main ways are:
- Diff2HtmlUI: using this wrapper makes it easy to inject the html in the DOM and adds some nice features to the diff, like syntax highlight.
- Diff2Html: using the parser and html generator directly from the library gives you complete control about what you can do with the json or html generated.
Below you can find more details and examples about each option.
diff2html accepts the text contents of a unified diff or the superset format git diff (https://git-scm.com/docs/git-diff) (not combined or word diff). To provide multiples files as input just concatenate the diffs (just like the output of git diff).
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
Create a Diff2HtmlUI instance
constructor(target: HTMLElement, diffInput?: string | DiffFile[]) // diff2html-ui, diff2html-ui-slim
constructor(target: HTMLElement, diffInput?: string | DiffFile[], config: Diff2HtmlUIConfig = {}, hljs?: HighlightJS) // diff2html-ui-baseGenerate and inject in the document the Pretty HTML representation of the diff
draw(): voidEnable extra features
synchronisedScroll(): void
fileListToggle(startVisible: boolean): void
highlightCode(): void
stickyFileHeaders(): voidsynchronisedScroll: scroll both panes in side-by-side mode:trueorfalse, default istruehighlight: syntax highlight the code on the diff:trueorfalse, default istruefileListToggle: allow the file summary list to be toggled:trueorfalse, default istruefileListStartVisible: choose if the file summary list starts visible:trueorfalse, default isfalsefileContentToggle: allow each file contents to be toggled:trueorfalse, default istruestickyFileHeaders: make file headers sticky:trueorfalse, default istrue- All the options from Diff2Html are also valid configurations in Diff2HtmlUI
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
<!-- Javascripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>const targetElement = document.getElementById('destination-elem-id');
const configuration = { drawFileList: true, matching: 'lines' };
const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
// or
const diff2htmlUi = new Diff2HtmlUI(targetElement, diffJson, configuration);diff2htmlUi.draw();NOTE: The highlight.js css should come before the diff2html css
<!-- Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
<!-- Javascripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/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 = { drawFileList: true, matching: 'lines', highlight: true };
const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
diff2htmlUi.draw();
diff2htmlUi.highlightCode();
});When using the auto color scheme, you will need to specify both the light and dark themes for highlight.js to use.
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css"
media="screen and (prefers-color-scheme: light)"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css"
media="screen and (prefers-color-scheme: dark)"
/>Add the dependencies.
<!-- Javascripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/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(targetElement, lineDiffExample, { drawFileList: true, matching: 'lines' });
diff2htmlUi.draw();
diff2htmlUi.fileListToggle(false);
});<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<!-- Make sure to load the highlight.js CSS file before the Diff2Html CSS file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css" />
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"
/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
</head>
<script>
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!")`;
document.addEventListener('DOMContentLoaded', function () {
var targetElement = document.getElementById('myDiffElement');
var configuration = {
drawFileList: true,
fileListToggle: false,
fileListStartVisible: false,
fileContentToggle: false,
matching: 'lines',
outputFormat: 'side-by-side',
synchronisedScroll: true,
highlight: true,
renderNothingWhenEmpty: false,
};
var diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
diff2htmlUi.draw();
diff2htmlUi.highlightCode();
});
</script>
<body>
<div id="myDiffElement"></div>
</body>
</html>import { Controller } from '@hotwired/stimulus';
import { Diff2HtmlUI, Diff2HtmlUIConfig } from 'diff2html/lib/ui/js/diff2html-ui-slim.js';
// Requires `npm install highlight.js`
import 'highlight.js/styles/github.css';
import 'diff2html/bundles/css/diff2html.min.css';
export default class extends Controller {
connect(): void {
const diff2htmlUi = new Diff2HtmlUI(this.diffElement, this.unifiedDiff, this.diffConfiguration);
diff2htmlUi.draw();
}
get unifiedDiff(): string {
return this.data.get('unifiedDiff') || '';
}
get diffElement(): HTMLElement {
return this.element as HTMLElement;
}
get diffConfiguration(): Diff2HtmlUIConfig {
return {
drawFileList: true,
matching: 'lines',
};
}
}JSON representation of the diff
function parse(diffInput: string, configuration: Diff2HtmlConfig = {}): DiffFile[];Pretty HTML representation of the diff
function html(diffInput: string | DiffFile[], configuration: Diff2HtmlConfig = {}): string;The HTML output accepts a Javascript object with configuration. Possible options:
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 istruesrcPrefix: add a prefix to all source (before changes) filepaths, default is''. Should match the prefix used when generating the diff.dstPrefix: add a prefix to all destination (after changes) filepaths, default is''. Should match the prefix used when generating the diffdiffMaxChanges: number of changed lines after which a file diff is deemed as too big and not displayed, default isundefineddiffMaxLineLength: number of characters in a diff line after which a file diff is deemed as too big and not displayed, default isundefineddiffTooBigMessage: function allowing to customize the message in case of file diff too big (ifdiffMaxChangesordiffMaxLineLengthis set). Will be given a file index as a number and should return a string.matching: matching level:'lines'for matching lines,'words'for matching lines and words or'none', default isnonematchWordsThreshold: similarity threshold for word matching, default is0.25maxLineLengthHighlight: only perform diff changes highlight if lines are smaller than this, default is10000diffStyle: show differences level in each line:'word'or'char', default is'word'renderNothingWhenEmpty: render nothing if the diff shows no change in its comparison:trueorfalse, default isfalsematchingMaxComparisons: perform at most this much comparisons for line matching a block of changes, default is2500maxLineSizeInBlockForComparison: maximum number of characters of the bigger line in a block to apply comparison, default is200compiledTemplates: object (Hogan.js template values) with previously compiled templates to replace parts of the html, default is{}. For example:{ "tag-file-changed": Hogan.compile("<span class="d2h-tag d2h-changed d2h-changed-tag">MODIFIED</span>") }rawTemplates: object (string values) with raw not compiled templates to replace parts of the html, default is{}. For example:{ "tag-file-changed": "<span class="d2h-tag d2h-changed d2h-changed-tag">MODIFIED</span>" }For more information regarding the possible templates look into src/templates
highlightLanguages: Map of extension to language name, used for highlighting. This overrides the default language detection based on file extensions.colorScheme: color scheme to use for the diff, default islight. Possible values arelight,dark, andautowhich will use the browser's preferred color scheme.
Import the stylesheet and the library code.
To load correctly in the Browser you need to include the stylesheet in the final HTML.
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
<!-- Javascripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html.min.js"></script>It will now be available as a global variable named Diff2Html.
document.addEventListener('DOMContentLoaded', () => {
var diffHtml = 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 });
console.log(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.html(this.diffs, {
drawFileList: true,
matching: 'lines',
outputFormat: 'side-by-side',
});
},
},
};
</script>- 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-present Rodrigo Fernandes. Released under the terms of the MIT license.
This project is inspired in pretty-diff by Scott GonzΓ‘lez.
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
![@dependabot-preview[bot]](https://avatars.githubusercontent.com/in/2141?s=64&v=4){kind=small}
