Need help with diff2html?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Global Rank
#65,981
Topics of expertise
unified
http4s
akka-ht...
scala-n...
Location
Lisbon
1.6K Stars 181 Forks MIT License 533 Commits 8 Opened issues

Description

Pretty diff to html javascript library (diff2html)

Services available

!
?

Need anything else?

Contributors list

diff2html

Codacy Quality Badge Codacy Coverage Badge CircleCI

npm Dependency Status devDependency Status jsdelivr CDN Downloads

node npm npm All Contributors Gitter

diff2html generates pretty HTML diffs from git diff or unified diff output.

NPM

Table of Contents

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 visual style

  • Code syntax highlight

  • Line similarity matching

  • Easy code selection

Online Example

Go to diff2html

Distributions

Usage

Diff2Html can be used in various ways as listed in the distributions section. The two main ways are:

  • 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.
  • 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.

Bellow you can find more details and examples about each option.

Diff2Html Usage

To load correctly in the Browser you always need to include the stylesheet in the final HTML.

Import the stylesheet


Diff2Html API

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;

Diff2Html Configuration

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
  • diffStyle
    : show differences level in each line:
    word
    or
    char
    , default is
    word
  • matching
    : matching level:
    'lines'
    for matching lines,
    'words'
    for matching lines and words or
    'none'
    , default is
    none
  • matchWordsThreshold
    : similarity threshold for word matching, default is
    0.25
  • matchingMaxComparisons
    : perform at most this much comparisons for line matching a block of changes, default is
    2500
  • maxLineSizeInBlockForComparison
    : maximum number os characters of the bigger line in a block to apply comparison, default is
    200
  • maxLineLengthHighlight
    : only perform diff changes highlight if lines are smaller than this, default is
    10000
  • renderNothingWhenEmpty
    : render nothing if the diff shows no change in its comparison:
    true
    or
    false
    , default is
    false
  • compiledTemplates
    : object with previously compiled templates to replace parts of the html
  • rawTemplates
    : object with raw not compiled templates to replace parts of the html > For more information regarding the possible templates look into > src/templates

Diff2Html Browser

Import the stylesheet and the library code



It will now be available as a global variable named

Diff2Html
.
document.addEventListener('DOMContentLoaded', () => {
  var diffHtml = global.Diff2Html.html('', {
    drawFileList: true,
    matching: 'lines',
    outputFormat: 'side-by-side',
  });
  document.getElementById('destination-elem-id').innerHTML = diffHtml;
});

Diff2Html NPM / Node.js Library

const Diff2html = require('diff2html');
const diffJson = Diff2html.parse('');
const diffHtml = Diff2html.html(diffJson, { drawFileList: true });
document.getElementById('destination-elem-id').innerHTML = diffHtml;

Diff2Html Examples

Diff2Html Angular Example

  • 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\[email protected]@ -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
<title>diff2html</title>


<div></div>

  • .angular-cli.json
    - Add styles
"styles": [
  "diff2html.min.css"
]

Diff2Html Vue.js Example

Diff2HtmlUI Usage

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

Diff2HtmlUI API

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

Diff2HtmlUI Configuration

  • 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

NOTE: All the options from Diff2Html are also valid configurations in Diff2HtmlUI

Diff2HtmlUI Browser

Mandatory HTML resource imports



Init

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);

Draw

diff2htmlUi.draw();

Syntax Highlight




Pass the option

highlight
with value true or invoke
diff2htmlUi.highlightCode()
after
diff2htmlUi.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();
});

Collapsable File Summary List

Add the dependencies.


Invoke the Diff2HtmlUI helper Pass the option

fileListToggle
with value true or invoke
diff2htmlUi.fileListToggle()
after
diff2htmlUi.draw()
.
document.addEventListener('DOMContentLoaded', () => {
  const targetElement = document.getElementById('myDiffElement');
  var diff2htmlUi = new Diff2HtmlUI(targetElement, lineDiffExample, { 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

Contribute

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):


Rodrigo Fernandes

💻

stockmind

💻

Ivan Vorontsov

💻

Nick Brewer

💻

Matt Wade

🐛

Rafael Cortês

💻

Nuno Teixeira

💻

Koki Oyatsu

🐛

James Monger

📖

Wessel van der Pal

🛡️

jk-kim

💻

Sergey Semenov

🐛

Nick Mitchell

🐛

Samir Aguiar

📖

pubkey

📖

Илья

📖

Mohamed Akram

🐛

Eugene Marcotte

💻

Dima Sabanin

🚧

Ben Abbott

📖

弘树@阿里

🐛

Mikko Rantanen

🐛

Ann

📖

escitalopram

🐛 💻

dependabot[bot]

🛡️ 🚧

Josh Goldberg

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

License

Copyright 2014-present Rodrigo Fernandes. Released under the terms of the MIT license.

Thanks

This project is inspired in pretty-diff by Scott González.


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.