luciano/diff2html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add HightlightJS

Browse source
This commit is contained in:
Rodrigo Fernandes 2015-01-25 00:03:09 +00:00
parent 599057b7b8
commit 2701b10911
5 changed files with 40 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
diff2html.css
View file

@ -3,7 +3,7 @@
* Diff to HTML (diff2html.css) * Diff to HTML (diff2html.css)
* Author: rtfpessoa * Author: rtfpessoa
* Date: Friday 29 August 2014 * Date: Friday 29 August 2014
* Last Update: Saturday 27 September 2014 * Last Update: Sunday 25 January 2015
* *
*/ */
@ -86,22 +86,32 @@
margin-right: -4px; margin-right: -4px;
} }
.d2h-code-line { .d2h-code-line.hljs {
display: block;
white-space: pre; white-space: pre;
padding-left: 10px; padding: 0 10px;
padding-right: 10px;
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;
margin-left: 80px; margin-left: 80px;
/* Override HighlightJS */
color: inherit;
overflow-x: inherit;
background: none;
/* ******************** */
} }
.d2h-code-side-line { .d2h-code-side-line {
display: block;
white-space: pre; white-space: pre;
padding-left: 10px; padding: 0 10px;
padding-right: 10px;
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;
margin-left: 50px; margin-left: 50px;
/* Override HighlightJS */
color: inherit;
overflow-x: inherit;
background: none;
/* ******************** */
} }
.d2h-code-line del, .d2h-code-line del,

2
diff2html.js
View file

@ -3,7 +3,7 @@
* Diff to HTML (diff2html.js) * Diff to HTML (diff2html.js)
* Author: rtfpessoa * Author: rtfpessoa
* Date: Friday 29 August 2014 * Date: Friday 29 August 2014
* Last Update: Saturday 24 January 2015 * Last Update: Sunday 25 January 2015
* *
* Diff command: * Diff command:
* git diff * git diff

2
diff2html.min.css vendored
View file

@ -1 +1 @@
.d2h-wrapper{display:block;margin:0 auto;text-align:left;width:100%}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-file-header{padding:5px 10px;border-bottom:1px solid #d8d8d8;background-color:#f7f7f7;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-stats{display:inline;font-size:12px;text-align:center;max-width:15%}.d2h-lines-added{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px;width:25px}.d2h-lines-deleted{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px;width:25px}.d2h-file-name{display:inline;height:33px;line-height:33px;max-width:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;height:18px;line-height:18px;width:100%}.d2h-files-diff{width:100%}.d2h-file-diff{overflow-x:scroll}.d2h-file-side-diff{display:inline-block;overflow-x:scroll;width:50%;margin-right:-4px}.d2h-code-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:80px}.d2h-code-side-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:50px}.d2h-code-line del,.d2h-code-side-line del{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#ffb6ba;border-radius:.2em}.d2h-code-line ins,.d2h-code-side-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#97f295;border-radius:.2em}.line-num1{display:inline-block;float:left;width:30px;overflow:hidden;text-overflow:ellipsis}.line-num2{display:inline-block;float:right;width:30px;overflow:hidden;text-overflow:ellipsis}.d2h-code-linenumber{position:absolute;width:2%;min-width:65px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,0.3);text-align:right;border:solid #eee;border-width:0 1px;cursor:pointer}.d2h-code-side-linenumber{position:absolute;width:35px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,0.3);text-align:right;border:solid #eee;border-width:0 1px;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.d2h-del{background-color:#fee8e9;border-color:#e9aeae}.d2h-ins{background-color:#dfd;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;color:rgba(0,0,0,0.3);border-color:#d5e4f2} .d2h-wrapper{display:block;margin:0 auto;text-align:left;width:100%}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-file-header{padding:5px 10px;border-bottom:1px solid #d8d8d8;background-color:#f7f7f7;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-stats{display:inline;font-size:12px;text-align:center;max-width:15%}.d2h-lines-added{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px;width:25px}.d2h-lines-deleted{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px;width:25px}.d2h-file-name{display:inline;height:33px;line-height:33px;max-width:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;height:18px;line-height:18px;width:100%}.d2h-files-diff{width:100%}.d2h-file-diff{overflow-x:scroll}.d2h-file-side-diff{display:inline-block;overflow-x:scroll;width:50%;margin-right:-4px}.d2h-code-line.hljs{display:block;white-space:pre;padding:0 10px;height:18px;line-height:18px;margin-left:80px;color:inherit;overflow-x:inherit;background:0 0}.d2h-code-side-line{display:block;white-space:pre;padding:0 10px;height:18px;line-height:18px;margin-left:50px;color:inherit;overflow-x:inherit;background:0 0}.d2h-code-line del,.d2h-code-side-line del{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#ffb6ba;border-radius:.2em}.d2h-code-line ins,.d2h-code-side-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#97f295;border-radius:.2em}.line-num1{display:inline-block;float:left;width:30px;overflow:hidden;text-overflow:ellipsis}.line-num2{display:inline-block;float:right;width:30px;overflow:hidden;text-overflow:ellipsis}.d2h-code-linenumber{position:absolute;width:2%;min-width:65px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,.3);text-align:right;border:solid #eee;border-width:0 1px;cursor:pointer}.d2h-code-side-linenumber{position:absolute;width:35px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,.3);text-align:right;border:solid #eee;border-width:0 1px;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.d2h-del{background-color:#fee8e9;border-color:#e9aeae}.d2h-ins{background-color:#dfd;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;color:rgba(0,0,0,.3);border-color:#d5e4f2}

2
diff2html.min.js vendored
View file

File diff suppressed because one or more lines are too long

26
index.html
View file

@ -8,13 +8,19 @@
Diff to HTML (template.html) Diff to HTML (template.html)
Author: rtfpessoa Author: rtfpessoa
Date: Friday 29 August 2014 Date: Friday 29 August 2014
Last Update: Saturday 27 September 2014 Last Update: Sunday 25 January 2015
--> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
<link rel="stylesheet" type="text/css" href="diff2html.css"> <link rel="stylesheet" type="text/css" href="diff2html.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="jsdiff.js"></script> <script type="text/javascript" src="jsdiff.js"></script>
<script type="text/javascript" src="diff2html.js"></script> <script type="text/javascript" src="diff2html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/scala.min.js"></script>
<script> <script>
var lineDiffExample = 'diff --git a/src/attributes/attr.js b/src/attributes/attr.js\n' + var lineDiffExample = 'diff --git a/src/attributes/attr.js b/src/attributes/attr.js\n' +
'index facdd41..b627fe8 100644\n' + 'index facdd41..b627fe8 100644\n' +
@ -174,11 +180,21 @@
'- return typeof undefined;\n' + '- return typeof undefined;\n' +
'-});\n'; '-});\n';
document.onreadystatechange = function () { $(document).ready(function () {
var diffJson = Diff2Html.getJsonFromDiff(lineDiffExample); var diffJson = Diff2Html.getJsonFromDiff(lineDiffExample);
document.getElementById('line-by-line').innerHTML = Diff2Html.getPrettyHtmlFromJson(diffJson);
document.getElementById('side-by-side').innerHTML = Diff2Html.getPrettySideBySideHtmlFromJson(diffJson); $("#line-by-line").html(Diff2Html.getPrettyHtmlFromJson(diffJson));
} var code = $(".d2h-code-line");
code.map(function (i, line) {
hljs.highlightBlock(line);
});
$("#side-by-side").html(Diff2Html.getPrettySideBySideHtmlFromJson(diffJson));
var codeSide = $(".d2h-code-side-line");
codeSide.map(function (i, line) {
hljs.highlightBlock(line);
});
});
</script> </script>
</head> </head>