diff2html
Advanced tools
The diff2html npm package is a tool that allows you to convert unified diff output into HTML. It is useful for visualizing differences between files in a human-readable format, making it easier to review changes in code.
Generating HTML from Diff
This feature allows you to convert a unified diff string into an HTML string. The HTML output can then be embedded into a web page for visual representation of the differences.
const Diff2Html = require('diff2html');
const diffString = 'diff --git a/file1 b/file1\nindex 83db48f..f7353a0 100644\n--- a/file1\n+++ b/file1\n@@ -1 +1 @@\n-Hello World\n+Hello Diff2Html';
const outputHtml = Diff2Html.html(diffString);
console.log(outputHtml);Generating JSON from Diff
This feature allows you to parse a unified diff string into a JSON object. The JSON output can be used for further processing or custom rendering.
const Diff2Html = require('diff2html');
const diffString = 'diff --git a/file1 b/file1\nindex 83db48f..f7353a0 100644\n--- a/file1\n+++ b/file1\n@@ -1 +1 @@\n-Hello World\n+Hello Diff2Html';
const outputJson = Diff2Html.parse(diffString);
console.log(outputJson);Styling the Diff Output
This feature allows you to customize the HTML output with various options such as drawing a file list and matching lines. This makes the diff output more informative and easier to navigate.
const Diff2Html = require('diff2html');
const diffString = 'diff --git a/file1 b/file1\nindex 83db48f..f7353a0 100644\n--- a/file1\n+++ b/file1\n@@ -1 +1 @@\n-Hello World\n+Hello Diff2Html';
const outputHtml = Diff2Html.html(diffString, { drawFileList: true, matching: 'lines' });
console.log(outputHtml);The 'diff' package provides a set of tools to compare strings, arrays, and objects. It is more focused on providing the raw differences rather than visualizing them, making it suitable for backend processing and custom diff algorithms.
The 'jsdiff' package is another tool for comparing text differences. It offers a variety of diff algorithms and can output differences in several formats, including JSON. However, it does not provide built-in HTML rendering like diff2html.
The 'git-diff' package is designed to generate diffs in the same format as the git diff command. It is useful for applications that need to integrate with git repositories but does not offer HTML rendering capabilities.
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 without
syntax 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 without
syntax 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:
Bellow you can find more details and examples about each option.
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="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
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 truediffStyle: show differences level in each line: word or char, default is wordmatching: matching level: 'lines' for matching lines, 'words' for matching lines and words or 'none', default
is nonematchWordsThreshold: similarity threshold for word matching, default is 0.25matchingMaxComparisons: perform at most this much comparisons for line matching a block of changes, default is
2500maxLineSizeInBlockForComparison: maximum number os characters of the bigger line in a block to apply comparison,
default is 200maxLineLengthHighlight: only perform diff changes highlight if lines are smaller than this, default is 10000renderNothingWhenEmpty: render nothing if the diff shows no change in its comparison: true or false, default is
falsecompiledTemplates: object with previously compiled templates to replace parts of the htmlrawTemplates: object with raw not compiled templates to replace parts of the html
For 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="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 = 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;
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>
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 truehighlight: syntax highlight the code on the diff: true or false, default is truefileListToggle: allow the file summary list to be toggled: true or false, default is truefileListStartVisible: choose if the file summary list starts visible: true or false, default is falseNOTE: 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();
<!-- 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
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(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
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);
});
{"matching": "none"} when invoking diff2htmlThis 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.
FAQs
Fast Diff to colorized HTML
The npm package diff2html receives a total of 138,491 weekly downloads. As such, diff2html popularity was classified as popular.
We found that diff2html demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.ย It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate โXZ for Javaโ library, introducing a backdoor for remote code execution.
