clean: Improve README with suggestions
This commit is contained in:
Rodrigo Fernandes
parent
8fc491c499
commit
006d82c02b
1 changed files with 184 additions and 185 deletions
447
README.md
447
README.md
|
|
@ -4,7 +4,7 @@
|
||||||
[](https://www.codacy.com/app/rtfpessoa/diff2html?utm_source=github.com&utm_medium=referral&utm_content=rtfpessoa/diff2html&utm_campaign=Badge_Coverage)
|
[](https://www.codacy.com/app/rtfpessoa/diff2html?utm_source=github.com&utm_medium=referral&utm_content=rtfpessoa/diff2html&utm_campaign=Badge_Coverage)
|
||||||
[](https://circleci.com/gh/rtfpessoa/diff2html)
|
[](https://circleci.com/gh/rtfpessoa/diff2html)
|
||||||
|
|
||||||
[](https://www.npmjs.com/package/diff2html)
|
[](https://www.npmjs.com/package/diff2html)
|
||||||
[](https://david-dm.org/rtfpessoa/diff2html)
|
[](https://david-dm.org/rtfpessoa/diff2html)
|
||||||
[](https://david-dm.org/rtfpessoa/diff2html#info=devDependencies)
|
[](https://david-dm.org/rtfpessoa/diff2html#info=devDependencies)
|
||||||
[](https://www.jsdelivr.com/package/npm/diff2html)
|
[](https://www.jsdelivr.com/package/npm/diff2html)
|
||||||
|
|
@ -26,16 +26,17 @@ diff2html generates pretty HTML diffs from git diff or unified diff output.
|
||||||
- [Online Example](#online-example)
|
- [Online Example](#online-example)
|
||||||
- [Distributions](#distributions)
|
- [Distributions](#distributions)
|
||||||
- [Usage](#usage)
|
- [Usage](#usage)
|
||||||
|
- [Diff2HtmlUI Usage](#diff2htmlui-usage)
|
||||||
|
- [Diff2HtmlUI API](#diff2htmlui-api)
|
||||||
|
- [Diff2HtmlUI Configuration](#diff2htmlui-configuration)
|
||||||
|
- [Diff2HtmlUI Browser](#diff2htmlui-browser)
|
||||||
|
- [Diff2HtmlUI Examples](#diff2htmlui-examples)
|
||||||
- [Diff2Html Usage](#diff2html-usage)
|
- [Diff2Html Usage](#diff2html-usage)
|
||||||
- [Diff2Html API](#diff2html-api)
|
- [Diff2Html API](#diff2html-api)
|
||||||
- [Diff2Html Configuration](#diff2html-configuration)
|
- [Diff2Html Configuration](#diff2html-configuration)
|
||||||
- [Diff2Html Browser](#diff2html-browser)
|
- [Diff2Html Browser](#diff2html-browser)
|
||||||
- [Diff2Html NPM / Node.js Library](#diff2html-npm--nodejs-library)
|
- [Diff2Html NPM / Node.js Library](#diff2html-npm--nodejs-library)
|
||||||
- [Diff2Html Examples](#diff2html-examples)
|
- [Diff2Html Examples](#diff2html-examples)
|
||||||
- [Diff2HtmlUI Usage](#diff2htmlui-usage)
|
|
||||||
- [Diff2HtmlUI API](#diff2htmlui-api)
|
|
||||||
- [Diff2HtmlUI Configuration](#diff2htmlui-configuration)
|
|
||||||
- [Diff2HtmlUI Browser](#diff2htmlui-browser)
|
|
||||||
- [Troubleshooting](#troubleshooting)
|
- [Troubleshooting](#troubleshooting)
|
||||||
- [1. Out of memory or Slow execution](#1-out-of-memory-or-slow-execution)
|
- [1. Out of memory or Slow execution](#1-out-of-memory-or-slow-execution)
|
||||||
- [Contribute](#contribute)
|
- [Contribute](#contribute)
|
||||||
|
|
@ -110,228 +111,13 @@ diff2html generates pretty HTML diffs from git diff or unified diff output.
|
||||||
|
|
||||||
Diff2Html can be used in various ways as listed in the [distributions](#distributions) section. The two main ways are:
|
Diff2Html can be used in various ways as listed in the [distributions](#distributions) section. The two main ways are:
|
||||||
|
|
||||||
- [Diff2Html](#diff2html-usage): 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.
|
|
||||||
- [Diff2HtmlUI](#diff2htmlui-usage): using this wrapper makes it easy to inject the html in the DOM and adds some nice
|
- [Diff2HtmlUI](#diff2htmlui-usage): using this wrapper makes it easy to inject the html in the DOM and adds some nice
|
||||||
features to the diff, like syntax highlight.
|
features to the diff, like syntax highlight.
|
||||||
|
- [Diff2Html](#diff2html-usage): 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.
|
||||||
|
|
||||||
Bellow you can find more details and examples about each option.
|
Bellow you can find more details and examples about each option.
|
||||||
|
|
||||||
## Diff2Html Usage
|
|
||||||
|
|
||||||
To load correctly in the Browser you always need to include the stylesheet in the final HTML.
|
|
||||||
|
|
||||||
Import the stylesheet
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!-- CSS -->
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### Diff2Html API
|
|
||||||
|
|
||||||
> JSON representation of the diff
|
|
||||||
|
|
||||||
```ts
|
|
||||||
function parse(diffInput: string, configuration: Diff2HtmlConfig = {}): DiffFile[];
|
|
||||||
```
|
|
||||||
|
|
||||||
> Pretty HTML representation of the diff
|
|
||||||
|
|
||||||
```ts
|
|
||||||
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`
|
|
||||||
- `diffStyle`: show differences level in each line: `word` or `char`, default is `word`
|
|
||||||
- `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)
|
|
||||||
- `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`
|
|
||||||
- `renderNothingWhenEmpty`: render nothing if the diff shows no change in its comparison: `true` or `false`, default is
|
|
||||||
`false`
|
|
||||||
- `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
|
|
||||||
> For more information regarding the possible templates look into
|
|
||||||
> [src/templates](https://github.com/rtfpessoa/diff2html/tree/master/src/templates)
|
|
||||||
|
|
||||||
### Diff2Html Browser
|
|
||||||
|
|
||||||
Import the stylesheet and the library code
|
|
||||||
|
|
||||||
```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`.
|
|
||||||
|
|
||||||
```js
|
|
||||||
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;
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### Diff2Html NPM / Node.js Library
|
|
||||||
|
|
||||||
```js
|
|
||||||
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;
|
|
||||||
```
|
|
||||||
|
|
||||||
### Diff2Html Examples
|
|
||||||
|
|
||||||
#### Diff2Html Example using plain HTML/JS
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en-us"><head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<!--Make sure to load the CSS file in that order-->
|
|
||||||
<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 = {
|
|
||||||
inputFormat: 'json',
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Diff2Html Example using Angular
|
|
||||||
|
|
||||||
- Typescript
|
|
||||||
|
|
||||||
```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
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>diff2html</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div [innerHtml]="outputHtml"></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
```
|
|
||||||
|
|
||||||
- `.angular-cli.json` - Add styles
|
|
||||||
|
|
||||||
```json
|
|
||||||
"styles": [
|
|
||||||
"diff2html.min.css"
|
|
||||||
]
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Diff2Html Example using Vue.js
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Diff2HtmlUI Usage
|
## Diff2HtmlUI Usage
|
||||||
|
|
||||||
> Simple wrapper to ease simple tasks in the browser such as: code highlight and js effects
|
> Simple wrapper to ease simple tasks in the browser such as: code highlight and js effects
|
||||||
|
|
@ -371,8 +157,7 @@ highlightCode(): void
|
||||||
- `fileListToggle`: allow the file summary list to be toggled: `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`
|
- `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`
|
- `fileContentToggle`: allow each file contents to be toggled: `true` or `false`, default is `true`
|
||||||
|
- [All the options](#diff2html-configuration) from Diff2Html are also valid configurations in Diff2HtmlUI
|
||||||
> NOTE: All the options from Diff2Html are also valid configurations in Diff2HtmlUI
|
|
||||||
|
|
||||||
### Diff2HtmlUI Browser
|
### Diff2HtmlUI Browser
|
||||||
|
|
||||||
|
|
@ -405,6 +190,8 @@ diff2htmlUi.draw();
|
||||||
|
|
||||||
#### Syntax Highlight
|
#### Syntax Highlight
|
||||||
|
|
||||||
|
**NOTE:** The highlight.js css should come before the diff2html css
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- Stylesheet -->
|
<!-- Stylesheet -->
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css" />
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css" />
|
||||||
|
|
@ -454,6 +241,218 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Diff2HtmlUI Examples
|
||||||
|
|
||||||
|
#### Example with plain HTML+CSS+JS
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!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 = {
|
||||||
|
inputFormat: 'json',
|
||||||
|
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>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Diff2Html Usage
|
||||||
|
|
||||||
|
### Diff2Html API
|
||||||
|
|
||||||
|
> JSON representation of the diff
|
||||||
|
|
||||||
|
```ts
|
||||||
|
function parse(diffInput: string, configuration: Diff2HtmlConfig = {}): DiffFile[];
|
||||||
|
```
|
||||||
|
|
||||||
|
> Pretty HTML representation of the diff
|
||||||
|
|
||||||
|
```ts
|
||||||
|
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`
|
||||||
|
- `diffStyle`: show differences level in each line: `word` or `char`, default is `word`
|
||||||
|
- `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)
|
||||||
|
- `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`
|
||||||
|
- `renderNothingWhenEmpty`: render nothing if the diff shows no change in its comparison: `true` or `false`, default is
|
||||||
|
`false`
|
||||||
|
- `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
|
||||||
|
> For more information regarding the possible templates look into
|
||||||
|
> [src/templates](https://github.com/rtfpessoa/diff2html/tree/master/src/templates)
|
||||||
|
|
||||||
|
### 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.
|
||||||
|
|
||||||
|
```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`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
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
|
||||||
|
|
||||||
|
```js
|
||||||
|
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
|
||||||
|
|
||||||
|
```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
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>diff2html</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div [innerHtml]="outputHtml"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
- `.angular-cli.json` - Add styles
|
||||||
|
|
||||||
|
```json
|
||||||
|
"styles": [
|
||||||
|
"diff2html.min.css"
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Example with Vue.js
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<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
|
## Troubleshooting
|
||||||
|
|
||||||
### 1. Out of memory or Slow execution
|
### 1. Out of memory or Slow execution
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue