diff2html vs git-diff vs diff2html-cli vs diff
Generating and Visualizing Code Diffs in JavaScript Applications
Search packages..
diff2htmlgit-diffdiff2html-clidiffSimilar Packages:

Generating and Visualizing Code Diffs in JavaScript Applications

The diff package is the industry standard for generating text differences in pure JavaScript. diff2html takes those differences and renders them into rich, interactive HTML. diff2html-cli provides a command-line interface for the renderer, useful for CI/CD pipelines. git-diff is often used for parsing existing git diff output or wrapping git commands, though it is less universally maintained than diff. Together, these tools cover the entire lifecycle of change detection and presentation.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
diff2html369,5733,3272.02 MB25a month agoMIT
git-diff367,91634-98 years agoISC
diff2html-cli34,26158758.9 kB162 years agoMIT
diff09,081510 kB202 months agoBSD-3-Clause

Generating and Visualizing Code Diffs: diff vs diff2html vs git-diff

Building code review tools, migration scripts, or visual regression tests requires reliable diffing and rendering. The JavaScript ecosystem offers several tools for this, but they serve distinct purposes. diff handles the logic of finding changes. diff2html handles the visual presentation. diff2html-cli brings that presentation to the terminal. git-diff often sits in a niche for parsing git-specific output. Let's break down how they work and when to use each.

🧠 Core Diff Generation: Pure JS vs Git Wrappers

diff is a pure JavaScript implementation. It does not require git to be installed. It works on strings, arrays, or objects.

// diff: Generate diff in pure JS
import { diffLines } from 'diff';

const oldText = 'line 1\nline 2';
const newText = 'line 1\nline 3';

const changes = diffLines(oldText, newText);
changes.forEach(part => {
  console.log(part.added ? 'added' : part.removed ? 'removed' : 'unchanged', part.value);
});

git-diff packages often wrap the system git command or parse git output. This means they depend on the environment having git installed.

// git-diff: Often wraps system git or parses git output
import gitDiff from 'git-diff';

// Usage varies by specific package version, often requires file paths
// This example represents a typical wrapper pattern
const output = await gitDiff({
  oldPath: './src/file.js',
  newPath: './src/file-new.js'
});
console.log(output); // Returns git-formatted string

Trade-off: diff is portable and works in browsers. git-diff is tied to Node.js environments with git installed but respects .gitignore and binary handling better if wrapping the binary.

🎨 Rendering Diffs: HTML Generation

diff2html specializes in turning diff data (usually unified diff strings) into HTML. It handles syntax highlighting and line numbers.

// diff2html: Render diff string to HTML
import { Diff2HtmlUI } from 'diff2html';

const diffString = '--- a/file.js\n+++ b/file.js\n@@ -1 +1 @@\n-old\n+new';

const targetElement = document.getElementById('myDiff');
const configuration = { drawFileList: true, matching: 'lines' };

const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
diff2htmlUi.draw();

diff does not render HTML. You would have to build the UI yourself from the change objects it returns.

// diff: No built-in HTML rendering
// You must map the 'changes' array to DOM elements manually
const html = changes.map(part => 
  `<div class="${part.added ? 'add' : part.removed ? 'rem' : ''}">${part.value}</div>`
).join('');

git-diff typically returns a string. It does not render HTML either.

// git-diff: Returns raw string, no rendering
// You must pass the output to a renderer like diff2html
const rawDiff = await gitDiff({ oldPath, newPath });
// Pass rawDiff to diff2html for visualization

πŸ’» Command Line Usage

diff2html-cli allows you to generate HTML files from diffs directly in your terminal. This is useful for CI artifacts.

# diff2html-cli: Generate HTML from stdin or file
cat my-changes.diff | diff2html -i stdin -o file -o my-diff.html

# Or compare two files directly
diff2html -i file -f old.js new.js -o file -o report.html

diff is a library, not a CLI tool. You must write a script to use it.

// diff: No CLI, requires custom script
// node script.js
import { diffLines } from 'diff';
// ... logic to read files and print output

git-diff is also primarily a library, though some versions might expose binaries. It is not a standard reporting tool like diff2html-cli.

// git-diff: Library usage in scripts
// Not typically used as a standalone CLI reporter

πŸ” Parsing and Compatibility

diff2html includes a parser. It can take the output from diff or git-diff and render it.

// diff2html: Can parse unified diff strings
import { parse } from 'diff2html';

const diffInput = '--- a.txt\n+++ b.txt\n@@ -1 +1 @@\n-old\n+new';
const jsonOutput = parse(diffInput);
// Returns structured JSON of files and changes

diff outputs a structured array of change objects, not a unified diff string by default (though it can generate patches).

// diff: Create a unified patch string
import { createTwoFilesPatch } from 'diff';

const patch = createTwoFilesPatch('old.txt', 'new.txt', oldText, newText);
console.log(patch); // Unified diff format compatible with diff2html

git-diff outputs git-style unified diffs. This is compatible with diff2html.

// git-diff: Output is usually git-compatible unified diff
// Directly compatible with diff2html input
const gitOutput = await gitDiff({ oldPath, newPath });
// Pass gitOutput directly to diff2html

πŸ› οΈ Integration Patterns

Pattern 1: In-Browser Code Review

Use diff to generate the change set and diff2html to show it.

// Browser Integration
import { createTwoFilesPatch } from 'diff';
import { Diff2HtmlUI } from 'diff2html';

const patch = createTwoFilesPatch('a.js', 'b.js', oldCode, newCode);
new Diff2HtmlUI(document.getElementById('diff'), patch, {}).draw();

Pattern 2: CI/CD Report Generation

Use diff2html-cli to create an artifact from a git diff.

# CI Script
git diff HEAD~1 HEAD > changes.diff
diff2html -i file -f changes.diff -o file -o report.html
# Upload report.html as artifact

Pattern 3: Legacy Git Parsing

Use git-diff if you are reading existing git logs or patches.

// Legacy Parsing
import gitDiff from 'git-diff';
// Use only if you need specific git binary flags
const result = await gitDiff({ path: './repo', flags: ['--stat'] });

⚠️ Maintenance and Stability

diff is highly stable and widely used by tools like Jest and Mocha. It is safe for production.

diff2html is actively maintained and regularly updated for security and features.

git-diff packages on npm vary widely in quality. Many are unmaintained or deprecated. Relying on them introduces risk compared to diff.

diff2html-cli tracks the diff2html library and is stable for CLI usage.

πŸ“Š Summary Table

Featurediffdiff2htmldiff2html-cligit-diff
Primary RoleGenerate diffsRender HTMLCLI ReporterParse/Wrap Git
EnvironmentBrowser & NodeBrowser & NodeCLI / NodeNode (Git required)
OutputJS Objects / PatchHTML String / UIHTML FileGit String
DependenciesNoneNoneNode.jsGit Binary (often)
Maintenanceβœ… Highβœ… Highβœ… High⚠️ Variable

πŸ’‘ Final Recommendation

For most frontend architectures, combine diff and diff2html.

Use diff to calculate changes in your application state or text content. It is dependency-free and works everywhere.

Use diff2html to present those changes to the user. It saves weeks of UI development time.

Use diff2html-cli for automation scripts where you need a quick HTML report without writing Node.js code.

Avoid git-diff unless you have a specific requirement to parse existing git patch files or wrap git commands. The diff package handles text comparison more reliably for general application logic, and diff2html can parse the git output if you really need it.

How to Choose: diff2html vs git-diff vs diff2html-cli vs diff

  • diff2html:

    Choose diff2html when you need to display generated diffs to users in a web interface. It supports multiple output formats, syntax highlighting, and interactive features like collapsing unchanged lines, making it ideal for code review tools.

  • git-diff:

    Choose git-diff only if you specifically need to parse existing git-formatted diff strings or wrap git commands in a legacy system. For new projects, prefer diff for generation and diff2html for parsing and rendering due to better maintenance.

  • diff2html-cli:

    Choose diff2html-cli when you need to generate HTML diff reports from the command line, such as in CI/CD pipelines or automated scripts where a browser environment is not available.

  • diff:

    Choose diff when you need to generate differences between two strings or objects directly within your JavaScript code. It is the most robust and actively maintained option for in-browser or Node.js diffing logic without relying on external git binaries.

Similar Npm Packages to diff2html

diff2html is a JavaScript library that converts diff output into HTML format, making it easier to visualize changes in files. It is particularly useful for developers who want to display differences between file versions in a clear and user-friendly manner. While diff2html provides a robust solution for rendering diffs, there are several alternatives in the ecosystem that offer similar functionality. Here are a few noteworthy options:

  • diff is a simple and lightweight library for computing differences between two strings or files. It provides a straightforward API for generating diffs and can be used in various applications, including those that require custom diff rendering. If you need a basic solution for generating diffs without the need for HTML formatting, the diff library is an excellent choice.
  • diff2html-cli is a command-line interface for the diff2html library. It allows users to generate HTML diff output directly from the command line, making it convenient for quick diff visualizations without needing to integrate the library into a larger application. If you prefer working in a terminal environment and need a quick way to visualize diffs, diff2html-cli is a practical option.
  • diff3 is a library designed for comparing three different versions of a file. It is particularly useful for merge conflict resolution in version control systems. If your workflow involves handling three-way merges and you need to visualize the differences among three versions, diff3 provides the necessary tools to do so effectively.
  • react-diff-view is a React component for rendering diffs in a web application. It provides a simple way to display differences between two text inputs, making it an excellent choice for React developers who want to integrate diff visualization directly into their applications. If you're building a React app and need to show diffs, react-diff-view offers a seamless solution.

To see how these packages compare, check out the comparison: Comparing diff vs diff2html vs diff2html-cli vs diff3 vs react-diff-view.

Similar Npm Packages to diff2html-cli

diff2html-cli is a command-line interface tool that converts diff output into HTML format. This tool is particularly useful for developers who want to visualize changes in code or text files in a more readable and aesthetically pleasing way. By generating HTML reports from diff outputs, diff2html-cli allows users to easily share and review changes, making it a valuable asset in collaborative development environments.

While diff2html-cli serves a specific purpose, there are several alternatives that also provide functionalities for working with diffs:

  • diff is a popular library for calculating differences between two strings or files. It provides a simple API to generate diffs and can be used in various applications, including web and server-side environments. While it does not directly convert diffs to HTML, it can be a foundational tool for developers looking to implement custom diff solutions or integrate diff capabilities into their applications.
  • diff2html is a library that converts diff outputs into HTML format, similar to diff2html-cli. However, it is designed to be used within JavaScript applications rather than as a command-line tool. This library is particularly useful for developers who want to integrate diff visualization directly into their web applications, offering flexibility in how diffs are displayed and styled.
  • git-diff is a command-line tool that comes with Git, allowing users to view differences between commits, branches, and files in a Git repository. While it does not provide HTML output directly, it is an essential tool for developers working with version control, enabling them to see changes in their codebase effectively. For those who primarily work within Git, git-diff is a fundamental command that provides immediate insights into code changes.

To compare these packages and see how they stack up against each other, check out the following link: Comparing diff vs diff2html vs diff2html-cli vs git-diff.

Similar Npm Packages to diff

diff is a popular npm package used for comparing two strings or text files and identifying the differences between them. It provides a simple API to generate a diff output, which can be useful in various applications, such as version control systems, text editors, or any scenario where tracking changes is necessary. While diff is a solid choice for basic diffing needs, there are several alternatives available that offer additional features or cater to specific use cases. Here are a few noteworthy alternatives:

  • deep-diff is a library designed for deep comparison of JavaScript objects. Unlike the basic string comparison provided by diff, deep-diff can handle nested structures and complex data types, making it ideal for applications that need to track changes in object states. It provides detailed information about the differences, including added, deleted, and modified properties, which can be particularly useful in state management or data synchronization scenarios.

  • diff-match-patch is a library developed by Google that provides a robust solution for comparing and patching text. It offers advanced algorithms for computing differences, handling large texts efficiently, and generating patches to apply changes. This library is particularly useful for applications that require high-performance diffing and merging capabilities, such as collaborative editing tools or content management systems.

  • diff2html is a library that converts diff outputs into HTML format, making it easy to display differences in a visually appealing way. It works well with the output generated by the diff library and can be a great addition to applications that need to present changes in a user-friendly manner. If you want to visualize diffs in your web application, diff2html is an excellent choice.

  • react-diff-view is a React component that allows you to display differences between two pieces of text in a side-by-side or inline format. It is built on top of the diff library and provides a simple way to integrate diff visualization into React applications. If you are working with React and need to show diffs, react-diff-view offers a straightforward solution.

For a comprehensive comparison of these packages, check out the following link: Comparing deep-diff vs diff vs diff-match-patch vs diff2html vs react-diff-view.

README for 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/11.8.0/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();
});

When using the auto color scheme, you will need to specify both the light and dark themes for highlight.js to use.

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css"
  media="screen and (prefers-color-scheme: light)"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css"
  media="screen and (prefers-color-scheme: dark)"
/>

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 `npm install 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 of 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.
  • colorScheme: color scheme to use for the diff, default is light. Possible values are light, dark, and auto which will use the browser's preferred color scheme.

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.

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.