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://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#info=devDependencies)
|
||||
[](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)
|
||||
- [Distributions](#distributions)
|
||||
- [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 API](#diff2html-api)
|
||||
- [Diff2Html Configuration](#diff2html-configuration)
|
||||
- [Diff2Html Browser](#diff2html-browser)
|
||||
- [Diff2Html NPM / Node.js Library](#diff2html-npm--nodejs-library)
|
||||
- [Diff2Html Examples](#diff2html-examples)
|
||||
- [Diff2HtmlUI Usage](#diff2htmlui-usage)
|
||||
- [Diff2HtmlUI API](#diff2htmlui-api)
|
||||
- [Diff2HtmlUI Configuration](#diff2htmlui-configuration)
|
||||
- [Diff2HtmlUI Browser](#diff2htmlui-browser)
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
- [1. Out of memory or Slow execution](#1-out-of-memory-or-slow-execution)
|
||||
- [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](#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
|
||||
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.
|
||||
|
||||
## 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
|
||||
|
||||
> 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`
|
||||
- `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`
|
||||
|
||||
> NOTE: All the options from Diff2Html are also valid configurations in Diff2HtmlUI
|
||||
- [All the options](#diff2html-configuration) from Diff2Html are also valid configurations in Diff2HtmlUI
|
||||
|
||||
### Diff2HtmlUI Browser
|
||||
|
||||
|
|
@ -405,6 +190,8 @@ diff2htmlUi.draw();
|
|||
|
||||
#### Syntax Highlight
|
||||
|
||||
**NOTE:** The highlight.js css should come before the diff2html css
|
||||
|
||||
```html
|
||||
<!-- Stylesheet -->
|
||||
<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
|
||||
|
||||
### 1. Out of memory or Slow execution
|
||||
|
|
|
|||
Loading…
Reference in a new issue