luciano/diff2html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Pretty diff to html javascript library (diff2html)
427 commits 6 branches 181 tags 6.7 MiB
TypeScript 88%
Handlebars 5.7%
CSS 4.1%
HCL 1%
Mustache 0.8%
Other 0.4%
Find a file
Rodrigo Fernandes 236347eaec
Merge pull request #256 from rtfpessoa/github-workflows 
feature: Use GitHub workflows
2019-12-29 20:06:49 +00:00
.github feature: Use GitHub workflows :breaking: 2019-12-29 19:35:52 +00:00
.vscode refactor: Refactor build to use webpack 2019-12-22 18:00:52 +00:00
scripts refactor: Refactor build to use webpack 2019-12-22 18:00:52 +00:00
src test: Use Jest snapshots 2019-12-22 19:52:51 +00:00
terraform Update terraform 2018-11-25 10:59:08 +00:00
typings refactor: Move types and use enums 2019-12-22 18:00:50 +00:00
website refactor: Refactor build to use webpack 2019-12-22 18:00:52 +00:00
.all-contributorsrc Add all contributors to README 2019-08-22 23:25:44 +01:00
.editorconfig Add .editorconfig style 2016-04-16 12:07:16 +01:00
.eslintignore refactor: Refactor build to use webpack 2019-12-22 18:00:52 +00:00
.eslintrc.json wip: tweaks to website 2019-12-22 18:00:48 +00:00
.gitignore refactor: Refactor build to use webpack 2019-12-22 18:00:52 +00:00
CNAME refactor: Refactor build to use webpack 2019-12-22 18:00:52 +00:00
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md 2019-05-29 10:32:26 +01:00
CONTRIBUTING.md Update dependencies 2017-10-05 17:28:33 +01:00
CREDITS.md Prepare for 2.0.0-beta17 release 2016-05-01 20:52:25 +01:00
jest.config.js bump: Update dependencies 2019-12-22 21:24:36 +00:00
LICENSE.md Better test order and update deps 2016-10-08 16:31:39 +01:00
package.json feature: Use GitHub workflows :breaking: 2019-12-29 19:35:52 +00:00
README.md feature: Use GitHub workflows :breaking: 2019-12-29 19:35:52 +00:00
SECURITY.md Create SECURITY.md 2019-05-23 20:56:33 +01:00
tsconfig.json refactor: Refactor build to use webpack 2019-12-22 18:00:52 +00:00
webpack.bundles.ts refactor: Refactor build to use webpack 2019-12-22 18:00:52 +00:00
webpack.website.ts refactor: Refactor build to use webpack 2019-12-22 18:00:52 +00:00
yarn.lock bump: Update dependencies 2019-12-22 21:24:36 +00:00

README.md

diff2html

Codacy Quality Badge Codacy Coverage Badge GitHub CI

npm Dependency Status devDependency Status cdnjs

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="bundles/css/diff2html.min.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="bundles/css/diff2html.min.css" />

<!-- Javascripts -->
<script type="text/javascript" src="bundles/js/diff2html.min.js"></script>

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

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

Node Module

const Diff2html = require("diff2html");
const diffJson = Diff2html.parse("<Unified Diff String>");
const diffHtml = Diff2html.html(diffJson, { drawFileList: true });
document.getElementById("destination-elem-id").innerHTML = diffHtml;

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"
]

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.getPrettyHtml(this.diffs, {
        inputFormat: "diff",
        drawFileList: 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 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'
  • drawFileList: show a file list before the diff: true or false, default is false
  • diffStyle: show differences level in each line: word or char, default is word
  • 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
  • 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
  • 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="bundles/css/diff2html.min.css" />

<!-- Javascripts -->
<script type="text/javascript" src="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(diffString, targetElement, configuration);
// or
const diff2htmlUi = new Diff2HtmlUI(diffJson, targetElement, configuration);

Draw

diff2htmlUi.draw();

Syntax Highlight

<!-- 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="bundles/css/diff2html.min.css" />

<!-- Javascripts -->
<script type="text/javascript" src="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(diffString, targetElement, configuration);
  diff2htmlUi.draw();
  diff2htmlUi.highlightCode();
});

Collapsable File Summary List

Add the dependencies.

<!-- Javascripts -->
<script type="text/javascript" src="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(lineDiffExample, targetElement, { drawFileList: true, matching: "lines" });
  diff2htmlUi.draw();
  diff2htmlUi.fileListToggle(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.