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

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

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

}

GitHub-like HTML Diff Tool, diff2html Plugin/Github