rtfpessoa/diff2html rtfpessoa/diff2html

  • Stars
    star
    2,748
  • Rank 16,575 (Top 0.4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated 8 months ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
rtfpessoa/diff2html
github

rtfpessoa

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Pretty diff to html javascript library (diff2html)

diff2html

npm node npm GitHub Actions

npm weekly downloads npm monthly downloads npm yearly downloads npm downloads

jsdelivr CDN Downloads All Contributors

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

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.

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

Diff Text Input

diff2html accepts the text contents of a unified diff or the superset format git diff (https://git-scm.com/docs/git-diff) (not combined or word diff). To provide multiples files as input just concatenate the diffs (just like the output of git diff).

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
stickyFileHeaders(): 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
  • stickyFileHeaders: make file headers sticky: 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>

StimulusJS with TypeScript

import { Controller } from '@hotwired/stimulus';

import { Diff2HtmlUI, Diff2HtmlUIConfig } from 'diff2html/lib/ui/js/diff2html-ui-slim.js';

// Requires `yarn add highlight.js`
import 'highlight.js/styles/github.css';
import 'diff2html/bundles/css/diff2html.min.css';

export default class extends Controller {
  connect(): void {
    const diff2htmlUi = new Diff2HtmlUI(this.diffElement, this.unifiedDiff, this.diffConfiguration);

    diff2htmlUi.draw();
  }

  get unifiedDiff(): string {
    return this.data.get('unifiedDiff') || '';
  }

  get diffElement(): HTMLElement {
    return this.element as HTMLElement;
  }

  get diffConfiguration(): Diff2HtmlUIConfig {
    return {
      drawFileList: true,
      matching: 'lines',
    };
  }
}

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

  • highlightLanguages: Map of extension to language name, used for highlighting. This overrides the default language detection based on file extensions.

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
๐Ÿ’ป
Aaron
๐Ÿ“–
Pierre Grimaud
๐Ÿ“–

Adam Jones
๐Ÿ“–
Arthur Charguรฉraud
๐Ÿ“–
Pierric Cistac
๐Ÿ“– ๐Ÿ’ป
Civan YavuzลŸen
๐Ÿ’ป
Tim Gates
๐Ÿ“–
campersau
๐Ÿ’ป
dependabot-preview[bot]
๐Ÿ’ป

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.

More Repositories

1

diff2html-cli

Pretty diff to html javascript cli (diff2html-cli)
TypeScript
502
star
2

dependency_spy

Find known vulnerabilities in your dependencies
Ruby
89
star
3

yavdb

Yet Another Vulnerability Database
Ruby
14
star
4

sportsflix

Watch the best sports stream in HD from the command line
Ruby
8
star
5

teamcity-aws-elasticbeanstalk-plugin

Teamcity AWS Elastic Beanstalk Plugin
Java
5
star
6

ubuntu-jdk8

Ubuntu Docker with Oracle JDK8
Dockerfile
5
star
7

dmgboy

DMGBoy (Dot Matrix Game Boy) is a Game Boy emulator written in C++
C
3
star
8

codacy-tslint

TypeScript
2
star
9

legacy_dotfiles

Personal settings for MacOS and Ubuntu with tweaked fish, tmux, git, vim
Vim Script
2
star
10

codacy-remark-lint

Docker engine to allow Codacy to have remark-lint support
TypeScript
2
star
11

orientdb-tests

Scala
1
star
12

distributed-twitter-crawler

Simple Distributed Twitter Crawler
Scala
1
star
13

android_bootable_recovery

Xiaomi MI-One Plus Recovery for CyanogenMod
C
1
star
14

bomberman

Java
1
star
15

sslinter

Wrapper around CSSLint for LESS and SASS
JavaScript
1
star
16

glugen

glugen generates http clients for an OpenAPI v3 specification
JavaScript
1
star
17

codacy-cppcheck

Scala
1
star
18

codacy-cli

Codacy Command Line Interface
JavaScript
1
star
19

rtfpessoa.github.io

HTML
1
star
20

miniature-doodle

CSS
1
star
21

lesslinter

Automated linting of LESS and CSS
JavaScript
1
star
22

dotfiles

Shell
1
star
23

stash-scala-client

Scala
1
star