6514ac7477
* use native JS in example instead of jQuery * better module exposing now using exports, module.export, self, window, global and this * add example link to bower and npm definition * add documentation on how to highlight
118 lines
3.3 KiB
Markdown
118 lines
3.3 KiB
Markdown
# Diff to Html by [rtfpessoa](https://github.com/rtfpessoa)
|
|
|
|
Diff to Html generates pretty HTML diffs from git diff output.
|
|
|
|
## 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](http://rtfpessoa.github.io/diff2html/)
|
|
|
|
## 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 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)
|
|
|
|
> Check out the `index.html` for a complete example.
|
|
|
|
## Sintax Hightlight
|
|
|
|
> 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.
|
|
jQuery is optional, just using it to help managing the highlight.
|
|
|
|
```html
|
|
<!-- Stylesheet -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/github.min.css">
|
|
|
|
<!-- Javascripts -->
|
|
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/languages/scala.min.js"></script>
|
|
```
|
|
|
|
> Invoke the highlightjs plugin
|
|
|
|
```js
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// parse the diff to json
|
|
var diffJson = Diff2Html.getJsonFromDiff(lineDiffExample);
|
|
|
|
// collect all the file extensions in the json
|
|
var allFileLanguages = diffJson.map(function (line) {
|
|
return line.language;
|
|
});
|
|
|
|
// remove duplicated languages
|
|
var distinctLanguages = allFileLanguages.filter(function (v, i) {
|
|
return allFileLanguages.indexOf(v) == i;
|
|
});
|
|
|
|
// pass the languages to the highlightjs plugin
|
|
hljs.configure({languages: distinctLanguages});
|
|
|
|
// generate and inject the diff HTML into the desired place
|
|
document.getElementById("line-by-line").innerHTML = Diff2Html.getPrettyHtmlFromJson(diffJson);
|
|
document.getElementById("side-by-side").innerHTML = Diff2Html.getPrettySideBySideHtmlFromJson(diffJson);
|
|
|
|
// collect all the code lines and execute the highlight on them
|
|
var codeLines = document.getElementsByClassName("d2h-code-line-ctn");
|
|
[].forEach.call(codeLines, function (line) {
|
|
hljs.highlightBlock(line);
|
|
});
|
|
});
|
|
```
|
|
|
|
## Contributions
|
|
|
|
All the contributions are welcome.
|
|
|
|
To contribute just send a pull request with your changes and I will review it asap.
|
|
|
|
## License
|
|
|
|
Copyright 2014 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).
|
|
|
|
---
|