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 = { 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 = {
        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
  • srcPrefix: add a prefix to all source (before changes) filepaths, default is ''. Should match the prefix used when generating the diff.
  • dstPrefix: add a prefix to all destination (after changes) filepaths, default is ''. Should match the prefix used when generating the diff
  • 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). Will be given a file index as a number and should return a string.
  • 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
  • maxLineLengthHighlight: only perform diff changes highlight if lines are smaller than this, default is 10000
  • diffStyle: show differences level in each line: 'word' or 'char', default is 'word'
  • renderNothingWhenEmpty: render nothing if the diff shows no change in its comparison: true or false, default is false
  • 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
  • compiledTemplates: object (Hogan.js template values) with previously compiled templates to replace parts of the html, default is {}. For example: { "tag-file-changed": Hogan.compile("<span class="d2h-tag d2h-changed d2h-changed-tag">MODIFIED</span>") }
  • rawTemplates: object (string values) with raw not compiled templates to replace parts of the html, default is {}. For example: { "tag-file-changed": "<span class="d2h-tag d2h-changed d2h-changed-tag">MODIFIED</span>" }

    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
  • side-by-side diff: Info lines shrunk in the right panel

    side-by-side diff: Info lines shrunk in the right panel

    Step 0: Describe your environment

    • OS: Linux Mint 20
    • diff2html version: 3.4.22
    • Using diff2html directly or using diff2html-ui helper: I reproduced with both
    • Extra flags:
    drawFileList: false, 
    matching: 'lines', 
    highlight: true,
    outputFormat: 'side-by-side' 
    

    Step 1: Describe the problem:

    When using side-by-side mode, lines corresponding to @@ ... @@ sections are shrinked in the right panel, causing misalignement.

    diff example:

    --- Schema
    +++ Schema
    @@ -1,5 +1,5 @@
     id INT
    -c1 STRING
    -c2 STRING
    +c1 INT
    +c3 STRING
     c4!.a INT
    -c4!.b STRING
    +c4!.d STRING
    

    Observed Results:

    • Lines are misaligned because lines corresponding to @@ ... @@ section are shrinked in the right panel

    image

    Expected Results:

    • All lines should be correctly aligned

    image

    Relevant Code:

    I made a minimal HTML file to reproduce the problem.

    <html>
      <head>
        <title>Diff2Html Example</title>
        <!-- Include the diff2html library -->
        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/bundles/css/diff2html.min.css" />
        <!-- Javascripts -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/js/diff2html-ui.min.js"></script>
      <body>
        <!-- The container element for the diff output -->
        <div id="diff"></div>
    
        <script>
          // The input data for the diff, in this case the output of the 'git diff' command
          var diffString = `
    --- Schema
    +++ Schema
    @@ -1,5 +1,5 @@
     id INT
    -c1 STRING
    -c2 STRING
    +c1 INT
    +c3 STRING
     c4!.a INT
    -c4!.b STRING
    +c4!.d STRING
    `;
    
            const targetElement = document.getElementById('diff');
            const configuration = { 
              drawFileList: false, 
              matching: 'lines', 
              highlight: true,
              outputFormat: 'side-by-side' 
            };
            const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
            diff2htmlUi.draw();
            diff2htmlUi.highlightCode();
        </script>
      </body>
    </html>
    

    Investigation:

    I found out that the issue appeared between version 3.4.17 and 3.4.18. I traced it back to this commit.

    More precisely, it comes from this .css property :

        .d2h-files-diff {
          display: flex;
        }
    

    The bug disappear when I change it to display: table;

    opened by FurcyPin 0
  • Unecessary horizontal scroll bar on side-by-side diff

    Unecessary horizontal scroll bar on side-by-side diff

    Step 0: Describe your environment

    • OS: Linux Mint 20
    • diff2html version: 3.4.22
    • Using diff2html directly or using diff2html-ui helper: I reproduced with both
    • Extra flags:
    drawFileList: false, 
    matching: 'lines', 
    highlight: true,
    outputFormat: 'side-by-side' 
    

    Step 1: Describe the problem:

    When using side-by-side mode, a scroll bar is displayed even when it's not needed.

    diff example:

    --- Schema
    +++ Schema
    @@ -1,5 +1,5 @@
     id INT
    -c1 STRING
    -c2 STRING
    +c1 INT
    +c3 STRING
     c4!.a INT
    -c4!.b STRING
    +c4!.d STRING
    

    Observed Results:

    • An horizontal scrollbar appears

    image

    Expected Results:

    • No scrollbar should appear when the text is short enough

    image

    Relevant Code:

    I made a minimal HTML file to reproduce the problem.

    <html>
      <head>
        <title>Diff2Html Example</title>
        <!-- Include the diff2html library -->
        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/bundles/css/diff2html.min.css" />
        <!-- Javascripts -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/js/diff2html-ui.min.js"></script>
      <body>
        <!-- The container element for the diff output -->
        <div id="diff"></div>
    
        <script>
          // The input data for the diff, in this case the output of the 'git diff' command
          var diffString = `
    --- Schema
    +++ Schema
    @@ -1,5 +1,5 @@
     id INT
    -c1 STRING
    -c2 STRING
    +c1 INT
    +c3 STRING
     c4!.a INT
    -c4!.b STRING
    +c4!.d STRING
    `;
    
            const targetElement = document.getElementById('diff');
            const configuration = { 
              drawFileList: false, 
              matching: 'lines', 
              highlight: true,
              outputFormat: 'side-by-side' 
            };
            const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
            diff2htmlUi.draw();
            diff2htmlUi.highlightCode();
        </script>
      </body>
    </html>
    

    Investigation:

    I found out that the issue appeared between version 3.1.14 and 3.1.15. I traced it back to this commit.

    More precisely, it comes from this .css property :

          .d2h-code-side-line {
            width: 100%;
          }
    

    The bug disappear when I either remove that line or change it to width: auto; I'd be happy to make a PR, just tell me which option is best.

    Disclaimer: I'm an experienced developer, but I am a n00b when it comes to html and .css, I suppose the best option is obvious for you.

    opened by FurcyPin 0
  • 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 2
  • 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
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
Knwl.js is a Javascript library that parses through text for dates, times, phone numbers, emails, places, and more.

Knwl.js Knwl.js is a Javascript library that parses through text for dates, times, phone numbers, emails, places, and more. Project Future The future

Ben Moore 5.3k Jan 1, 2023
Node.js object hash library with properties/arrays sorting to provide constant hashes. It also provides a method that returns sorted object strings that can be used for object comparison without hashes.

node-object-hash Tiny and fast node.js object hash library with properties/arrays sorting to provide constant hashes. It also provides a method that r

Alexander 73 Oct 7, 2022
JavaScript parser for FIGlet fonts

_______ _________ _______ _ _______ _________ _________ _______ ( ____ \\__ __/( ____ \( \ ( ____ \\__ __/ \__ _/(

Scott González 114 Oct 15, 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
Pretty UI to make getting details about PS1 stations easy.

ps1data Pretty interface to navigate through PS1 stations at BITS Pilani Disclaimer Given that I had to do this whole thing in about 18 hours, this ha

BITS-ACM 39 Jun 25, 2022
Pretty unicode tables for the command line

cli-table3 This utility allows you to render unicode-aided tables on the command line from your node.js scripts. cli-table3 is based on (and api compa

null 418 Dec 28, 2022