Pretty diff to html javascript library (diff2html)

Overview

diff2html

Codacy Quality Badge Codacy Coverage Badge CircleCI

npm Dependency Status devDependency Status jsdelivr CDN Downloads

node npm npm All Contributors Gitter

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

NPM

Table of Contents

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

  • Code syntax highlight

  • Line similarity matching

  • Easy code selection

Online Example

Go to diff2html

Distributions

Usage

Diff2Html can be used in various ways as listed in the distributions section. The two main ways are:

  • Diff2HtmlUI: using this wrapper makes it easy to inject the html in the DOM and adds some nice features to the diff, like syntax highlight.
  • Diff2Html: using the parser and html generator directly from the library gives you complete control about what you can do with the json or html generated.

Bellow you can find more details and examples about each option.

Diff2HtmlUI Usage

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

Diff2HtmlUI API

Create a Diff2HtmlUI instance

constructor(target: HTMLElement, diffInput?: string | DiffFile[]) // diff2html-ui, diff2html-ui-slim
constructor(target: HTMLElement, diffInput?: string | DiffFile[], config: Diff2HtmlUIConfig = {}, hljs?: HighlightJS) // diff2html-ui-base

Generate and inject in the document the Pretty HTML representation of the diff

draw(): void

Enable extra features

synchronisedScroll(): void
fileListToggle(startVisible: boolean): void
highlightCode(): void

Diff2HtmlUI Configuration

  • synchronisedScroll: scroll both panes in side-by-side mode: true or false, default is true
  • highlight: syntax highlight the code on the diff: true or false, default is true
  • fileListToggle: allow the file summary list to be toggled: true or false, default is true
  • fileListStartVisible: choose if the file summary list starts visible: true or false, default is false
  • fileContentToggle: allow each file contents to be toggled: true or false, default is true
  • All the options from Diff2Html are also valid configurations in Diff2HtmlUI

Diff2HtmlUI Browser

Mandatory HTML resource imports

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />

<!-- Javascripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>

Init

const targetElement = document.getElementById('destination-elem-id');
const configuration = { drawFileList: true, matching: 'lines' };

const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
// or
const diff2htmlUi = new Diff2HtmlUI(targetElement, diffJson, configuration);

Draw

diff2htmlUi.draw();

Syntax Highlight

NOTE: The highlight.js css should come before the diff2html css

<!-- 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="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />

<!-- Javascripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>

Pass the option highlight with value true or invoke diff2htmlUi.highlightCode() after diff2htmlUi.draw().

document.addEventListener('DOMContentLoaded', () => {
  const diffString = `diff --git a/sample.js b/sample.js
  index 0000001..0ddf2ba
  --- a/sample.js
  +++ b/sample.js
  @@ -1 +1 @@
  -console.log("Hello World!")
  +console.log("Hello from Diff2Html!")`;
  const targetElement = document.getElementById('myDiffElement');
  const configuration = { inputFormat: 'json', drawFileList: true, matching: 'lines', highlight: true };
  const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
  diff2htmlUi.draw();
  diff2htmlUi.highlightCode();
});

Collapsable File Summary List

Add the dependencies.

<!-- Javascripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>

Invoke the Diff2HtmlUI helper Pass the option fileListToggle with value true or invoke diff2htmlUi.fileListToggle() after diff2htmlUi.draw().

document.addEventListener('DOMContentLoaded', () => {
  const targetElement = document.getElementById('myDiffElement');
  var diff2htmlUi = new Diff2HtmlUI(targetElement, lineDiffExample, { drawFileList: true, matching: 'lines' });
  diff2htmlUi.draw();
  diff2htmlUi.fileListToggle(false);
});

Diff2HtmlUI Examples

Example with plain HTML+CSS+JS

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <!-- Make sure to load the highlight.js CSS file before the Diff2Html CSS file -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"
    />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
  </head>
  <script>
    const diffString = `diff --git a/sample.js b/sample.js
      index 0000001..0ddf2ba
      --- a/sample.js
      +++ b/sample.js
      @@ -1 +1 @@
      -console.log("Hello World!")
      +console.log("Hello from Diff2Html!")`;

    document.addEventListener('DOMContentLoaded', function () {
      var targetElement = document.getElementById('myDiffElement');
      var configuration = {
        inputFormat: 'json',
        drawFileList: true,
        fileListToggle: false,
        fileListStartVisible: false,
        fileContentToggle: false,
        matching: 'lines',
        outputFormat: 'side-by-side',
        synchronisedScroll: true,
        highlight: true,
        renderNothingWhenEmpty: false,
      };
      var diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
      diff2htmlUi.draw();
      diff2htmlUi.highlightCode();
    });
  </script>
  <body>
    <div id="myDiffElement"></div>
  </body>
</html>

Diff2Html Usage

Diff2Html API

JSON representation of the diff

function parse(diffInput: string, configuration: Diff2HtmlConfig = {}): DiffFile[];

Pretty HTML representation of the diff

function html(diffInput: string | DiffFile[], configuration: Diff2HtmlConfig = {}): string;

Diff2Html Configuration

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

  • outputFormat: the format of the output data: 'line-by-line' or 'side-by-side', default is 'line-by-line'
  • drawFileList: show a file list before the diff: true or false, default is true
  • diffStyle: show differences level in each line: word or char, default is word
  • diffMaxChanges: number of changed lines after which a file diff is deemed as too big and not displayed, default is undefined
  • diffMaxLineLength: number of characters in a diff line after which a file diff is deemed as too big and not displayed, default is undefined
  • diffTooBigMessage: function allowing to customize the message in case of file diff too big (if diffMaxChanges or diffMaxLineLength is set)
  • 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
  • renderNothingWhenEmpty: render nothing if the diff shows no change in its comparison: true or false, default is false
  • compiledTemplates: object with previously compiled templates to replace parts of the html
  • rawTemplates: object with raw not compiled templates to replace parts of the html

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

Diff2Html Browser

Import the stylesheet and the library code.

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

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />

<!-- Javascripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html.min.js"></script>

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

document.addEventListener('DOMContentLoaded', () => {
  var diffHtml = Diff2Html.html('<Unified Diff String>', {
    drawFileList: true,
    matching: 'lines',
    outputFormat: 'side-by-side',
  });
  document.getElementById('destination-elem-id').innerHTML = diffHtml;
});

Diff2Html NPM / Node.js Library

const Diff2html = require('diff2html');
const diffJson = Diff2html.parse('<Unified Diff String>');
const diffHtml = Diff2html.html(diffJson, { drawFileList: true });
console.log(diffHtml);

Diff2Html Examples

Example with Angular

  • Typescript
import * as 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.html(strInput, { drawFileList: 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"
]

Example with Vue.js

<template>
  <div v-html="prettyHtml" />
</template>

<script>
import * as Diff2Html from 'diff2html';
import 'diff2html/bundles/css/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.html(this.diffs, {
        drawFileList: true,
        matching: 'lines',
        outputFormat: 'side-by-side',
      });
    },
  },
};
</script>

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

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.

Contributors

Thanks goes to these wonderful people (emoji key):


Rodrigo Fernandes

๐Ÿ’ป

stockmind

๐Ÿ’ป

Ivan Vorontsov

๐Ÿ’ป

Nick Brewer

๐Ÿ’ป

Matt Wade

๐Ÿ›

Rafael Cortรชs

๐Ÿ’ป

Nuno Teixeira

๐Ÿ’ป

Koki Oyatsu

๐Ÿ›

James Monger

๐Ÿ“–

Wessel van der Pal

๐Ÿ›ก๏ธ

jk-kim

๐Ÿ’ป

Sergey Semenov

๐Ÿ›

Nick Mitchell

๐Ÿ›

Samir Aguiar

๐Ÿ“–

pubkey

๐Ÿ“–

ะ˜ะปัŒั

๐Ÿ“–

Mohamed Akram

๐Ÿ›

Eugene Marcotte

๐Ÿ’ป

Dima Sabanin

๐Ÿšง

Ben Abbott

๐Ÿ“–

ๅผ˜ๆ ‘@้˜ฟ้‡Œ

๐Ÿ›

Mikko Rantanen

๐Ÿ›

Ann

๐Ÿ“–

escitalopram

๐Ÿ› ๐Ÿ’ป

dependabot[bot]

๐Ÿ›ก๏ธ ๐Ÿšง

Josh Goldberg

๐Ÿ’ป

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

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
  • diff2html@2.0.0-beta9 not working on client side.

    [email protected] not working on client side.

    Looking at the code borwserifying and importing nunjucks at client side will not be helpful either.

    TypeError: nunjucks.configure is not a function
        at http://127.0.0.1:8333/js/ungit.js:2895:30
        at Object.<anonymous> (http://127.0.0.1:8333/js/ungit.js:2910:3)
        at Object.require.24../diff-parser.js (http://127.0.0.1:8333/js/ungit.js:2912:4)
        at s (http://127.0.0.1:8333/js/ungit.js:1:262)
        at http://127.0.0.1:8333/js/ungit.js:1:313
        at http://127.0.0.1:8333/js/ungit.js:2710:23
        at Object.require.23../diff-parser.js (http://127.0.0.1:8333/js/ungit.js:2873:3)
        at s (http://127.0.0.1:8333/js/ungit.js:1:262)
        at http://127.0.0.1:8333/js/ungit.js:1:313
        at http://127.0.0.1:8333/js/ungit.js:2675:27
        at Object.require.22../line-by-line-printer.js (http://127.0.0.1:8333/js/ungit.js:2693:3)
        at s (http://127.0.0.1:8333/js/ungit.js:1:262)
        at http://127.0.0.1:8333/js/ungit.js:1:313
        at http://127.0.0.1:8333/js/ungit.js:18316:21
        at Object.<anonymous> (http://127.0.0.1:8333/js/ungit.js:18415:3)
        at Object.require.diff2html../diff-parser.js (http://127.0.0.1:8333/js/ungit.js:18417:4)
    
    opened by jung-kim 25
  • Highlight is working not as supposed

    Highlight is working not as supposed

    It applies on line... but not on code block. For fast understanding here is a screenshot:

    spectacle z25642

    1. It is applying on each line separatly. When it on the comment block - it doesn't understand that this is a comment block.
    2. It is applying on whole block. And now it is know about comment block.

    It seems that with current approach (applying on line) it is not possible to allow normal highlight. Any ideas?

    bug enhancement help wanted 
    opened by lantian 19
  • How to specify the HightlightJS language

    How to specify the HightlightJS language

    Hello. Thanks for this great library.

    At the moment, it seems highlightJS is guessing the language based on the the file extension (I think Im reading that correctly here). That often results in incorrect matchings. If we know the language of the file that the diff is for, we'd like to specify it manually. Is there a way to do that? If not, could an option be added please? If you'd like us to add the option, could you point us in the direction you'd like us to do it please? And if its already an option and I've missed it, my apologies :)

    opened by iHiD 18
  • Question: Diff2Html.getJsonFromDiff is not a function

    Question: Diff2Html.getJsonFromDiff is not a function

    I am trying to follow your docs, but haven't found any examples of usage, or function signature docs, have I missed something?

    Without the above, I have guessed and created a script like this:

    var fs = require('fs');
    var Diff2Html = require('diff2html');
    function processTutorial() {
        var files = [];
        var _files = getFiles('./tutorial/patches', files);
        var _loop_1 = function(path) {
            fs.readFile(path, 'utf8', function (err, data) {
                if (err) {
                    throw err;
                }
                var content = Diff2Html.getJsonFromDiff(data);
                writeFile(content, path);
            });
        };
        for (var _i = 0, _files_1 = _files; _i < _files_1.length; _i++) {
            var path = _files_1[_i];
            _loop_1(path);
        }
    }
    

    Note - it's slightly ugly because it's compiled from typescript. When this is run, I get the following error:

    Repos\docs\prepareTutorial.js:13
                Diff2Html.getPrettyHtml(data, { outputFormat: 'side-by-side' });
                          ^
    
    TypeError: Diff2Html.getPrettyHtml is not a function
        at C:\Users\George\Source\Repos\docs\prepareTutorial.js:13:23
        at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)
    

    What have I done wrong?

    NB:

    npm list diff2html [email protected] C:\Users\George\Source\Repos\docs `-- [email protected]

    opened by georgeedwards 18
  • Attempt to use nunjuck templates in Line By Line

    Attempt to use nunjuck templates in Line By Line

    Hey!

    This is a first try of using the nunjucks templates with diff2html. It took me a while because I encountered with a few obstacles. This surely will need some polishing but the main point is to have a proof of concept of how a template engine might help us or not with our html.

    The css change was necessary because it was interpreting literally all the whitespaces and breaklines, so in line.html, in order to put the spans in different lines, I had to made the change and use proper &nbsp; chars so the browser will respect them, otherwise in line.html we would've had a very big big line with prefix and content.

    Let me know what you think.

    Cheers!

    opened by pbu88 14
  • Is there a way to modify the templates / HTML?

    Is there a way to modify the templates / HTML?

    We are using your awesome project to display a diff before importing files into a webapp. What we're hoping to achieve is having a checkbox next to each filename title to select whether to include that file in the import.

    The first thought I had was to add checkboxes with JS after but it would be useful to have more details on the file and build the HTML at once. I noticed there are templates built with Hogan JS but I don't see how they could be changed/overridden without forking this project and building our own version.

    Any thoughts would be great, thanks.

    enhancement help wanted 
    opened by jameshoward 13
  • lodash.merge is not a function

    lodash.merge is not a function

    For some reason I was getting this error, which I fixed by changing: lodash.merge(newCfg, defaultConfig, cfg);

    to: _.merge(newCfg, defaultConfig, cfg);

    The lodash var was an empty object. Is there some issue with require and exports?

    opened by adamjimenez 12
  • Binary files not listed in the diff

    Binary files not listed in the diff

    Hi,

    I've made a diff from the following commit: https://github.com/rmpestano/last-changes-plugin/commit/1d620edfc16476650af3aa696389f42535f6034d

    As you can see there are two files changes. The problem I'm facing is that diff2html is ignoring the binary file diff.

    Here is the diff I've generated:

    diff --git a/README.adoc b/README.adoc
    index be99c75..9bbce57 100644
    --- a/README.adoc
    +++ b/README.adoc
    @@ -20,7 +20,7 @@
    
     Last Changes is a *Jenkin plugin* that shows _rich VCS diffs_ between builds.
    
    -IMPORTANT: Only `Git` and `Svn` are supported.
    +IMPORTANT: Only `Git` and `Svn` based projects are supported.
    
     == Introduction
    
    @@ -37,23 +37,23 @@
    
     == Objectives
    
    -The main objective of this plugin is to have fast access to what has changed on a Jenkins build.
    +The main objective of this plugin is to have _fast_ access to what has changed on a Jenkins build.
    
     Another interesting aspect is that it can easily help to find the `root cause` of a `failling build` by highlighting what has changed.
    
    -Also the plugin _shines_ in a https://en.wikipedia.org/wiki/Continuous_delivery[*continuous delivery*^] environment, where each _commit_ generates a release candidate.
    +And finally the plugin _shines_ in a https://en.wikipedia.org/wiki/Continuous_delivery[*continuous delivery*^] environment, where each _commit_ generates a release candidate.
    
    
     == How it works?
    
    -. This plugin expects `git` or `svn` based builds.
    +. This plugin expects `git` or `svn` based builds (a.k.a _Source Code Management_ configuration section).
     . While your job runs the plugin reads your build workspace to retrieve the current VCS revision;
     . The diff between `actual` and `previous` revisions will be stored;
     . The `diff` for each build can be viewed later in html format.
    
     IMPORTANT: To get most from this plugin use `periodically SCM pooling` to trigger your builds, http://www.nailedtothex.org/roller/kyle/entry/articles-jenkins-poll[more details here^].
    
    -NOTE: The plugin *always* compare current revision with previous one even no new commit has been made.
    +WARNING: The plugin *always* compare current revision with previous one even no new commit has been made.
    
     == Usage
    
    diff --git a/last-changes-config.png b/last-changes-config.png
    index 322248b..56fc1f2 100644
    --- a/last-changes-config.png
    +++ b/last-changes-config.png
    Binary files differ
    
    

    Here is the output where binary file change is ignored:

    generated-diff

    The html source from the page that uses diff2html can be found here:

    jQuery(document).ready(function() {
                      var sidePanelTD=document.getElementById('side-panel');
                                   if(sidePanelTD) {
                                     sidePanelTD.parentNode.removeChild(sidePanelTD);
                                   }
                    var diff2htmlUi = new Diff2HtmlUI({diff: buildChanges});
    
                        diff2htmlUi.draw('#line-by-line', {
                             inputFormat: 'json',
                             outputFormat: 'line-by-line',
                             showFiles: true,
                             synchronisedScroll: false,
                             matchWordsThreshold: '0.25',
                             matchingMaxComparisons: '1000.0',
                             matching: 'lines'
                             }
                            );
                        diff2htmlUi.fileListCloseable('#line-by-line', false);
                        diff2htmlUi.highlightCode('#line-by-line');
    
                    }); //end documentReady
    
                    var buildChanges = "diff --git a\/README.adoc b\/README.adoc\nindex be99c75..9bbce57 100644\n--- a\/README.adoc\n+++ b\/README.adoc\n@@ -20,7 +20,7 @@\n \r\n Last Changes is a *Jenkin plugin* that shows _rich VCS diffs_ between builds.\r\n \r\n-IMPORTANT: Only `Git` and `Svn` are supported.\r\n+IMPORTANT: Only `Git` and `Svn` based projects are supported.\r\n \r\n == Introduction\r\n \r\n@@ -37,23 +37,23 @@\n \r\n == Objectives\r\n \r\n-The main objective of this plugin is to have fast access to what has changed on a Jenkins build.\r\n+The main objective of this plugin is to have _fast_ access to what has changed on a Jenkins build.\r\n \r\n Another interesting aspect is that it can easily help to find the `root cause` of a `failling build` by highlighting what has changed.\r\n \r\n-Also the plugin _shines_ in a https:\/\/en.wikipedia.org\/wiki\/Continuous_delivery[*continuous delivery*^] environment, where each _commit_ generates a release candidate.\r\n+And finally the plugin _shines_ in a https:\/\/en.wikipedia.org\/wiki\/Continuous_delivery[*continuous delivery*^] environment, where each _commit_ generates a release candidate.\r\n \r\n \r\n == How it works?\r\n \r\n-. This plugin expects `git` or `svn` based builds.\r\n+. This plugin expects `git` or `svn` based builds (a.k.a _Source Code Management_ configuration section).\r\n . While your job runs the plugin reads your build workspace to retrieve the current VCS revision;\r\n . The diff between `actual` and `previous` revisions will be stored;\r\n . The `diff` for each build can be viewed later in html format.\r\n \r\n IMPORTANT: To get most from this plugin use `periodically SCM pooling` to trigger your builds, http:\/\/www.nailedtothex.org\/roller\/kyle\/entry\/articles-jenkins-poll[more details here^].\r\n \r\n-NOTE: The plugin *always* compare current revision with previous one even no new commit has been made.\r\n+WARNING: The plugin *always* compare current revision with previous one even no new commit has been made.\r\n \r\n == Usage\r\n \r\ndiff --git a\/last-changes-config.png b\/last-changes-config.png\nindex 322248b..56fc1f2 100644\n--- a\/last-changes-config.png\n+++ b\/last-changes-config.png\nBinary files differ\n";
    

    Can you see something wrong?

    thanks in advance.

    opened by rmpestano 12
  • Use Hogan.js for templating engine

    Use Hogan.js for templating engine

    As mentioned in #65 nunjucks is a bit complicated in terms of dependencies and does not behave well with browsers. To fix this I started looking at other alternatives.

    Hogan.js seemed the best option for it's minimalistic and lightweight approach. After some learning I was able to put it working. I also changed from browserify to webpack since it is easier to use and there is no need for config file at the moment.

    The only code I had to do was the template cache, basically changing between the global browser cache and a local cache used when the lib is used inside node.

    I think it looks pretty simple and straight forward.

    @pbu88 @codingtwinky @orivej, what you think?

    Note: this is just a PoC. Will fix the tests when we decide on the solution.

    opened by rtfpessoa 12
  • Use nunjucks templates

    Use nunjucks templates

    opened by rtfpessoa 12
  • HTML entities are not escaped in @@ lines

    HTML entities are not escaped in @@ lines

    Step 0: Describe your environment

    • OS: windows
    • diff2html version: 3.1.8
    • Using diff2html directly or using diff2html-ui helper: directly
    • Extra flags:

    Step 1: Describe the problem:

    HTML entities are not escaped in @@ lines.

    Steps to reproduce:

    1. Take the following diff:
    diff --git a/README.md b/README.md
    index 44e1e30b..93c7fd99 100644
    --- a/README.md
    +++ b/README.md
    @@ -7,7 +7,7 @@ test <a href="test">link</a>
     test <a href="test">link</a>
     test <a href="test">link</a>
     test <a href="test">link</a>
    -test <a href="test">link</a>
    +
     test <a href="test">link</a>
     test <a href="test">link</a>
     test <a href="test">link</a>
    
    1. Render it with Diff2Html.parse and Diff2Html.html
    2. The diff HTML on the @@ line is not getting properly escaped which means it is rendered into the browser.

    diff example:

    see above

    Observed Results:

    • What happened? The HTML on the @@ lines gets rendered. image

    Expected Results:

    • What did you expect to happen? Html should be properly escaped and visible as text only.

    Relevant Code:

    See https://jsfiddle.net/k28wc6a3/

    Original reported here https://github.com/FredrikNoren/ungit/issues/1387

    opened by campersau 11
  • Viewed button issue + highlight dark theme

    Viewed button issue + highlight dark theme

    Step -1: Before filling an issue check out troubleshooting section

    Step 0: Describe your environment

    • OS: Mac 12.6. Chrome 108.0.5359.94 (Official Build) (arm64)
    • diff2html version: 3.4.18
    • Using diff2html directly or using diff2html-ui helper: Both
    • Extra flags: N/A

    Step 1: Describe the problem:

    • Viewed button does not work since 3.4.18. It does not collapse file content.
    • Rendering looks weird when using a dark highlightjs theme. Actually it looks weird with light themes as well.
    Screen Shot 2022-12-07 at 11 46 59 PM

    Steps to reproduce:

    1. Look at example here https://codesandbox.io/s/diff2html-issues-dkur77?file=/src/App.js

    Observed Results:

    • Viewed button does not collapse file content
    • Highlightjs themes look weird

    Expected Results:

    • Viewed button should collapse file content
    • Highlightjs themes should be rendered nicer

    Relevant Code:

    Look at https://codesandbox.io/s/diff2html-issues-dkur77?file=/src/App.js to reproduce.

    opened by tnhu 1
  • build(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    build(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • How to display the number of different points

    How to display the number of different points

    image How can I get the total number of distinct points and display๏ผŸFor example, there are 6 differences in the above picture, I want to show 6 differences after the file name, how can I do that?

    opened by 1506085843 1
  • What does matching actually do?

    What does matching actually do?

    Hi,

    I've been trying to figure out what the matching option actually does, playing around with the demo here - https://diff2html.xyz/demo.html

    The output always looks the same regardless of the matching option chosen.

    Thanks

    opened by akash329d 7
  • Failed to parse source map

    Failed to parse source map

    Step 0: Describe your environment

    • OS: macOS 12.4
    • diff2html version: 3.4.17

    Step 1: Describe the problem:

    the webpack dev server returns compile warnings

    Observed Results:

    Compiled with 11 warnings.

    Failed to parse source map from '/Users/sewolf/workspace/myproject/node_modules/diff2html/src/diff-parser.ts' file: Error: ENOENT: no such file or directory, open '/Users/sewolf/workspace/myproject/node_modules/diff2html/src/diff-parser.ts'

    opened by sewolf 6
Releases(3.4.22)
Owner
Rodrigo Fernandes
Software Engineer // Open Source Enthusiast // Creator of diff2html.xyz and dependency_spy // Building awesome things in Scala // Music Lover
Rodrigo Fernandes
A JavaScript PDF generation library for Node and the browser

PDFKit A JavaScript PDF generation library for Node and the browser. Description PDFKit is a PDF document generation library for Node and the browser

null 8.5k Jan 7, 2023
Client-side JavaScript PDF generation for everyone.

A library to generate PDFs in JavaScript. You can catch me on twitter: @MrRio or head over to my company's website for consultancy. jsPDF is now co-ma

James Hall 25.7k Dec 28, 2022
PDF Reader in JavaScript

PDF.js PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5. PDF.js is community-driven and supported by Mozilla. Our goal is to

Mozilla 41.1k Jan 8, 2023
Client/server side PDF printing in pure JavaScript

pdfmake PDF document generation library for server-side and client-side in pure JavaScript. Check out the playground and examples. This is unstable ma

Bartek Pampuch 10.5k Jan 1, 2023
File downloading using client-side javascript

download Summary The download() function is used to trigger a file download from JavaScript. It specifies the contents and name of a new file placed i

dandavis 2.1k Dec 31, 2022
Pretty diff to html javascript library (diff2html)

diff2html diff2html generates pretty HTML diffs from git diff or unified diff output. Table of Contents Features Online Example Distributions Usage Di

Rodrigo Fernandes 2.3k Dec 29, 2022
Pretty diff to html javascript cli (diff2html-cli)

diff2html-cli Diff to Html generates pretty HTML diffs from unified and git diff output in your terminal Table of Contents Features Online Example Dis

Rodrigo Fernandes 404 Dec 19, 2022
Pretty-print-json - ๐Ÿฆ‹ Pretty-print JSON data into HTML to indent and colorize (written in TypeScript)

pretty-print-json Pretty-print JSON data into HTML to indent and colorize (written in TypeScript) 1) Try It Out Interactive online tool to format JSON

Center Key 87 Dec 30, 2022
JSON Diff Kit - A better JSON differ & viewer

A better JSON differ & viewer, support LCS diff for arrays and recognise some changes as modification apart from simple remove+add.

Rex Zeng 38 Dec 18, 2022
Get a diff view of your Obsidian Sync, File Recovery and Git version history

Version History Diff (for Sync and File Recovery Core plugins and Git) Note This plugin uses private APIs, so it may break at any time. Use at your ow

null 39 Dec 26, 2022
Edit JSON text in-place for a minimal diff

edit-json Edit a textual JSON (not a JavaScript object) for a minimal diff, either programatically or by applying a JSON Patch (RFC6902). When seriali

Gustaf Rรคntilรค 4 Oct 14, 2022
A simple image diff tool powered by avernakis.

Image Diff English | ็ฎ€ไฝ“ไธญๆ–‡ Introduction This is the tutorial project of Avernakis UI. Tiny, but production ready. Install Use npm as nam! (Node App Man

null 45 Dec 3, 2022
๐Ÿ” A Privacy-first Diff tool for everyone. โœ… Your data never hits our servers.

Features ?? Privacy-first developer tool. ?? Run on your Web Browser, Your data is sent nowhere. ?? Find a Difference between two text input for Side

Proxyman 41 Dec 5, 2022
jQuery Timer: Start/Stop/Resume/Remove pretty timer inside any HTML element.

jQuery Timer plugin Lightweight, well tested jQuery pretty timer plugin Start, Pause, Resume and Remove a timer inside any HTML element. Get notified

Walmik Deshpande 291 Nov 4, 2022
A lightweight JavaScript library for creating interactive maps and pretty data visualization.

Jsvectormap A lightweight Javascript library for creating interactive maps and pretty data visualization. Explore docs . Report bug ยท View demo ยท Down

Mustafa Omar 204 Dec 24, 2022
A library for pretty shadows.

shine.js A library for pretty shadows. See the working demo at http://bigspaceship.github.io/shine.js/. Get Started Install using bower: bower install

Big Spaceship 2.2k Dec 23, 2022
A pretty darn cool JavaScript debugger for Brackets

Theseus Theseus is a new type of JavaScript debugger for Node.js, Chrome, and both simultaneously. It is an extension for the Brackets code editor. Th

Adobe Research 1.3k Dec 20, 2022
A javascript framework for developing pretty browser dialogs and notifications.

AlertifyJS AlertifyJS is a javascript framework for developing pretty browser dialogs and notifications. AlertifyJS is an extreme makeover of alertify

Mohammad Younes 2k Jan 2, 2023
Pretty time-series line graphs

Morris.js - pretty time-series line graphs Morris.js is the library that powers the graphs on http://howmanyleft.co.uk/. It's a very simple API for dr

null 7k Dec 24, 2022
qTip2 - Pretty powerful tooltips

qTip2 is no longer maintained. Consider moving to a newer library if you need support or new features! qTip2 - Pretty powerful tooltips Introducingโ€ฆ q

qTip2 2k Dec 20, 2022