Repository files navigation

diff2html generates pretty HTML diffs from git 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 style

• Code syntax highlight

• Line similarity matching

• Easy code selection

Go todiff2html

• WebJar

• Node Module

• Bower Package

• Node CLI

• Manually download and importdist/diff2html.min.js into your page

Import the stylesheet and the library code

<!-- CSS --><linkrel="stylesheet"type="text/css"href="dist/diff2html.css"><!-- Javascripts --><scripttype="text/javascript"src="dist/diff2html.js"></script>

It will now be available as a global variable namedDiff2Html.

letdif2html=require("diff2html").Diff2Html

Pretty HTML diff

getJsonFromDiff(input: string, configuration?: Options): Result

Intermediate Json From Git Word Diff Output

getPrettyHtml(input: any, configuration?: Options): string

Check out thedocs/diff2html.d.ts for a complete API definition in TypeScript.

Check out thedocs/demo.html for a demo example.

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'
• showFiles: show a file list before the diff:true orfalse, default isfalse
• matching: matching level:'lines' for matching lines,'words' for matching lines and words or'none', default isnone
• synchronisedScroll: scroll both panes in side-by-side mode:true orfalse, default isfalse
• 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 is2500

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

<!-- CSS --><linkrel="stylesheet"type="text/css"href="dist/diff2html.css"><!-- Javascripts --><scripttype="text/javascript"src="dist/diff2html.js"></script><scripttype="text/javascript"src="dist/diff2html-ui.js"></script>

vardiff2htmlUi=newDiff2HtmlUI({diff:diffString});// orvardiff2htmlUi=newDiff2HtmlUI({json:diffJson});

diff2htmlUi.draw('html-target-elem',{inputFormat:'json',showFiles:true,matching:'lines'});

Add the dependencies.Choose one color scheme, and add the main highlight code.If your favourite language is not included in the default package also add its javascript highlight file.

<!-- Stylesheet --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/github.min.css"><!-- Javascripts --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/languages/scala.min.js"></script><scripttype="text/javascript"src="dist/diff2html-ui.js"></script>

Invoke the Diff2HtmlUI helper

$(document).ready(function(){vardiff2htmlUi=newDiff2HtmlUI({diff:lineDiffExample});diff2htmlUi.draw('#line-by-line',{inputFormat:'json',showFiles:true,matching:'lines'});diff2htmlUi.highlightCode('#line-by-line');});

Add the dependencies.

<!-- Javascripts --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script><scripttype="text/javascript"src="dist/diff2html-ui.js"></script>

Invoke the Diff2HtmlUI helper

$(document).ready(function(){vardiff2htmlUi=newDiff2HtmlUI({diff:lineDiffExample});diff2htmlUi.draw('#line-by-line',{inputFormat:'json',showFiles:true,matching:'lines'});diff2htmlUi.fileListCloseable('#line-by-line',false);});

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 inCONTRIBUTING.md.I will try to review them as soon as possible.

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

This project is inspired inpretty-diff byScott González.