diff2html generates pretty HTML diffs from git diff 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 visual style
Code syntax highlight
Line similarity matching
Easy code selection
Go to diff2html
highlight.js
supported languageshighlight.js
supported languageshighlight.js
implementation. You can use it withoutsyntax highlight or by passing your own implementation with the languages you preferhighlight.js
supported languageshighlight.js
supported languageshighlight.js
supported languageshighlight.js
supported languageshighlight.js
implementation. You can use it withoutsyntax highlight or by passing your own implementation with the languages you preferDiff2Html can be used in various ways as listed in the distributions section. The two main ways are:
Below you can find more details and examples about each option.
diff2html accepts the text contents of aunified diff or the superset format gitdiff (https://git-scm.com/docs/git-diff) (not combined or word diff). To provide multiples files as input justconcatenate 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
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
synchronisedScroll
: scroll both panes in side-by-side mode: true
or false
, default is true
highlight
: syntax highlight the code on the diff: true
or false
, default is true
fileListToggle
: allow the file summary list to be toggled: true
or false
, default is true
fileListStartVisible
: choose if the file summary list starts visible: true
or false
, default is false
fileContentToggle
: allow each file contents to be toggled: true
or false
, default is true
<!-- 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/9.13.1/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
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 = { 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="https://cdn.jsdelivr.net/npm/diff2html/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);
});
<!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>
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: true
or false
, default is true
srcPrefix
: add a prefix to all source (before changes) filepaths, default is ''
. Should match the prefix used whengenerating the diff.dstPrefix
: add a prefix to all destination (after changes) filepaths, default is ''
. Should match the prefix usedwhen generating the diffdiffMaxChanges
: number of changed lines after which a file diff is deemed as too big and not displayed, default isundefined
diffMaxLineLength
: number of characters in a diff line after which a file diff is deemed as too big and notdisplayed, default is undefined
diffTooBigMessage
: function allowing to customize the message in case of file diff too big (if diffMaxChanges
ordiffMaxLineLength
is 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'
, defaultis none
matchWordsThreshold
: similarity threshold for word matching, default is 0.25
maxLineLengthHighlight
: only perform diff changes highlight if lines are smaller than this, default is 10000
diffStyle
: show differences level in each line: 'word'
or 'char'
, default is 'word'
renderNothingWhenEmpty
: render nothing if the diff shows no change in its comparison: true
or false
, default isfalse
matchingMaxComparisons
: 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 is 200
compiledTemplates
: object (Hogan.js template values) with previouslycompiled 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 intosrc/templates
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);
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;
}
}
<!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>
{"matching": "none"}
when invoking diff2htmlThis is a developer friendly project, all the contributions are welcome. To contribute just send a pull request withyour 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 byScott González.
npm install -g diff2html-cli 示例: diff2html -F my-pretty-diff.html HEAD~6 导出前6个commit 的diff diff2html --help 可以查看帮助文档 分享几个非常好用的VSCode插件 Markdown All in One review Markdown PDF Markdown Preview Mermai
在比较两个文件的时候,有一个文件存在一些空行,或者两个文件的换行符不一致,或者存在tab和空格显示的不同,在比较的时候希望忽略掉这些空白字符,只比较文本是否一致,并在diff返回显示的时候将返回内容并列显示,且只显示文件中不同的内容,不显示序号或者行号 查看文本空白行的行号 1.grep grep -n ^$ file.txt grep -n 显示符合条件的行号 ^ 表示行首 $ 表示行尾,^$