diff2html

What is diff2html?

The diff2html npm package is a tool that allows you to convert unified diff output into HTML. It is useful for visualizing differences between files in a human-readable format, making it easier to review changes in code.

What are diff2html's main functionalities?

Generating HTML from Diff

This feature allows you to convert a unified diff string into an HTML string. The HTML output can then be embedded into a web page for visual representation of the differences.

const Diff2Html = require('diff2html');
const diffString = 'diff --git a/file1 b/file1\nindex 83db48f..f7353a0 100644\n--- a/file1\n+++ b/file1\n@@ -1 +1 @@\n-Hello World\n+Hello Diff2Html';
const outputHtml = Diff2Html.html(diffString);
console.log(outputHtml);

Generating JSON from Diff

This feature allows you to parse a unified diff string into a JSON object. The JSON output can be used for further processing or custom rendering.

const Diff2Html = require('diff2html');
const diffString = 'diff --git a/file1 b/file1\nindex 83db48f..f7353a0 100644\n--- a/file1\n+++ b/file1\n@@ -1 +1 @@\n-Hello World\n+Hello Diff2Html';
const outputJson = Diff2Html.parse(diffString);
console.log(outputJson);

Styling the Diff Output

This feature allows you to customize the HTML output with various options such as drawing a file list and matching lines. This makes the diff output more informative and easier to navigate.

const Diff2Html = require('diff2html');
const diffString = 'diff --git a/file1 b/file1\nindex 83db48f..f7353a0 100644\n--- a/file1\n+++ b/file1\n@@ -1 +1 @@\n-Hello World\n+Hello Diff2Html';
const outputHtml = Diff2Html.html(diffString, { drawFileList: true, matching: 'lines' });
console.log(outputHtml);

Other packages similar to diff2html

diff

The 'diff' package provides a set of tools to compare strings, arrays, and objects. It is more focused on providing the raw differences rather than visualizing them, making it suitable for backend processing and custom diff algorithms.

jsdiff

The 'jsdiff' package is another tool for comparing text differences. It offers a variety of diff algorithms and can output differences in several formats, including JSON. However, it does not provide built-in HTML rendering like diff2html.

git-diff

The 'git-diff' package is designed to generate diffs in the same format as the git diff command. It is useful for applications that need to integrate with git repositories but does not offer HTML rendering capabilities.

README

Diff to Html Node Module by rtfpessoa

Diff to Html generates pretty HTML diffs.

Inspiration

This project uses diff2html as base.

Features

• line-by-line and side-by-side diff

• new and old line numbers

• inserted and removed lines

• GitHub like style

Online Example

Go to Diff2HTML

Other Distributions

• WebJar

• Manually download and import diff2html.js into your page

• Node Package CLI diff2html-cli

Setup

sudo npm install -g diff2html

Usage

Require the library using:

var Diff2Html = require('diff2html').Diff2Html;

Pretty Line-by-Line Html From Git Word Diff Output

Diff2Html.getPrettyHtmlFromDiff(exInput)

Pretty Side-by-Side Html From Git Word Diff Output

Diff2Html.getPrettySideBySideHtmlFromDiff(exInput)

Intermediate Json From Git Word Diff Output

Diff2Html.getJsonFromDiff(exInput)

Pretty Line-by-Line Html From Json

Diff2Html.getPrettyHtmlFromJson(exInput)

Pretty Side-by-Side Html From Json

Diff2Html.getPrettySideBySideHtmlFromJson(exInput)

Contribution

All contributions are welcome.

To contribute just send a pull request with your feature,fix,... and it will be reviewed asap.

License

Copyright 2014 Rodrigo Fernandes. Released under the terms of the MIT license.

---