Gathering detailed insights and metrics for @nullcc/diff2html
Gathering detailed insights and metrics for @nullcc/diff2html
Pretty diff to html javascript library (diff2html)
Installations
npm install @nullcc/diff2htmlDeveloper Guide
BETA
Typescript
No
Module System
CommonJS, UMD
Min. Node Version
>=4
Node Version
16.13.1
NPM Version
8.3.0
Score
73.2
Supply Chain
97.6
Quality
75.8
Maintenance
50
Vulnerability
99.3
License
Releases
86
3.4.24
3.4.24
Updated on Jan 06, 2023
3.4.23
3.4.23
Updated on Jan 06, 2023
Sticky file headers
3.4.22
Updated on Nov 01, 2022
Add support for overriding highlight languages base on file extension
3.4.20
Updated on Oct 23, 2022
Add language to extension mappings to highlight
3.4.13
Updated on Oct 15, 2021
Improve semantic code highlight
3.4.11
Updated on Sep 03, 2021
Languages
7
TypeScript
Handlebars
CSS
HCL
Mustache
JavaScript
Shell
TypeScript (88.05%)
Handlebars (5.69%)
CSS (4.09%)
HCL (0.96%)
Mustache (0.78%)
JavaScript (0.42%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
3,165 Stars
782 Commits
286 Forks
37 Watchers
7 Branches
46 Contributors
Updated on Jul 13, 2025
Maintainers
1
Package Meta Information
Latest Version
4.3.2
Package Id
@nullcc/diff2html@4.3.2
Unpacked Size
492.83 kB
Size
114.60 kB
File Count
45
NPM Version
8.3.0
Node Version
16.13.1
Published on
Mar 28, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
diff2html
diff2html generates pretty HTML diffs from git or unified diff output.
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
-
Manually download and import
dist/diff2html.min.jsinto your page
How to use
To load correctly in the Browser you always need to include the stylesheet in the final HTML.
Import the stylesheet
1<!-- CSS --> 2<link rel="stylesheet" type="text/css" href="dist/diff2html.css">
You can also refer to it from a CDN like CDNJS.
Browser Library
Import the stylesheet and the library code
1<!-- CSS --> 2<link rel="stylesheet" type="text/css" href="dist/diff2html.css"> 3 4<!-- Javascripts --> 5<script type="text/javascript" src="dist/diff2html.js"></script>
It will now be available as a global variable named Diff2Html.
1var diffHtml = Diff2Html.getPrettyHtml(
2 '<Unified Diff String>',
3 {inputFormat: 'diff', showFiles: true, matching: 'lines', outputFormat: 'side-by-side'}
4);
5document.getElementById("destination-elem-id").innerHTML = diffHtml;Node Module
1let diff2html = require("diff2html").Diff2Html
Angular
- Typescript
1// import diff2html 2import {Diff2Html} from 'diff2html' 3import {Component, OnInit} from '@angular/core'; 4 5 6export class AppDiffComponent implements OnInit { 7 outputHtml: string; 8 constructor() { 9 this.init(); 10 } 11 12 ngOnInit() { 13 } 14 15 init() { 16 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"; 17 let outputHtml = Diff2Html.getPrettyHtml(strInput, {inputFormat: 'diff', showFiles: true, matching: 'lines'}); 18 this.outputHtml = outputHtml; 19 } 20}
- HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>diff2html</title> 5 </head> 6 <body> 7 <div [innerHtml]="outputHtml"></div> 8 </body> 9</html>
.angular-cli.json- Add styles
1"styles": [ 2 "diff2html.min.css" 3]
Vue.js
1<template>
2 <div v-html="prettyHtml" />
3</template>
4
5<script>
6import { Diff2Html } from "diff2html";
7import "diff2html/dist/diff2html.min.css";
8
9export default {
10 data() {
11 return {
12 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"
13 };
14 },
15 computed: {
16 prettyHtml() {
17 return Diff2Html.getPrettyHtml(this.diffs, {
18 inputFormat: "diff",
19 showFiles: true,
20 matching: "lines",
21 outputFormat: "side-by-side"
22 });
23 }
24 }
25};
26</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
typescript/diff2html.d.tsfor a complete API definition in TypeScript.
Check out the
docs/demo.htmlfor 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'showFiles: show a file list before the diff:trueorfalse, default isfalsematching: matching level:'lines'for matching lines,'words'for matching lines and words or'none', default isnonematchWordsThreshold: similarity threshold for word matching, default is 0.25matchingMaxComparisons: perform at most this much comparisons for line matching a block of changes, default is2500maxLineSizeInBlockForComparison: maximum number os characters of the bigger line in a block to apply comparison, default is200maxLineLengthHighlight: only perform diff changes highlight if lines are smaller than this, default is10000templates: object with previously compiled templates to replace parts of the htmlrawTemplates: object with raw not compiled templates to replace parts of the htmlrenderNothingWhenEmpty: render nothing if the diff shows no change in its comparison:trueorfalse, default isfalse
For more information regarding the possible templates look into src/templates
** Diff2HtmlUI Helper Options **
synchronisedScroll: scroll both panes in side-by-side mode:trueorfalse, default isfalse
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
1<!-- CSS --> 2<link rel="stylesheet" type="text/css" href="dist/diff2html.css"> 3 4<!-- Javascripts --> 5<script type="text/javascript" src="dist/diff2html.js"></script> 6<script type="text/javascript" src="dist/diff2html-ui.js"></script>
Init
1var diff2htmlUi = new Diff2HtmlUI({diff: diffString});
2// or
3var diff2htmlUi = new Diff2HtmlUI({json: diffJson});Draw
1diff2htmlUi.draw('html-target-elem', {inputFormat: 'json', showFiles: true, matching: 'lines'});
Syntax Highlight
Add the dependencies. Choose one color scheme, and add the main highlight code. Note that the stylesheet for the color scheme must come before the main diff2html stylesheet. If your favourite language is not included in the default package also add its javascript highlight file.
1<!-- Stylesheet --> 2<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css"> 3<link rel="stylesheet" type="text/css" href="dist/diff2html.css"> 4 5<!-- Javascripts --> 6<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script> 7<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script> 8<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/scala.min.js"></script> 9<script type="text/javascript" src="dist/diff2html-ui.js"></script>
Invoke the Diff2HtmlUI helper
1$(document).ready(function() { 2 var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample}); 3 diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'}); 4 diff2htmlUi.highlightCode('#line-by-line'); 5});
Collapsable File Summary List
Add the dependencies.
1<!-- Javascripts --> 2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script> 3<script type="text/javascript" src="dist/diff2html-ui.js"></script>
Invoke the Diff2HtmlUI helper
1$(document).ready(function() { 2 var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample}); 3 diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'}); 4 diff2htmlUi.fileListCloseable('#line-by-line', false); 5});
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):
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.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
Found 4/9 approved changesets -- score normalized to 4
Reason
security policy file detected
Details
- Info: security policy file detected: SECURITY.md:1
- Warn: no linked content found
- Info: Found disclosure, vulnerability, and/or timelines in security policy: SECURITY.md:1
- Info: Found text in security policy: SECURITY.md:1
Reason
3 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 2
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Warn: no topLevel permission defined: .github/workflows/test-and-publish.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/rtfpessoa/diff2html/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-publish.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/rtfpessoa/diff2html/test-and-publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-publish.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/rtfpessoa/diff2html/test-and-publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-publish.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/rtfpessoa/diff2html/test-and-publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-publish.yml:61: update your workflow using https://app.stepsecurity.io/secureworkflow/rtfpessoa/diff2html/test-and-publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-publish.yml:81: update your workflow using https://app.stepsecurity.io/secureworkflow/rtfpessoa/diff2html/test-and-publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-publish.yml:85: update your workflow using https://app.stepsecurity.io/secureworkflow/rtfpessoa/diff2html/test-and-publish.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test-and-publish.yml:95: update your workflow using https://app.stepsecurity.io/secureworkflow/rtfpessoa/diff2html/test-and-publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-publish.yml:101: update your workflow using https://app.stepsecurity.io/secureworkflow/rtfpessoa/diff2html/test-and-publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-publish.yml:121: update your workflow using https://app.stepsecurity.io/secureworkflow/rtfpessoa/diff2html/test-and-publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-publish.yml:144: update your workflow using https://app.stepsecurity.io/secureworkflow/rtfpessoa/diff2html/test-and-publish.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/test-and-publish.yml:101
- Warn: npmCommand not pinned by hash: .github/workflows/test-and-publish.yml:71
- Info: 0 out of 10 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
- Info: 0 out of 2 npmCommand dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 28 are checked with a SAST tool
Reason
12 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
- Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
- Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Score
3.7
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More