GitHub-like HTML Diff Tool – diff2html.js

Category: Javascript , Recommended | February 8, 2019
Author: rtfpessoa
Views Total: 6,284
Official Page: Go to website
Last Update: February 8, 2019
License: MIT


GitHub-like HTML Diff Tool – diff2html.js


diff2html.js is a tiny JavaScript library used to create a Github-style HTML diff tool with syntax highlighting for git diff output.


# Yarn
$ yarn add diff2html

$ npm install diff2html --save

How to use it:

Include the diff2html.js and other required resources on the web page.

<!-- diff2html files -->
<link rel="stylesheet" href="dist/diff2html.min.css">
<script src="dist/diff2html.min.js"></script>

<!-- highlight.js -->
<link rel="stylesheet" href="/path/to/github.min.css">
<script src="/path/to/highlight.min.js"></script>
<script src="/path/to/scala.min.js"></script>

Basic usage.

// Pretty HTML diff
Diff2Html.getPrettyHtml(exInput, configuration)

// Intermediate Json From Git Word Diff Output

Configurations available.

Diff2Html.getPrettyHtml(exInput, {

  // the format of the input data: 'diff' or 'json', default is 'diff'
  inputFormat: 'diff',

  // the format of the output data: 'line-by-line' or 'side-by-side'
  outputFormat: 'line-by-line', 

  // show a file list before the diff: true or false,
  showFiles: false,

  // 'lines' for matching lines, 'words' for matching lines and words
  matching: 'none',

  // similarity threshold for word matching, default is 
  matchWordsThreshold: .25

  // perform at most this much comparisons for line matching a block of changes
  matchingMaxComparisons: 2500,

  // only perform diff changes highlight if lines are smaller than this
  maxLineLengthHighlight: 10000,

  // object with previously compiled templates to replace parts of the html
  templates: {}

  / /object with raw not compiled templates to replace parts of the html
  rawTemplates: {}



v2.7.0 (02/08/2019)

  • Update

You Might Be Interested In:

Leave a Reply