diff2html generates pretty HTML diffs from git diff or unified diff output.
- Features
- Online Example
- Distributions
- Diff2Html Usage
- Diff2HtmlUI
- 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
- WebJar
- Node Library
- NPM CLI
- Manually download and import:
- 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.js
supported languages - bundles/js/diff2html-ui-slim.min.js - includes the wrapper of diff2html
with "the most common"
highlight.js
supported languages - bundles/js/diff2html-ui-base.min.js - includes the wrapper of diff2html
without including a
highlight.js
implementation. 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.js
supported languages - lib/ui/js/diff2html-ui-slim.js - includes the wrapper of diff2html with "the
most common"
highlight.js
supported 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.js
supported languages - lib/ui/js/diff2html-ui-slim.js - includes the wrapper of diff2html with "the
most common"
highlight.js
supported languages - lib/ui/js/diff2html-ui-base.js - includes the wrapper of diff2html without
including a
highlight.js
implementation. You can use it without syntax highlight or by passing your own implementation with the languages you prefer
- ES5
- Browser / Bundle
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.
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;
Check out the docs/demo.html for a demo example.
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:true
orfalse
, default isfalse
diffStyle
: show differences level in each line:word
orchar
, default isword
matching
: matching level:'lines'
for matching lines,'words'
for matching lines and words or'none'
, default isnone
matchWordsThreshold
: similarity threshold for word matching, default is 0.25matchingMaxComparisons
: perform at most this much comparisons for line matching a block of changes, default is2500
maxLineSizeInBlockForComparison
: maximum number os characters of the bigger line in a block to apply comparison, default is200
maxLineLengthHighlight
: only perform diff changes highlight if lines are smaller than this, default is10000
renderNothingWhenEmpty
: render nothing if the diff shows no change in its comparison:true
orfalse
, default isfalse
compiledTemplates
: object with previously compiled templates to replace parts of the htmlrawTemplates
: object with raw not compiled templates to replace parts of the htmlFor more information regarding the possible templates look into src/templates
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.html(this.diffs, {
drawFileList: true,
matching: 'lines',
outputFormat: 'side-by-side',
});
},
},
};
</script>
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-base
Generate and inject in the document the Pretty HTML representation of the diff
draw(): void
Enable extra features
synchronisedScroll(): void
fileListToggle(startVisible: boolean): void
highlightCode(): void
smartSelection(): void
Check out the docs/demo.html for a demo example.
synchronisedScroll
: scroll both panes in side-by-side mode:true
orfalse
, default istrue
highlight
: syntax highlight the code on the diff:true
orfalse
, default istrue
fileListToggle
: allow the file summary list to be toggled:true
orfalse
, default istrue
fileListStartVisible
: choose if the file summary list starts visible:true
orfalse
, default isfalse
smartSelection
: allow selection of the code without including line numbers of line prefixes:true
orfalse
, default istrue
NOTE: All the options from Diff2Html are also valid configurations in Diff2HtmlUI
<!-- 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(targetElement, diffString, configuration);
// or
const diff2htmlUi = new Diff2HtmlUI(targetElement, diffJson, 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
highlight
with 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(targetElement, diffString, 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
fileListToggle
with 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);
});
- 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.