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.