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