182 lines
5.9 KiB
Markdown
182 lines
5.9 KiB
Markdown
# diff2html
|
|
|
|
[](https://www.codacy.com/app/Codacy/diff2html)
|
|
[](https://www.codacy.com/app/Codacy/diff2html)
|
|
[](https://circleci.com/gh/rtfpessoa/diff2html)
|
|
[](https://dependencyci.com/github/rtfpessoa/diff2html)
|
|
|
|
[](https://www.npmjs.com/package/diff2html)
|
|
[](https://david-dm.org/rtfpessoa/diff2html)
|
|
[](https://david-dm.org/rtfpessoa/diff2html#info=devDependencies)
|
|
|
|
[]()
|
|
[]()
|
|
[](https://www.npmjs.com/package/diff2html)
|
|
[](https://gitter.im/rtfpessoa/diff2html?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
|
|
|
|
diff2html generates pretty HTML diffs from git or unified diff output.
|
|
|
|
[](https://nodei.co/npm/diff2html/)
|
|
|
|
## 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](https://diff2html.xyz/)
|
|
|
|
## Distributions
|
|
|
|
* [WebJar](http://www.webjars.org/)
|
|
|
|
* [Node Module](https://www.npmjs.org/package/diff2html)
|
|
|
|
* [Bower Package](http://bower.io/search/?q=diff2html)
|
|
|
|
* [Node CLI](https://www.npmjs.org/package/diff2html-cli)
|
|
|
|
* Manually download and import `dist/diff2html.min.js` into your page
|
|
|
|
## How to use
|
|
|
|
> Pretty HTML diff
|
|
|
|
Diff2Html.getPrettyHtml(exInput, configuration)
|
|
|
|
> Intermediate Json From Git Word Diff Output
|
|
|
|
Diff2Html.getJsonFromDiff(exInput)
|
|
|
|
> Check out the `index.html` for a complete 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: `true` or `false`, default is `false`
|
|
- `matching`: matching level: `'lines'` for matching lines, `'words'` for matching lines and words or `'none'`, default is `none`
|
|
- `synchronisedScroll`: scroll both panes in side-by-side mode: `true` or `false`, default is `false`
|
|
- `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`
|
|
|
|
## Diff2HtmlUI Helper
|
|
|
|
> Simple wrapper to ease simple tasks in the browser such as: code highlight and js effects
|
|
|
|
### How to use
|
|
|
|
> HTML resource imports
|
|
|
|
```html
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" type="text/css" href="dist/diff2html.css">
|
|
|
|
<!-- Javascripts -->
|
|
<script type="text/javascript" src="dist/diff2html.js"></script>
|
|
<script type="text/javascript" src="dist/diff2html-ui.js"></script>
|
|
```
|
|
|
|
> Init
|
|
|
|
```js
|
|
var diff2htmlUi = new Diff2HtmlUI({diff: diffString});
|
|
// or
|
|
var diff2htmlUi = new Diff2HtmlUI({json: diffJson});
|
|
```
|
|
|
|
> Draw
|
|
|
|
```js
|
|
diff2htmlUi.draw('html-target-elem', {inputFormat: 'json', showFiles: true, matching: 'lines'});
|
|
```
|
|
|
|
> Highlight Code
|
|
|
|
```js
|
|
diff2htmlUi.highlightCode('html-target-elem');
|
|
```
|
|
|
|
> Collapse File Summary List
|
|
|
|
```js
|
|
diff2htmlUi.fileListCloseable('html-target-elem', false);
|
|
```
|
|
|
|
## Syntax Highlight
|
|
|
|
> Add the dependencies.
|
|
Choose one color scheme, and add the main highlight code.
|
|
If your favourite language is not included in the default package also add its javascript highlight file.
|
|
|
|
```html
|
|
<!-- Stylesheet -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/github.min.css">
|
|
|
|
<!-- Javascripts -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/languages/scala.min.js"></script>
|
|
<script type="text/javascript" src="dist/diff2html-ui.js"></script>
|
|
```
|
|
|
|
> Invoke the Diff2HtmlUI helper
|
|
|
|
```js
|
|
$(document).ready(function() {
|
|
var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
|
|
diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'});
|
|
diff2htmlUi.highlightCode('#line-by-line');
|
|
});
|
|
```
|
|
|
|
## Collapsable File Summary List
|
|
|
|
> Add the dependencies.
|
|
|
|
```html
|
|
<!-- Javascripts -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
|
|
<script type="text/javascript" src="dist/diff2html-ui.js"></script>
|
|
```
|
|
|
|
> Invoke the Diff2HtmlUI helper
|
|
|
|
```js
|
|
$(document).ready(function() {
|
|
var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
|
|
diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'});
|
|
diff2htmlUi.fileListCloseable('#line-by-line', false);
|
|
});
|
|
```
|
|
|
|
## 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.
|
|
|
|
## License
|
|
|
|
Copyright 2014-2016 Rodrigo Fernandes. Released under the terms of the MIT license.
|
|
|
|
## Thanks
|
|
|
|
This project is inspired in [pretty-diff](https://github.com/scottgonzalez/pretty-diff) by [Scott González](https://github.com/scottgonzalez).
|
|
|
|
---
|