Press "Enter" to skip to content

[GitHub] Pretty Diff to HTML Javascript Library | diff2html

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


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


# Yarn
$ yarn add diff2html

$ npm install diff2html --save

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

<!-- diff2html files -->
<link rel="stylesheet" href="">
<script src=""></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

See Demo And Download

Official Website(rtfpessoa): Click Here

This superior jQuery/javascript plugin is developed by rtfpessoa. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.