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

Merge pull request #9 from rtfpessoa/better-highlight

Browse source 
avoid diff prefix on hightlight
This commit is contained in:
Rodrigo Fernandes 2015-06-03 18:19:02 +01:00
commit ea5456ad68
9 changed files with 117 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
css/diff2html.css
View file

@ -98,7 +98,7 @@
/* ******************** */ /* ******************** */
} }
.d2h-code-side-line.hljs { .d2h-code-side-line {
display: block; display: block;
white-space: pre; white-space: pre;
padding: 0 10px; padding: 0 10px;
@ -130,6 +130,17 @@
border-radius: 0.2em; border-radius: 0.2em;
} }
.d2h-code-line-prefix {
float: left;
background: none;
padding: 0;
}
.d2h-code-line-ctn {
background: none;
padding: 0;
}
.line-num1 { .line-num1 {
display: inline-block; display: inline-block;
float: left; float: left;

13
dist/diff2html.css vendored
View file

@ -98,7 +98,7 @@
/* ******************** */ /* ******************** */
} }
.d2h-code-side-line.hljs { .d2h-code-side-line {
display: block; display: block;
white-space: pre; white-space: pre;
padding: 0 10px; padding: 0 10px;
@ -130,6 +130,17 @@
border-radius: 0.2em; border-radius: 0.2em;
} }
.d2h-code-line-prefix {
float: left;
background: none;
padding: 0;
}
.d2h-code-line-ctn {
background: none;
padding: 0;
}
.line-num1 { .line-num1 {
display: inline-block; display: inline-block;
float: left; float: left;

41
dist/diff2html.js vendored
View file

@ -872,9 +872,6 @@ function require() {
if (config.charByChar) diff = jsDiff.diffChars(diffLine1, diffLine2); if (config.charByChar) diff = jsDiff.diffChars(diffLine1, diffLine2);
else diff = jsDiff.diffWordsWithSpace(diffLine1, diffLine2); else diff = jsDiff.diffWordsWithSpace(diffLine1, diffLine2);
//var diff = jsDiff.diffChars(diffLine1, diffLine2);
//var diff = jsDiff.diffWordsWithSpace(diffLine1, diffLine2);
var highlightedLine = ""; var highlightedLine = "";
diff.forEach(function (part) { diff.forEach(function (part) {
@ -885,8 +882,14 @@ function require() {
}); });
return { return {
o: lineStart1 + removeIns(highlightedLine), first: {
n: lineStart2 + removeDel(highlightedLine) prefix: lineStart1,
line: removeIns(highlightedLine)
},
second: {
prefix: lineStart2,
line: removeDel(highlightedLine)
}
} }
}; };
@ -1020,8 +1023,8 @@ function require() {
var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, config); var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, config);
fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, diff.o); fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, diff.first.line, diff.first.prefix);
fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, diff.n); fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, diff.second.line, diff.second.prefix);
} }
} else { } else {
tmpHtml = processLines(oldLines, newLines); tmpHtml = processLines(oldLines, newLines);
@ -1070,11 +1073,17 @@ function require() {
return fileHtml; return fileHtml;
} }
function generateSingleLineHtml(type, number, content) { function generateSingleLineHtml(type, number, content, prefix) {
var htmlPrefix = "";
if (prefix) htmlPrefix = "<span class=\"d2h-code-line-prefix\">" + prefix + "</span>";
var htmlContent = "";
if (content) htmlContent = "<span class=\"d2h-code-line-ctn\">" + content + "</span>";
return "<tr>\n" + return "<tr>\n" +
" <td class=\"d2h-code-side-linenumber " + type + "\">" + number + "</td>\n" + " <td class=\"d2h-code-side-linenumber " + type + "\">" + number + "</td>\n" +
" <td class=\"" + type + "\">" + " <td class=\"" + type + "\">" +
" <div class=\"d2h-code-side-line " + type + "\">" + content + "</div>" + " <div class=\"d2h-code-side-line " + type + "\">" + htmlPrefix + htmlContent + "</div>" +
" </td>\n" + " </td>\n" +
" </tr>\n"; " </tr>\n";
} }
@ -1187,8 +1196,8 @@ function require() {
config.isCombined = file.isCombined; config.isCombined = file.isCombined;
var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, config); var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, config);
processedOldLines += generateLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, diff.o); processedOldLines += generateLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, diff.first.line, diff.first.prefix);
processedNewLines += generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, diff.n); processedNewLines += generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, diff.second.line, diff.second.prefix);
} }
lines += processedOldLines + processedNewLines; lines += processedOldLines + processedNewLines;
@ -1228,14 +1237,20 @@ function require() {
return lines; return lines;
} }
function generateLineHtml(type, oldNumber, newNumber, content) { function generateLineHtml(type, oldNumber, newNumber, content, prefix) {
var htmlPrefix = "";
if (prefix) htmlPrefix = "<span class=\"d2h-code-line-prefix\">" + prefix + "</span>";
var htmlContent = "";
if (content) htmlContent = "<span class=\"d2h-code-line-ctn\">" + content + "</span>";
return "<tr>\n" + return "<tr>\n" +
" <td class=\"d2h-code-linenumber " + type + "\">" + " <td class=\"d2h-code-linenumber " + type + "\">" +
" <div class=\"line-num1\">" + utils.valueOrEmpty(oldNumber) + "</div>" + " <div class=\"line-num1\">" + utils.valueOrEmpty(oldNumber) + "</div>" +
" <div class=\"line-num2\">" + utils.valueOrEmpty(newNumber) + "</div>" + " <div class=\"line-num2\">" + utils.valueOrEmpty(newNumber) + "</div>" +
" </td>\n" + " </td>\n" +
" <td class=\"" + type + "\">" + " <td class=\"" + type + "\">" +
" <div class=\"d2h-code-line " + type + "\">" + content + "</div>" + " <div class=\"d2h-code-line " + type + "\">" + htmlPrefix + htmlContent + "</div>" +
" </td>\n" + " </td>\n" +
"</tr>\n"; "</tr>\n";
} }

2
dist/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{display:block;white-space:pre;padding:0 10px;height:18px;line-height:18px;margin-left:80px;color:inherit;overflow-x:inherit;background:none}.d2h-code-side-line.hljs{display:block;white-space:pre;padding:0 10px;height:18px;line-height:18px;margin-left:50px;color:inherit;overflow-x:inherit;background:none}.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 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 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{display:block;white-space:pre;padding:0 10px;height:18px;line-height:18px;margin-left:80px;color:inherit;overflow-x:inherit;background:none}.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:none}.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}.d2h-code-line-prefix{float:left;background:none;padding:0}.d2h-code-line-ctn{background:none;padding:0}.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 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 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}

2
dist/diff2html.min.js vendored
View file

File diff suppressed because one or more lines are too long

6
sample/index.html
View file

@ -9,7 +9,7 @@
Author: rtfpessoa Author: rtfpessoa
--> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css">
<!-- <!--
<link rel="stylesheet" type="text/css" href="../css/diff2html.min.css"> <link rel="stylesheet" type="text/css" href="../css/diff2html.min.css">
@ -205,13 +205,13 @@
hljs.configure({languages: uniqueLanguages}); hljs.configure({languages: uniqueLanguages});
$("#line-by-line").html(diff2Html.getPrettyHtmlFromJson(diffJson)); $("#line-by-line").html(diff2Html.getPrettyHtmlFromJson(diffJson));
var code = $(".d2h-code-line"); var code = $(".d2h-code-line-ctn");
code.map(function (i, line) { code.map(function (i, line) {
hljs.highlightBlock(line); hljs.highlightBlock(line);
}); });
$("#side-by-side").html(diff2Html.getPrettySideBySideHtmlFromJson(diffJson)); $("#side-by-side").html(diff2Html.getPrettySideBySideHtmlFromJson(diffJson));
var codeSide = $(".d2h-code-side-line"); var codeSide = $(".d2h-code-line-ctn");
codeSide.map(function (i, line) { codeSide.map(function (i, line) {
hljs.highlightBlock(line); hljs.highlightBlock(line);
}); });

14
src/line-by-line-printer.js
View file

@ -84,8 +84,8 @@
config.isCombined = file.isCombined; config.isCombined = file.isCombined;
var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, config); var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, config);
processedOldLines += generateLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, diff.o); processedOldLines += generateLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, diff.first.line, diff.first.prefix);
processedNewLines += generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, diff.n); processedNewLines += generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, diff.second.line, diff.second.prefix);
} }
lines += processedOldLines + processedNewLines; lines += processedOldLines + processedNewLines;
@ -125,14 +125,20 @@
return lines; return lines;
} }
function generateLineHtml(type, oldNumber, newNumber, content) { function generateLineHtml(type, oldNumber, newNumber, content, prefix) {
var htmlPrefix = "";
if (prefix) htmlPrefix = "<span class=\"d2h-code-line-prefix\">" + prefix + "</span>";
var htmlContent = "";
if (content) htmlContent = "<span class=\"d2h-code-line-ctn\">" + content + "</span>";
return "<tr>\n" + return "<tr>\n" +
" <td class=\"d2h-code-linenumber " + type + "\">" + " <td class=\"d2h-code-linenumber " + type + "\">" +
" <div class=\"line-num1\">" + utils.valueOrEmpty(oldNumber) + "</div>" + " <div class=\"line-num1\">" + utils.valueOrEmpty(oldNumber) + "</div>" +
" <div class=\"line-num2\">" + utils.valueOrEmpty(newNumber) + "</div>" + " <div class=\"line-num2\">" + utils.valueOrEmpty(newNumber) + "</div>" +
" </td>\n" + " </td>\n" +
" <td class=\"" + type + "\">" + " <td class=\"" + type + "\">" +
" <div class=\"d2h-code-line " + type + "\">" + content + "</div>" + " <div class=\"d2h-code-line " + type + "\">" + htmlPrefix + htmlContent + "</div>" +
" </td>\n" + " </td>\n" +
"</tr>\n"; "</tr>\n";
} }

13
src/printer-utils.js
View file

@ -47,9 +47,6 @@
if (config.charByChar) diff = jsDiff.diffChars(diffLine1, diffLine2); if (config.charByChar) diff = jsDiff.diffChars(diffLine1, diffLine2);
else diff = jsDiff.diffWordsWithSpace(diffLine1, diffLine2); else diff = jsDiff.diffWordsWithSpace(diffLine1, diffLine2);
//var diff = jsDiff.diffChars(diffLine1, diffLine2);
//var diff = jsDiff.diffWordsWithSpace(diffLine1, diffLine2);
var highlightedLine = ""; var highlightedLine = "";
diff.forEach(function (part) { diff.forEach(function (part) {
@ -60,8 +57,14 @@
}); });
return { return {
o: lineStart1 + removeIns(highlightedLine), first: {
n: lineStart2 + removeDel(highlightedLine) prefix: lineStart1,
line: removeIns(highlightedLine)
},
second: {
prefix: lineStart2,
line: removeDel(highlightedLine)
}
} }
}; };

14
src/side-by-side-printer.js
View file

@ -109,8 +109,8 @@
var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, config); var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, config);
fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, diff.o); fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, diff.first.line, diff.first.prefix);
fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, diff.n); fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, diff.second.line, diff.second.prefix);
} }
} else { } else {
tmpHtml = processLines(oldLines, newLines); tmpHtml = processLines(oldLines, newLines);
@ -159,11 +159,17 @@
return fileHtml; return fileHtml;
} }
function generateSingleLineHtml(type, number, content) { function generateSingleLineHtml(type, number, content, prefix) {
var htmlPrefix = "";
if (prefix) htmlPrefix = "<span class=\"d2h-code-line-prefix\">" + prefix + "</span>";
var htmlContent = "";
if (content) htmlContent = "<span class=\"d2h-code-line-ctn\">" + content + "</span>";
return "<tr>\n" + return "<tr>\n" +
" <td class=\"d2h-code-side-linenumber " + type + "\">" + number + "</td>\n" + " <td class=\"d2h-code-side-linenumber " + type + "\">" + number + "</td>\n" +
" <td class=\"" + type + "\">" + " <td class=\"" + type + "\">" +
" <div class=\"d2h-code-side-line " + type + "\">" + content + "</div>" + " <div class=\"d2h-code-side-line " + type + "\">" + htmlPrefix + htmlContent + "</div>" +
" </td>\n" + " </td>\n" +
" </tr>\n"; " </tr>\n";
} }