diff2html

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

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

jsdelivr CDN

WebJar

Node Library

NPM CLI

Manually use from jsdelivr or build the project: 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 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



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

< link rel = " stylesheet " type = " text/css " href = " https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css " />

Diff2Html API

JSON representation of the diff

function parse : DiffFile [ ] ;

Pretty HTML representation of the diff

function html : 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'

: the format of the output data: or , default is drawFileList : show a file list before the diff: true or false , default is true

: show a file list before the diff: or , default is diffStyle : show differences level in each line: word or char , default is word

: show differences level in each line: or , default is matching : matching level: 'lines' for matching lines, 'words' for matching lines and words or 'none' , default is none

: matching level: for matching lines, for matching lines and words or , default is matchWordsThreshold : similarity threshold for word matching, default is 0.25

: similarity threshold for word matching, default is matchingMaxComparisons : perform at most this much comparisons for line matching a block of changes, default is 2500

: perform at most this much comparisons for line matching a block of changes, default is maxLineSizeInBlockForComparison : maximum number os characters of the bigger line in a block to apply comparison, default is 200

: maximum number os characters of the bigger line in a block to apply comparison, default is maxLineLengthHighlight : only perform diff changes highlight if lines are smaller than this, default is 10000

: only perform diff changes highlight if lines are smaller than this, default is renderNothingWhenEmpty : render nothing if the diff shows no change in its comparison: true or false , default is false

: render nothing if the diff shows no change in its comparison: or , default is compiledTemplates : object with previously compiled templates to replace parts of the html

: 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

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

Diff2Html NPM / Node.js Library

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 ;

Diff2Html Examples

Diff2Html Angular Example

Typescript

import * as Diff2Html from ' diff2html ' ; import { Component , OnInit } from ' @angular/core ' ; export class AppDiffComponent implements OnInit { ; constructor { this . init ( ) ; } ngOnInit { } init { ; ; 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 " ]

Diff2Html Vue.js Example

<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

+++ b/server/vendor/golang.org/x/sys/unix/zsyscall_linux_mipsle.go

@@ -1035,6 +1035,17 @@ func Prctl(option int, arg2 uintptr, arg3 uintptr, arg4 uintptr, arg5 uintptr) (



// THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT



+func Pselect(nfd int, r *FdSet, w *FdSet, e *FdSet, timeout *Timespec, sigmask *Sigset_t) (n int, err error) {

+\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)))

+\tn = int(r0)

+\tif e1 != 0 {

+\t\terr = errnoErr(e1)

+\t}

+\treturn

+}

+

+// THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT

+

func read(fd int, p []byte) (n int, err error) {

\tvar _p0 unsafe.Pointer

\tif len(p) > 0 {

', }; }, computed: { prettyHtml() { return Diff2Html.html(this.diffs, { drawFileList: true, matching: 'lines', outputFormat: 'side-by-side', }); }, }, }; </script>

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 [ ] ) constructor ( target : HTMLElement , diffInput ? : string | DiffFile [ ] , config : Diff2HtmlUIConfig = , hljs ? : HighlightJS )

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

: scroll both panes in side-by-side mode: or , default is highlight : syntax highlight the code on the diff: true or false , default is true

: syntax highlight the code on the diff: or , default is fileListToggle : allow the file summary list to be toggled: true or false , default is true

: allow the file summary list to be toggled: or , default is 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

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

Init

const targetElement = document . getElementById ( ' destination-elem-id ' ) ; const configuration = { drawFileList : true , matching : ' lines ' } ; const diff2htmlUi = new Diff2HtmlUI ( targetElement , diffString , configuration ) ; const diff2htmlUi = new Diff2HtmlUI ( targetElement , diffJson , configuration ) ;

Draw

diff2htmlUi . draw ( ) ;

Syntax Highlight

< 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 " /> < 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 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.

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

Big files

Big lines

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

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.