[GitHub] Pretty Diff to HTML Javascript Library

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

Diff2Html can be used in a number of ways as described in the Distributions section. The two main ways are:

Diff2HtmlUI: Using this wrapper makes it easy to inject HTML into the DOM and adds some nice features to diff, such as syntax highlighting.
Diff2Html: Using the parser and HTML generator directly from the library gives you complete control over what you can do with the generated JSON or HTML.

Features:

Supports unified git and Diffs
Line by line and side by side diff
New and old-line numbers
Fonts that have been inserted and removed
GitHub is like the visual style
Highlight the syntax of the code
Line Similarity Matching
Easy icon selection

Must Read: [Live] A Code Editor based on CodeMirror | Syntax Highlighter | HTML Editor

How to make use of it:

Installation:

# Yarn
$ yarn add diff2html

# NPM
$ npm install diff2html --save

Include the diff2html.js and different required sources on the internet web page.

<!-- diff2html files -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html/dist/diff2html.min.css">
<script src="https://cdn.jsdelivr.net/npm/diff2html/dist/diff2html.min.js"></script>

Basic utilization.

document.addEventListener('DOMContentLoaded', () => {
  var diffHtml = global.Diff2Html.html('<Unified Diff String>', {
      // options here
  });
  document.getElementById('destination-elem-id').innerHTML = diffHtml;
});

Available configurations with default values.

{

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

  // show a file list before the diff
  drawFileList: '',

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

  // maximum number os characters of the bigger line in a block to apply comparison
  maxLineSizeInBlockForComparison: 200

  // 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: {},

  // render nothing if the diff shows no change in its comparison
  renderNothingWhenEmpty: false

}