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

side by side diff

Browse source
This commit is contained in:
Rodrigo Fernandes 2014-09-14 20:50:17 +01:00
parent 12f82cdf67
commit aea62331f3
6 changed files with 279 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
README.md
View file

@ -4,7 +4,7 @@ Diff to Html generates pretty HTML diffs from git word diff output.
## Features
* line-by-line` diff
* `line-by-line` and `side-by-side` diff
* char-by-char highlight
@ -14,7 +14,7 @@ Diff to Html generates pretty HTML diffs from git word diff output.
* GitHub like style
## Real Example
## Online Example
> Go to [Diff2HTML](http://rtfpessoa.github.io/diff2html/)
@ -30,15 +30,23 @@ Diff to Html generates pretty HTML diffs from git word diff output.
> Pretty Line-by-Line Html From Git Word Diff Output
Diff2Html.getPrettyHtmlFromDiff(exInput);
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);
Diff2Html.getJsonFromDiff(exInput)
> Pretty Line-by-Line Html From Json
Diff2Html.getPrettyHtmlFromJson(exInput);
Diff2Html.getPrettyHtmlFromJson(exInput)
> Pretty Side-by-Side Html From Json
Diff2Html.getPrettySideBySideHtmlFromJson(exInput)
> Check out the `index.html` for a complete example.

49
diff2html.css
View file

@ -3,7 +3,7 @@
* Diff to HTML (diff2html.css)
* Author: rtfpessoa
* Date: Friday 29 August 2014
* Last Update: Saturday 6 September 2014
* Last Update: Sunday 14 September 2014
*
*/
@ -71,10 +71,21 @@
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;
@ -84,7 +95,17 @@
margin-left: 80px;
}
.d2h-code-line del {
.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;
@ -93,7 +114,8 @@
border-radius: 0.2em;
}
.d2h-code-line ins {
.d2h-code-line ins,
.d2h-code-side-line ins {
display: inline-block;
margin-top: -1px;
text-decoration: none;
@ -106,12 +128,16 @@
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 {
@ -126,12 +152,25 @@
color: rgba(0, 0, 0, 0.3);
text-align: right;
border: solid #eeeeee;
border-width: 0 1px 0 0;
border-width: 0 1px 0 1px;
cursor: pointer;
}
.d2h-code-linenumber:not(:first-child) {
.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 #eeeeee;
border-width: 0 1px 0 1px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
}
.d2h-del {

221
diff2html.js
View file

@ -3,7 +3,7 @@
* Diff to HTML (diff2html.js)
* Author: rtfpessoa
* Date: Friday 29 August 2014
* Last Update: Saturday 6 September 2014
* Last Update: Sunday 14 September 2014
*
* Diff command:
* git diff --word-diff-regex=. HEAD~1
@ -35,7 +35,7 @@
*/
Diff2Html.prototype.getPrettyHtmlFromDiff = function (diffInput) {
var diffJson = generateDiffJson(diffInput);
return generateJsonHtml(diffJson, generateFileHtml);
return generateJsonHtml(diffJson);
};
/*
@ -49,7 +49,22 @@
* Generates pretty html from a json object
*/
Diff2Html.prototype.getPrettyHtmlFromJson = function (diffJson) {
return generateJsonHtml(diffJson, generateFileHtml);
return generateJsonHtml(diffJson);
};
/*
* Generates pretty side by side html from string diff input
*/
Diff2Html.prototype.getPrettySideBySideHtmlFromDiff = function (diffInput) {
var diffJson = generateDiffJson(diffInput);
return generateSideBySideJsonHtml(diffJson);
};
/*
* Generates pretty side by side html from a json object
*/
Diff2Html.prototype.getPrettySideBySideHtmlFromJson = function (diffJson) {
return generateSideBySideJsonHtml(diffJson);
};
var generateDiffJson = function (diffInput) {
@ -213,7 +228,7 @@
* Line By Line HTML
*/
var generateJsonHtml = function (diffFiles, htmlTypeFunction) {
var generateJsonHtml = function (diffFiles) {
return "<div class=\"d2h-wrapper\">\n" +
diffFiles.map(function (file) {
return "<div class=\"d2h-file-wrapper\">\n" +
@ -228,7 +243,7 @@
" <div class=\"d2h-code-wrapper\">\n" +
" <table class=\"d2h-diff-table\">\n" +
" <tbody class=\"d2h-diff-tbody\">\n" +
" " + htmlTypeFunction(file) +
" " + generateFileHtml(file) +
" </tbody>\n" +
" </table>\n" +
" </div>\n" +
@ -314,6 +329,197 @@
"</tr>\n";
};
/*
* Side By Side HTML (work in progress)
*/
var generateSideBySideJsonHtml = function (diffFiles) {
return "<div class=\"d2h-wrapper\">\n" +
diffFiles.map(function (file) {
return "<div class=\"d2h-file-wrapper\">\n" +
" <div class=\"d2h-file-header\">\n" +
" <div class=\"d2h-file-stats\">\n" +
" <span class=\"d2h-lines-added\">+" + file.addedLines + "</span>\n" +
" <span class=\"d2h-lines-deleted\">-" + file.deletedLines + "</span>\n" +
" </div>\n" +
" <div class=\"d2h-file-name\">" + getDiffName(file.oldName, file.newName) + "</div>\n" +
" </div>\n" +
" <div class=\"d2h-files-diff\">\n" +
" <div class=\"d2h-file-side-diff\">\n" +
" <div class=\"d2h-code-wrapper\">\n" +
" <table class=\"d2h-diff-table\">\n" +
" <tbody class=\"d2h-diff-tbody\">\n" +
" " + generateLeftSideFileHtml(file) +
" </tbody>\n" +
" </table>\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"d2h-file-side-diff\">\n" +
" <div class=\"d2h-code-wrapper\">\n" +
" <table class=\"d2h-diff-table\">\n" +
" <tbody class=\"d2h-diff-tbody\">\n" +
" " + generateRightSideFileHtml(file) +
" </tbody>\n" +
" </table>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n";
}).join("\n") +
"</div>\n";
};
var generateLeftSideFileHtml = function (file) {
return file.blocks.map(function (block) {
return "<tr>\n" +
" <td class=\"d2h-code-side-linenumber " + LINE_TYPE.INFO + "\"></td>\n" +
" <td class=\"" + LINE_TYPE.INFO + "\" colspan=\"3\">" +
" <div class=\"d2h-code-side-line " + LINE_TYPE.INFO + "\">" + escape(block.header) + "</div>" +
" </td>\n" +
"</tr>\n" +
block.lines.map(function (line) {
var emptyLine = function () {
var lineData = {};
lineData.number = "";
lineData.content = "";
lineData.type = LINE_TYPE.CONTEXT;
return lineData;
};
var escapedLine = escape(line.content);
var lines = [];
var lineData = {};
switch (line.type) {
case LINE_TYPE.INSERTS:
lineData = {};
lineData.number = valueOrEmpty(line.oldNumber);
lineData.content = removeInserts(escapedLine);
lineData.type = LINE_TYPE.CONTEXT;
lines.push(lineData);
break;
case LINE_TYPE.ALL_NEW:
lines.push(new emptyLine());
break;
case LINE_TYPE.DELETES:
lineData = {};
lineData.number = valueOrEmpty(line.oldNumber);
lineData.content = generateLineDeletions(escapedLine);
lineData.type = LINE_TYPE.DELETES;
lines.push(lineData);
break;
case LINE_TYPE.ALL_DELETED:
lineData = {};
lineData.number = valueOrEmpty(line.oldNumber);
lineData.content = generateLineDeletions(escapedLine);
lineData.type = LINE_TYPE.DELETES;
lines.push(lineData);
break;
case LINE_TYPE.INSERTS_AND_DELETES:
lineData = {};
lineData.number = valueOrEmpty(line.oldNumber);
lineData.content = generateLineDeletions(escapedLine);
lineData.type = LINE_TYPE.DELETES;
lines.push(lineData);
break;
default:
lineData = {};
lineData.number = valueOrEmpty(line.oldNumber);
lineData.content = escapedLine;
lineData.type = LINE_TYPE.CONTEXT;
lines.push(lineData);
break;
}
return "<tr>\n" + lines.map(generateSingleLineHtml).join("\n") + "</tr>\n";
}).join("\n");
}).join("\n");
};
var generateRightSideFileHtml = function (file) {
return file.blocks.map(function (block) {
return "<tr>\n" +
" <td class=\"d2h-code-side-linenumber " + LINE_TYPE.INFO + "\"></td>\n" +
" <td class=\"" + LINE_TYPE.INFO + "\" colspan=\"3\">" +
" <div class=\"d2h-code-side-line " + LINE_TYPE.INFO + "\"></div>" +
" </td>\n" +
"</tr>\n" +
block.lines.map(function (line) {
var emptyLine = function () {
var lineData = {};
lineData.number = "";
lineData.content = "";
lineData.type = LINE_TYPE.CONTEXT;
return lineData;
};
var escapedLine = escape(line.content);
var lines = [];
var lineData = {};
switch (line.type) {
case LINE_TYPE.INSERTS:
lineData = {};
lineData.number = valueOrEmpty(line.newNumber);
lineData.content = generateLineInsertions(escapedLine);
lineData.type = LINE_TYPE.INSERTS;
lines.push(lineData);
break;
case LINE_TYPE.ALL_NEW:
lineData = {};
lineData.number = valueOrEmpty(line.newNumber);
lineData.content = generateLineInsertions(escapedLine);
lineData.type = LINE_TYPE.INSERTS;
lines.push(lineData);
break;
case LINE_TYPE.DELETES:
lineData = {};
lineData.number = valueOrEmpty(line.newNumber);
lineData.content = removeDeletes(escapedLine);
lineData.type = LINE_TYPE.CONTEXT;
lines.push(lineData);
break;
case LINE_TYPE.ALL_DELETED:
lines.push(new emptyLine());
break;
case LINE_TYPE.INSERTS_AND_DELETES:
lineData = {};
lineData.number = valueOrEmpty(line.newNumber);
lineData.content = generateLineInsertions(escapedLine);
lineData.type = LINE_TYPE.INSERTS;
lines.push(lineData);
break;
default:
lineData = {};
lineData.number = valueOrEmpty(line.newNumber);
lineData.content = escapedLine;
lineData.type = LINE_TYPE.CONTEXT;
lines.push(lineData);
break;
}
return "<tr>\n" + lines.map(generateSingleLineHtml).join("\n") + "</tr>\n";
}).join("\n");
}).join("\n");
};
var generateSingleLineHtml = function (line) {
return "<td class=\"d2h-code-side-linenumber " + line.type + "\">" + line.number + "</td>\n" +
" <td class=\"" + line.type + "\">" +
" <div class=\"d2h-code-side-line " + line.type + "\">" + line.content + "</div>" +
" </td>\n";
};
/*
* HTML Helpers
*/
@ -342,11 +548,6 @@
replace(/(\[-.*?-\])/g, "");
};
var cleanLine = function (line) {
return line.slice(0).replace(/({\+(.*?)\+})/g, "$2").
replace(/(\[-(.*?)-\])/g, "$2");
};
/*
* Utils
*/

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-file-diff{overflow-x:scroll}.d2h-code-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:80px}.d2h-code-line del{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#f99;font-weight:700;border-radius:.2em}.d2h-code-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#6f7;font-weight:700;border-radius:.2em}.line-num1{display:inline-block;float:left;width:30px}.line-num2{display:inline-block;float:right;width:30px}.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 0 0;cursor:pointer}.d2h-code-linenumber:not(:first-child){border-width:0 1px}.d2h-del{background-color:#f7c8c8;border-color:#e9aeae}.d2h-ins{background-color:#ceffce;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;color:rgba(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{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:#f99;font-weight:700;border-radius:.2em}.d2h-code-line ins,.d2h-code-side-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#6f7;font-weight:700;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:#f7c8c8;border-color:#e9aeae}.d2h-ins{background-color:#ceffce;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

11
index.html
View file

@ -8,7 +8,7 @@
Diff to HTML (template.html)
Author: rtfpessoa
Date: Friday 29 August 2014
Last Update: Saturday 6 September 2014
Last Update: Sunday 14 September 2014
-->
<!--<link rel="stylesheet" type="text/css" href="diff2html.css">-->
@ -63,6 +63,8 @@
var diffJson = Diff2Html.getJsonFromDiff(exInput);
var lineByLineDiffHtml = Diff2Html.getPrettyHtmlFromJson(diffJson);
document.getElementById('line-by-line').innerHTML = lineByLineDiffHtml;
var sideBySideDiffHtml = Diff2Html.getPrettySideBySideHtmlFromJson(diffJson);
document.getElementById('side-by-side').innerHTML = sideBySideDiffHtml;
}
</script>
@ -72,7 +74,12 @@
<h2>Line by Line</h2>
<div id="line-by-line" style="margin: 0 auto; width: 900px;">
<div id="line-by-line" style="margin: 0 auto; max-width: 900px;">
</div>
<h2>Side by Side</h2>
<div id="side-by-side" style="margin: 0 auto;">
</div>
</body>
</html>