@nullcc/diff2html

    4.0.12 • Public • Published

    diff2html

    Codacy Quality Badge Codacy Coverage Badge Circle CI Dependency Status

    npm Dependency Status devDependency Status

    node npm npm All Contributors Gitter

    diff2html generates pretty HTML diffs from git or unified diff output.

    NPM

    Features

    • Supports git and unified diffs

    • 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

    • Easy code selection

    Online Example

    Go to diff2html

    Distributions

    How to use

    To load correctly in the Browser you always need to include the stylesheet in the final HTML.

    Import the stylesheet

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="dist/diff2html.css">

    You can also refer to it from a CDN like CDNJS.

    Browser Library

    Import the stylesheet and the library code

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="dist/diff2html.css">
    
    <!-- Javascripts -->
    <script type="text/javascript" src="dist/diff2html.js"></script>

    It will now be available as a global variable named Diff2Html.

    var diffHtml = Diff2Html.getPrettyHtml(
      '<Unified Diff String>',
      {inputFormat: 'diff', showFiles: true, matching: 'lines', outputFormat: 'side-by-side'}
    );
    document.getElementById("destination-elem-id").innerHTML = diffHtml;

    Node Module

    let diff2html = require("diff2html").Diff2Html

    Angular

    • Typescript
    // import diff2html
    import {Diff2Html} from 'diff2html'
    import {Component, OnInit} from '@angular/core';
    
    
    export class AppDiffComponent implements OnInit {
      outputHtml: string;
      constructor() {
        this.init();
      }
    
      ngOnInit() {
      }
    
      init() {
        let strInput = "--- a/server/vendor/golang.org/x/sys/unix/zsyscall_linux_mipsle.go\n+++ b/server/vendor/golang.org/x/sys/unix/zsyscall_linux_mipsle.go\n@@ -1035,6 +1035,17 @@ func Prctl(option int, arg2 uintptr, arg3 uintptr, arg4 uintptr, arg5 uintptr) (\n \n // THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT\n \n+func Pselect(nfd int, r *FdSet, w *FdSet, e *FdSet, timeout *Timespec, sigmask *Sigset_t) (n int, err error) {\n+\tr0, _, e1 := Syscall6(SYS_PSELECT6, uintptr(nfd), uintptr(unsafe.Pointer(r)), uintptr(unsafe.Pointer(w)), uintptr(unsafe.Pointer(e)), uintptr(unsafe.Pointer(timeout)), uintptr(unsafe.Pointer(sigmask)))\n+\tn = int(r0)\n+\tif e1 != 0 {\n+\t\terr = errnoErr(e1)\n+\t}\n+\treturn\n+}\n+\n+// THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT\n+\n func read(fd int, p []byte) (n int, err error) {\n \tvar _p0 unsafe.Pointer\n \tif len(p) > 0 {\n";
        let outputHtml = Diff2Html.getPrettyHtml(strInput, {inputFormat: 'diff', showFiles: true, matching: 'lines'});
        this.outputHtml = outputHtml;
      }
    }
    • HTML
    <!DOCTYPE html>
    <html>
      <head>
        <title>diff2html</title>
      </head>
      <body>
        <div [innerHtml]="outputHtml"></div>
      </body>
    </html>
    • .angular-cli.json - Add styles
    "styles": [
      "diff2html.min.css"
    ]

    Vue.js

    <template>
        <div v-html="prettyHtml" />
    </template>
    
    <script>
    import { Diff2Html } from "diff2html";
    import "diff2html/dist/diff2html.min.css";
    
    export default {
      data() {
        return {
          diffs: "--- a/server/vendor/golang.org/x/sys/unix/zsyscall_linux_mipsle.go\n+++ b/server/vendor/golang.org/x/sys/unix/zsyscall_linux_mipsle.go\n@@ -1035,6 +1035,17 @@ func Prctl(option int, arg2 uintptr, arg3 uintptr, arg4 uintptr, arg5 uintptr) (\n \n // THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT\n \n+func Pselect(nfd int, r *FdSet, w *FdSet, e *FdSet, timeout *Timespec, sigmask *Sigset_t) (n int, err error) {\n+\tr0, _, e1 := Syscall6(SYS_PSELECT6, uintptr(nfd), uintptr(unsafe.Pointer(r)), uintptr(unsafe.Pointer(w)), uintptr(unsafe.Pointer(e)), uintptr(unsafe.Pointer(timeout)), uintptr(unsafe.Pointer(sigmask)))\n+\tn = int(r0)\n+\tif e1 != 0 {\n+\t\terr = errnoErr(e1)\n+\t}\n+\treturn\n+}\n+\n+// THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT\n+\n func read(fd int, p []byte) (n int, err error) {\n \tvar _p0 unsafe.Pointer\n \tif len(p) > 0 {\n"
        };
      },
      computed: {
        prettyHtml() {
          return Diff2Html.getPrettyHtml(this.diffs, {
              inputFormat: "diff",
              showFiles: true,
              matching: "lines",
              outputFormat: "side-by-side"
            });
        }
      }
    };
    </script>

    API

    Intermediate Json From Git Word Diff Output

    getJsonFromDiff(input: string, configuration?: Options): Result[]
    

    Pretty HTML diff

    getPrettyHtml(input: any, configuration?: Options): string
    

    Check out the typescript/diff2html.d.ts for a complete API definition in TypeScript.

    Check out the docs/demo.html for a demo example.

    Configuration

    The HTML output accepts a Javascript object with configuration. Possible options:

    • inputFormat: the format of the input data: 'diff' or 'json', default is 'diff'
    • outputFormat: the format of the output data: 'line-by-line' or 'side-by-side', default is 'line-by-line'
    • showFiles: show a file list before the diff: true or false, default is false
    • matching: matching level: 'lines' for matching lines, 'words' for matching lines and words or 'none', default is none
    • matchWordsThreshold: similarity threshold for word matching, default is 0.25
    • matchingMaxComparisons: perform at most this much comparisons for line matching a block of changes, default is 2500
    • maxLineSizeInBlockForComparison: maximum number os characters of the bigger line in a block to apply comparison, default is 200
    • maxLineLengthHighlight: only perform diff changes highlight if lines are smaller than this, default is 10000
    • templates: object with previously compiled templates to replace parts of the html
    • rawTemplates: object with raw not compiled templates to replace parts of the html
    • renderNothingWhenEmpty: render nothing if the diff shows no change in its comparison: true or false, default is false

    For more information regarding the possible templates look into src/templates

    ** Diff2HtmlUI Helper Options **

    • synchronisedScroll: scroll both panes in side-by-side mode: true or false, default is false

    For more information regarding the possible templates look into src/templates

    Diff2HtmlUI Helper

    Simple wrapper to ease simple tasks in the browser such as: code highlight and js effects

    • Invoke Diff2html
    • Inject output in DOM element
    • Enable collapsible file summary list
    • Enable syntax highlight of the code in the diffs

    How to use

    Mandatory HTML resource imports

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="dist/diff2html.css">
    
    <!-- Javascripts -->
    <script type="text/javascript" src="dist/diff2html.js"></script>
    <script type="text/javascript" src="dist/diff2html-ui.js"></script>

    Init

    var diff2htmlUi = new Diff2HtmlUI({diff: diffString});
    // or
    var diff2htmlUi = new Diff2HtmlUI({json: diffJson});

    Draw

    diff2htmlUi.draw('html-target-elem', {inputFormat: 'json', showFiles: true, matching: 'lines'});

    Syntax Highlight

    Add the dependencies. Choose one color scheme, and add the main highlight code. Note that the stylesheet for the color scheme must come before the main diff2html stylesheet. If your favourite language is not included in the default package also add its javascript highlight file.

    <!-- Stylesheet -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css">
    <link rel="stylesheet" type="text/css" href="dist/diff2html.css">
    
    <!-- Javascripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/scala.min.js"></script>
    <script type="text/javascript" src="dist/diff2html-ui.js"></script>

    Invoke the Diff2HtmlUI helper

    $(document).ready(function() {
        var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
        diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'});
        diff2htmlUi.highlightCode('#line-by-line');
    });

    Collapsable File Summary List

    Add the dependencies.

    <!-- Javascripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
    <script type="text/javascript" src="dist/diff2html-ui.js"></script>

    Invoke the Diff2HtmlUI helper

    $(document).ready(function() {
        var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
        diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'});
        diff2htmlUi.fileListCloseable('#line-by-line', false);
    });

    Troubleshooting

    1. Out of memory or Slow execution

    Causes:

    • Big files
    • Big lines

    Fix:

    • Disable the line matching algorithm, by setting the option {"matching": "none"} when invoking diff2html

    Contributions

    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.

    Contributors

    Thanks goes to these wonderful people (emoji key):

    Rodrigo Fernandes
    Rodrigo Fernandes

    💻
    stockmind
    stockmind

    💻
    Ivan Vorontsov
    Ivan Vorontsov

    💻
    Nick Brewer
    Nick Brewer

    💻
    Matt Wade
    Matt Wade

    🐛
    Rafael Cortês
    Rafael Cortês

    💻
    Nuno Teixeira
    Nuno Teixeira

    💻
    Koki Oyatsu
    Koki Oyatsu

    🐛
    James Monger
    James Monger

    📖
    Wessel van der Pal
    Wessel van der Pal

    🛡️
    jk-kim
    jk-kim

    💻
    Sergey Semenov
    Sergey Semenov

    🐛
    Nick Mitchell
    Nick Mitchell

    🐛
    Samir Aguiar
    Samir Aguiar

    📖
    pubkey
    pubkey

    📖
    Илья
    Илья

    📖
    Mohamed Akram
    Mohamed Akram

    🐛
    Eugene Marcotte
    Eugene Marcotte

    💻
    Dima Sabanin
    Dima Sabanin

    🚧
    Ben Abbott
    Ben Abbott

    📖
    弘树@阿里
    弘树@阿里

    🐛
    Mikko Rantanen
    Mikko Rantanen

    🐛

    This project follows the all-contributors specification. Contributions of any kind welcome!

    License

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

    Thanks

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


    Install

    npm i @nullcc/diff2html

    DownloadsWeekly Downloads

    147

    Version

    4.0.12

    License

    MIT

    Unpacked Size

    482 kB

    Total Files

    44

    Last publish

    Collaborators

    • ethan.zhang