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

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

}

See Also – 

JavaScript Library To Browser Logging Without Opening Console | logee.js
Beautiful Code Highlighter As Vue.js Component Library


See Demo And Download

Official Website(rtfpessoa): Click Here

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

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Lightweight-jQuery-Input-Mask-Plugin

Simple and Easy jQuery Input Mask Plugin | InputMask-Phone-Numbers

jquery-input-mask-phone-number.js – Simple and easy jquery phone number mask library. JQuery Plugin for masks input field to US phone format. Must Read: jQuery Creates an Input Mask…

responsive-accordion-ui

Responsive Accordion UI Design using HTML CSS and JavaScript

Responsive Accordion is a responsive and beautiful-looking accordion user interface with smooth transitions. Designed with HTML, CSS (SCSS), and a bit of JavaScript. Stunning accordion user interface…