diff2html v3.4.48
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
- 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
How to use
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.
Browser Library
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;
});
Node Module
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;
Angular
- 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"
]
Vue.js
<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>
API
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.
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'
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
compiledTemplates
: 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:true
orfalse
, default isfalse
For more information regarding the possible templates look into src/templates
Diff2HtmlUI Helper Options
synchronisedScroll
: scroll both panes in side-by-side mode:true
orfalse
, default isfalse
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="bundles/css/diff2html.min.css" />
<!-- Javascripts -->
<script type="text/javascript" src="bundles/js/diff2html-ui.min.js"></script>
Init
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);
Draw
diff2htmlUi.draw();
Syntax Highlight
<!-- 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(diffString, targetElement, configuration);
diff2htmlUi.draw();
diff2htmlUi.highlightCode();
});
Collapsable File Summary List
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(lineDiffExample, targetElement, { drawFileList: true, matching: "lines" });
diff2htmlUi.draw();
diff2htmlUi.fileListToggle(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.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
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.
7 days ago
7 days ago
21 days ago
4 months ago
4 months ago
9 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago