Awesome

diff2html-cli

Diff to Html generates pretty HTML diffs from unified and git diff output in your terminal

Features
Online Example
Distributions
Setup
Usage
Contribute
Developing
License
Thanks

Features

Unified diff and Git diff input
line-by-line and side-by-side diff
new and old line numbers
inserted and removed lines
GitHub like style
Code syntax highlight
Line similarity matching

Online Example

Go to Diff2HTML

Distributions

Setup

npm install -g diff2html-cli

Usage

Usage: diff2html [ flags and/or options ] -- [git diff passthrough flags and options]

flag	alias	description	choices	default
-s	--style	Output style	`line`, `side`	`line`
--fct	--fileContentToggle	Adds a viewed checkbox to toggle file content	`true`, `false`	`true`
--sc	--synchronisedScroll	Synchronised horizontal scroll	`true`, `false`	`true`
--hc	--highlightCode	Highlight code	`true`, `false`	`true`
--cs	--colorScheme	Color scheme	`auto`, `dark`, `light`	`auto`
--su	--summary	Show files summary	`closed`, `open`, `hidden`	`closed`
-d	--diffStyle	Diff style	`word`, `char`	`word`
--lm	--matching	Diff line matching type	`lines`, `words`, `none`	`none`
--lmt	--matchWordsThreshold	Diff line matching word threshold		`0.25`
--lmm	--matchingMaxComparisons	Diff line matching maximum line comparisons of a block of changes		`2500`
	--diffMaxChanges	Number of changed lines after which a file diff is deemed as too big and not displayed
	--diffMaxLineLength	Number of characters in a diff line after which a file diff is deemed as too big and not displayed
	--renderNothingWhenEmpty	Render nothing if the diff shows no change in its comparison		`false`
	--maxLineSizeInBlockForComparison	Maximum number of characters of the bigger line in a block to apply comparison		`200`
	--maxLineLengthHighlight	Maximum number of characters in a line to apply highlight		`10000`
--hwt	--htmlWrapperTemplate	Path to custom template to be rendered when using the `html` output format	`[string]`
-t	--title	Page title for `html` output	`[string]`
-f	--format	Output format	`html`, `json`	`html`
-i	--input	Diff input source	`file`, `command`, `stdin`	`command`
-o	--output	Output destination	`preview`, `stdout`	`preview`
-u	--diffy	Upload to diffy.org	`browser`, `pbcopy`, `print`
-F	--file	Send output to file (overrides output option)	`[string]`
--ig	--ignore	Ignore particular files from the diff	`[string]`
-v	--version	Show version number
-h	--help	Show help

Exit Status Codes

:tada: 0: Success
:dizzy_face: 1: Generic Error
:cold_sweat: 3: Input diff is empty
:cop: 4: Value of --hwt | --htmlWrapperTemplate is not a valid file

Custom HTML wrapper template

The template is a very based on a simple replace of several placeholders as coded https://github.com/rtfpessoa/diff2html-cli/blob/master/src/cli.ts#L40

To provide a custom template you need to make sure you have the following comments and imports in your HTML, exactly as they are here:

Inside the <head> tag

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css" />
<!--diff2html-css-->
<!--diff2html-js-ui-->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const targetElement = document.getElementById('diff');
    const diff2htmlUi = new Diff2HtmlUI(targetElement);
    //diff2html-fileListToggle
    //diff2html-synchronisedScroll
    //diff2html-highlightCode
  });
</script>

Inside the <body> tag

<div id="diff">
  <!--diff2html-diff-->
</div>

Examples

diff2html -s line -f html -d word -i command -o preview -- -M HEAD~1

diff last commit, line by line, word comparison between lines, previewed in the browser and input from git diff command

diff2html -i file -- my-file-diff.diff

reading the input from a file

diff -u file1.txt file2.txt | diff2html -i stdin

reading diff from stdin

diff2html -f json -o stdout -- -M HEAD~1

print json format to stdout

diff2html -F my-pretty-diff.html -- -M HEAD~1

print to file

diff2html -F my-pretty-diff.html --hwt my-custom-template.html -- -M HEAD~1

print to file using custom markup templates can include the following variables

diff2html --ig package-lock.json --ig yarn.lock

Ignore package-lock.json and yarn.lock from the generated diff

NOTE: notice the -- in the examples

Contribute

This is a developer friendly project, all the contributions are welcome. To contribute just send a pull request with your changes following the guidelines described in CONTRIBUTING.md. I will try to review them as soon as possible.

Developing

Make some changes, yarn build and then ./bin/diff2html 😉

License

Thanks

This project is inspired in pretty-diff by Scott González.