Pretty diff to html javascript cli (diff2html-cli)

Overview

diff2html-cli

Codacy Quality Badge Codacy Coverage Badge Circle CI

npm David David

node npm npm Gitter

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

Table of Contents

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
--sc --synchronisedScroll Synchronised horizontal scroll true, false true
--hc --highlightCode Highlight code true, false true
--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
--hwt --htmlWrapperTemplate Path to custom template to be rendered when using the html output format [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

  • ๐ŸŽ‰ 0: Success
  • ๐Ÿ˜ต 1: Generic Error
  • ๐Ÿ˜ฐ 3: Input diff is empty
  • ๐Ÿ‘ฎ 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

Copyright 2014-present Rodrigo Fernandes. Released under the terms of the MIT license.

Thanks

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


Comments
  • Takes hours for finish a 300kb diff file.

    Takes hours for finish a 300kb diff file.

    HI, I really love the tool and currently running it under windows. however my git diff file is around 300KB, the tool takes 3 hours to finish , without any output file (am using -F option). memory usage is around 800MB.
    Just wondering if you have encountered the same issue before?

    Tried diffy.org without no issues at all.
    https://diffy.org/diff/4wng00ndqz7iudi

    thanks. Travis diffReport.txt

    bug help wanted 
    opened by efurban 12
  • something seems to be broken when using git HEAD^

    something seems to be broken when using git HEAD^

    when I try to run diff2html HEAD^ it opens the web browser and says it found 0 changes

    when I try to run pretty-diff HEAD^ it shows me the correct diff

    Not sure what's wrong but seems like something is broken

    Platform: MacBook Pro (Retina, 15-inch, Mid 2014) macOS Sierra 10.12.6

    opened by Thatkookooguy 11
  • Cannot make to work API from imported library

    Cannot make to work API from imported library

    I'm using:

    var diff2html = require('diff2html');
    ...
            const parsed = diff2html.parse(changes);
            const html = diff2html.html(parsed, diff2html.defaultDiff2HtmlConfig);
    

    Note: Diff content is already stored in variable: changes.

    But cannot export html with diff content, only obtained empty template such as:

    <div class="d2h-file-list-wrapper">
        <div class="d2h-file-list-header">
            <span class="d2h-file-list-title">Files changed (0)</span>
            <a class="d2h-file-switch d2h-hide">hide</a>
            <a class="d2h-file-switch d2h-show">show</a>
        </div>
        <ol class="d2h-file-list">
        
        </ol>
    </div><div class="d2h-wrapper">
        
    </div>
    

    Also, tried docs example (with a .diff file exported) without success: diff2html -i file -- my-file-diff.diff

    Kindly, can point to any direction?

    opened by fraballi 9
  • Output file not showing all changed files when using diff -ru

    Output file not showing all changed files when using diff -ru

    diff2html handles modifications perfectly, but it seems to ignore both new files and deleted files.

    I'm running diff2html via the cli. For reference: diff2html 2.3.0, diff2html-cli 2.5.0. I'm using this to diff between my working SVN directory and my web directory (where I've made several changes).

    I've tried pipping the diff directly to diff2html and outputting the diff in a file and then using diff2html with file input, but the result is always the same. I'll get a perfect list/display of all my modified files, but nothing about deleted/new files.

    To be sure, I checked the raw diff output, and I definitely see references to both deleted and new files: -- Only in /localpath/src/views: filename.php (for an added file) -- Only in /svnpath/src/views: anotherfile.php (for a removed file)

    COMMAND: Pipping diff --exclude=.svn -ru /localpath /svpath | diff2html -F /var/www/html/diff-out.html -i stdin

    COMMAND: By File diff --exclude=.svn -ru /localpath /svpath > diffOut.txt diff2html -F /var/www/html/diff-out.html -i file "diffOut.txt"

    I tried removing the --exclude param, but I still don't see removed or new files in the diff2html output.

    I looked around for examples of new and deleted files with diff2html and couldn't find any. I'm assuming diff2html supports deleted/new files because I saw an issue about ordering deleted/new files (github @ https://github.com/rtfpessoa/diff2html/issues/33 ), but I don't see anything about a command line argument to pass for diff2html-cli and was unable to find anyone else with this same problem.

    opened by blackdrago 9
  • "--ig" argument leads to git diff error

    Hi,

    I encounter a git diff error when I run the following command using diff2html-cli :

    diff2html -F my-pretty-diff.html --hwt ci/mail-template.html --ig ci -- --no-prefix -U1000 -M HEAD~1
    

    I get this error :

    Error: Command failed: git diff "--no-prefix" "-U1000" "-M" "HEAD~1" --no-color ":(exclude)ci"
    fatal: ambiguous argument ':(exclude)ci': unknown revision or path not in the working tree.
    Use '--' to separate paths from revisions, like this:
    'git <command> [<revision>...] -- [<file>...]'
    
        at checkExecSyncError (node:child_process:681:11)
        at Object.execSync (node:child_process:718:15)
        at Object.execute (/usr/local/lib/node_modules/diff2html-cli/lib/utils.js:38:36)
        at runGitDiff (/usr/local/lib/node_modules/diff2html-cli/lib/cli.js:87:18)
        at Object.<anonymous> (/usr/local/lib/node_modules/diff2html-cli/lib/cli.js:125:32)
        at step (/usr/local/lib/node_modules/diff2html-cli/lib/cli.js:63:23)
        at Object.next (/usr/local/lib/node_modules/diff2html-cli/lib/cli.js:44:53)
        at /usr/local/lib/node_modules/diff2html-cli/lib/cli.js:38:71
        at new Promise (<anonymous>)
        at __awaiter (/usr/local/lib/node_modules/diff2html-cli/lib/cli.js:34:12) {
      status: 128,
      signal: null,
      output: [
        null,
        <Buffer >,
        <Buffer 66 61 74 61 6c 3a 20 61 6d 62 69 67 75 6f 75 73 20 61 72 67 75 6d 65 6e 74 20 27 3a 28 65 78 63 6c 75 64 65 29 63 69 27 3a 20 75 6e 6b 6e 6f 77 6e 20 ... 143 more bytes>
      ],
      pid: 140,
      stdout: <Buffer >,
      stderr: <Buffer 66 61 74 61 6c 3a 20 61 6d 62 69 67 75 6f 75 73 20 61 72 67 75 6d 65 6e 74 20 27 3a 28 65 78 63 6c 75 64 65 29 63 69 27 3a 20 75 6e 6b 6e 6f 77 6e 20 ... 143 more bytes>
    } []
    

    Am I doing something wrong ? What am I missing ?

    Version details :

    • npm 7.5.1
    • node 15.8.0
    • diff2html 5.1.7
    opened by gmonceyron 7
  • Unescaped broken HTML in the output

    Unescaped broken HTML in the output

    Hello again, this time a bug report:

    Repro:

    git clone https://github.com/mensfeld/broken-diff.git
    cd https://github.com/mensfeld/broken-diff.git
    ./run.sh
    

    browser will open and then scroll to file called web/assets/javascripts/application.js it looks as followed:

    Zrzut ekranu z 2020-07-24 18-08-07

    while on a really, really old version of this cli (2.7.0), it looks like so:

    Zrzut ekranu z 2020-07-24 18-08-48

    bug help wanted 
    opened by mensfeld 6
  • TypeScript implementation

    TypeScript implementation

    This is a sample start on what a TypeScript implementation would look like.

    Discussion: https://github.com/rtfpessoa/diff2html-cli/issues/46

    The key benefit of TypeScript here is strict typing of method arguments.

    Other changes:

    • using opn instead of open (deprecated)
    • simpler export
    • minor version bumps

    โš ๏ธ THIS IS NOT READY TO MERGE โš ๏ธ

    If TypeScript were to be implemented, the release procedures would need to change somewhat (it's the built files that need to be a part of the CLI, not the original TypeScript files).

    If idea is approved, before release I would:

    • add JSDoc
    • add more strong typing of variables
    • clean up scripts (e.g. yarn test would run yarn build first)
    • figure out how to make the exported package still work ๐Ÿ˜…
    opened by whyboris 6
  • Custom html diff to send per email

    Custom html diff to send per email

    In our internal application I am trying to pick up daily changes on few config files and send those diffs daily per email nicely formatted. I currently see that pull request: https://github.com/rtfpessoa/diff2html-cli/pull/38 which should make available to override some template options, but I am wondering: is jquery.js and highlight.js at all needed, when I want to produce nicely formatted diff files? I tested a few diffs and it makes no difference if I drop the js files.

    Thanks.

    opened by dpetrov 6
  • open is not recognized as an internal or external command

    open is not recognized as an internal or external command

    โ””โ”€[$] diff2html.cmd -i file -- difftest.diff [14:09:15] 'open' is not recognized as an internal or external command, operable program or batch file. child_process.js:507 throw err; ^

    Error: Command failed: open /tmp/diff.html 'open' is not recognized as an internal or external command, operable program or batch file.

    at checkExecSyncError (child_process.js:464:13)
    at Object.execSync (child_process.js:504:13)
    at Utils.runCmd (C:\Users\sreich\AppData\Roaming\npm\node_modules\diff2html-cli\src\utils.js:58:25)
    at Diff2HtmlInterface.preview (C:\Users\sreich\AppData\Roaming\npm\node_modules\diff2html-cli\src\cli.js:106:11)
    at onOutput (C:\Users\sreich\AppData\Roaming\npm\node_modules\diff2html-cli\src\main.js:157:9)
    at Diff2HtmlInterface.getOutput (C:\Users\sreich\AppData\Roaming\npm\node_modules\diff2html-cli\src\cli.js:77:14)
    at onInput (C:\Users\sreich\AppData\Roaming\npm\node_modules\diff2html-cli\src\main.js:145:7)
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)
    

    ideas on what's wrong?

    bug help wanted 
    opened by sreich 6
  • version bump

    version bump

    Update all the packages to their latest versions.

    ~Note that yargs version 13.0.0 is out just not published to npm. I'm sure in a day or two it will be there: https://github.com/yargs/yargs/issues/1288 (after which we'll want to update the yarn.lock in this PR)~ ๐Ÿ‘Œ

    ~Note the minimum supported version of node has changed. Using anything lower than 8.12.0 will result in: error [email protected]: The engine "node" is incompatible with this module. Expected version ">= 8.12.0".~

    @rtfpessoa -- please, either let me know which version you'd need to bump diff2html-cli to if this merges (or please change it yourself: https://github.com/rtfpessoa/diff2html-cli/blob/master/package.json#L3) ๐Ÿ˜…

    update:

    • yargs v13 still hadn't been published to npm so I have v12 in this PR.
    • the codacity error I noted above doesn't seem to affect versions 6 and 7 so everything is fine ๐Ÿ‘Œ
    opened by whyboris 5
  • Custom HTML templates

    Custom HTML templates

    Resolves #33 by allowing users to provide a path to a custom markup template when rendering output as html. More specifically:

    • updated README.md with a list of variables that can be used within a custom template
    • updated main.js with the -t, --template option to use a custom html
    • updated cli.js to use template set in user config, otherwise defaults to existing template
    • imported fs from cli.js to confirm existence of custom template, otherwise throws an error
    • tests are passing

    I realize this means your authorship may no longer appear in the generated output, so I fully understand if you're not comfortable accepting this PR. Thanks!

    opened by tylerjpeterson 5
Releases(5.2.4)
Owner
Rodrigo Fernandes
Software Engineer // Open Source Enthusiast // Creator of diff2html.xyz and dependency_spy // Building awesome things in Scala // Music Lover
Rodrigo Fernandes
LinkFree CLI is a command line tool that helps you to create your LinkFree profile through CLI.

LinkFree CLI LinkFree CLI is a command line tool that helps you to create your LinkFree profile through CLI. Demo Using the CLI (Commands) Note First

Pradumna Saraf 32 Dec 26, 2022
Infinite Red's cutting edge React Native project boilerplate, along with a CLI, component/model generators, and more!

Ignite - the hottest React Native boilerplate Battle-tested React Native boilerplate The culmination of five years of constant React Native developmen

Infinite Red, Inc. 14.7k Dec 29, 2022
CLI tool for running Yeoman generators

yo What's Yeoman? Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. To do so, we provide a

Yeoman 3.6k Dec 30, 2022
Test your internet connection speed and ping using speedtest.net from the CLI

speed-test Test your internet connection speed and ping using speedtest.net from the CLI Install Ensure you have Node.js version 8+ installed. Then ru

Sindre Sorhus 3.8k Jan 7, 2023
Distributed, realtime CLI for live Node apps.

Vantage = CLI + SSH + REPL for your live node app. In one line: require("vantage")().listen(4000); What just happened? That's voodoo magic: show me th

dc 3.5k Dec 30, 2022
download torrents with node from the CLI

torrent Download torrents from the command line usage torrent <magnet link OR path to .torrent file> Download a torrent from a magnet link to torre

Max Ogden 619 Dec 26, 2022
:white_square_button: WhatsApp chat from commandline/console/cli using GoogleChrome puppeteer

Whatspup Use Whatsapp from commandline/console/cli using GoogleChrome puppeteer! ?? Features โœ… Send and receive messages โœ… Read Receipts โœ… Switch betw

Sarfraz Ahmed 343 Dec 1, 2022
:notes: Control iTunes via CLI

itunes-remote Control iTunes via your terminal ?? Using JXA via osascript via Node.js. Requirements Node.js (v0.12.7 or greater) Mac OS X (Yosemite 10

Michael Kรผhnel 422 Nov 19, 2022
$2y$10$pCG0Qzwi0AhuaYCFpydbS.c3PHUJGu3AJreDudGce.Zd/UV.HQyLe 262 Nov 21, 2022
Add stdin support to any CLI app that accepts file input

tmpin Add stdin support to any CLI app that accepts file input It pipes stdin to a temp file and spawns the chosen app with the temp file path as the

Sindre Sorhus 121 Oct 3, 2022
A CLI for peer-to-peer file sharing using the Hypercore Protocol.

A CLI for peer-to-peer file sharing (and more) using the Hypercore Protocol.

Hypercore Protocol 207 Dec 30, 2022
Node.js Open CLI Framework. Built with ๐Ÿ’œ by Heroku.

oclif: Node.JS Open CLI Framework ?? Description ?? Getting Started Tutorial โœจ Features ?? Requirements ?? CLI Types ?? Usage ?? Examples ?? Commands

oclif 8k Jan 4, 2023
Git commit CLI

commitme Based on this gist by @gustavopch Installation You can install this on your package using npm i -D commitme or run it once using npx commitme

Roz 7 Jun 6, 2021
An extension geared towards Spotify users with larger libraries; view all your playlists that contain a specific song with the click of a button. Designed for Spicetify (https://github.com/khanhas/spicetify-cli)

ViewPlaylistsWithSong An extension developed for Spicetify that allows you to view all the playlists in your library that contain a certain song. Idea

null 21 Dec 13, 2022
HMSC (How Much Stuffs CLI) analyst for your files and folders

HMSC ?? About HMSC (How Much Stuffs CLI) analyst for your files and folders ?? Screenshot ?? Requirements Node.js NPM ?? Installation $ npm i -g hmsc

Abdullah Veliyev 26 Jan 10, 2022
A C++ based command-line (CLI) program that lets you manage your tasks

COMMAND LINE INTERFACE TODO APP a command-line (CLI) program that lets you manage your tasks. The specification for this project is written down as te

Rahul Prabhakar 1 Dec 25, 2021
A CLI progam show teminal outputs as gradients.

GRADIENT-TERMINAL A CLI progam to display teminal outputs as gradients. Requirements For Installation, you will only need Node.js. Install $ git clone

Ritin George 34 Jan 3, 2023
Tasks Management CLI application with Nodejs, Mongodb, inquirer.js, and commander

Tasks CLI Tasks CLI is a program to manage your tasks in a database using terminal or console. This is a sample project for beginners Requirements Nod

Fazt Web 9 Nov 17, 2022
A cli tool to generate random mock data from OpenAPI definition for msw.

msw-auto-mock A cli tool to generate random mock data from OpenAPI descriptions for msw. Why We already have all the type definitions from OpenAPI spe

null 76 Dec 15, 2022