Skip to content

Commit ea5456a

Browse files
author
Rodrigo Fernandes
committed
Merge pull request #9 from rtfpessoa/better-highlight
avoid diff prefix on hightlight
2 parents 5395562 + e598a81 commit ea5456a

File tree

9 files changed

+117
-65
lines changed

9 files changed

+117
-65
lines changed

‎css/diff2html.css‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
/* ******************** */
9999
}
100100

101-
.d2h-code-side-line.hljs {
101+
.d2h-code-side-line {
102102
display: block;
103103
white-space: pre;
104104
padding: 0 10px;
@@ -130,6 +130,17 @@
130130
border-radius: 0.2em;
131131
}
132132

133+
.d2h-code-line-prefix {
134+
float: left;
135+
background: none;
136+
padding: 0;
137+
}
138+
139+
.d2h-code-line-ctn {
140+
background: none;
141+
padding: 0;
142+
}
143+
133144
.line-num1 {
134145
display: inline-block;
135146
float: left;

‎dist/diff2html.css‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
/* ******************** */
9999
}
100100

101-
.d2h-code-side-line.hljs {
101+
.d2h-code-side-line {
102102
display: block;
103103
white-space: pre;
104104
padding: 0 10px;
@@ -130,6 +130,17 @@
130130
border-radius: 0.2em;
131131
}
132132

133+
.d2h-code-line-prefix {
134+
float: left;
135+
background: none;
136+
padding: 0;
137+
}
138+
139+
.d2h-code-line-ctn {
140+
background: none;
141+
padding: 0;
142+
}
143+
133144
.line-num1 {
134145
display: inline-block;
135146
float: left;

‎dist/diff2html.js‎

Lines changed: 44 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -872,9 +872,6 @@ function require() {
872872
if (config.charByChar) diff = jsDiff.diffChars(diffLine1, diffLine2);
873873
else diff = jsDiff.diffWordsWithSpace(diffLine1, diffLine2);
874874

875-
//var diff = jsDiff.diffChars(diffLine1, diffLine2);
876-
//var diff = jsDiff.diffWordsWithSpace(diffLine1, diffLine2);
877-
878875
var highlightedLine = "";
879876

880877
diff.forEach(function (part) {
@@ -885,8 +882,14 @@ function require() {
885882
});
886883

887884
return {
888-
o: lineStart1 + removeIns(highlightedLine),
889-
n: lineStart2 + removeDel(highlightedLine)
885+
first: {
886+
prefix: lineStart1,
887+
line: removeIns(highlightedLine)
888+
},
889+
second: {
890+
prefix: lineStart2,
891+
line: removeDel(highlightedLine)
892+
}
890893
}
891894
};
892895

@@ -974,18 +977,18 @@ function require() {
974977
file.blocks.forEach(function (block) {
975978

976979
fileHtml.left += "<tr>\n" +
977-
" <td class=\"d2h-code-side-linenumber " + diffParser.LINE_TYPE.INFO + "\"></td>\n" +
978-
" <td class=\"" + diffParser.LINE_TYPE.INFO + "\">" +
979-
" <div class=\"d2h-code-side-line " + diffParser.LINE_TYPE.INFO + "\">" + utils.escape(block.header) + "</div>" +
980-
" </td>\n" +
981-
"</tr>\n";
980+
" <td class=\"d2h-code-side-linenumber " + diffParser.LINE_TYPE.INFO + "\"></td>\n" +
981+
" <td class=\"" + diffParser.LINE_TYPE.INFO + "\">" +
982+
" <div class=\"d2h-code-side-line " + diffParser.LINE_TYPE.INFO + "\">" + utils.escape(block.header) + "</div>" +
983+
" </td>\n" +
984+
"</tr>\n";
982985

983986
fileHtml.right += "<tr>\n" +
984-
" <td class=\"d2h-code-side-linenumber " + diffParser.LINE_TYPE.INFO + "\"></td>\n" +
985-
" <td class=\"" + diffParser.LINE_TYPE.INFO + "\">" +
986-
" <div class=\"d2h-code-side-line " + diffParser.LINE_TYPE.INFO + "\"></div>" +
987-
" </td>\n" +
988-
"</tr>\n";
987+
" <td class=\"d2h-code-side-linenumber " + diffParser.LINE_TYPE.INFO + "\"></td>\n" +
988+
" <td class=\"" + diffParser.LINE_TYPE.INFO + "\">" +
989+
" <div class=\"d2h-code-side-line " + diffParser.LINE_TYPE.INFO + "\"></div>" +
990+
" </td>\n" +
991+
"</tr>\n";
989992

990993
var oldLines = [], newLines = [];
991994
var tmpHtml = "";
@@ -1020,8 +1023,8 @@ function require() {
10201023

10211024
var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, config);
10221025

1023-
fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, diff.o);
1024-
fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, diff.n);
1026+
fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, diff.first.line, diff.first.prefix);
1027+
fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, diff.second.line, diff.second.prefix);
10251028
}
10261029
} else {
10271030
tmpHtml = processLines(oldLines, newLines);
@@ -1070,11 +1073,17 @@ function require() {
10701073
return fileHtml;
10711074
}
10721075

1073-
function generateSingleLineHtml(type, number, content) {
1076+
function generateSingleLineHtml(type, number, content, prefix) {
1077+
var htmlPrefix = "";
1078+
if (prefix) htmlPrefix = "<span class=\"d2h-code-line-prefix\">" + prefix + "</span>";
1079+
1080+
var htmlContent = "";
1081+
if (content) htmlContent = "<span class=\"d2h-code-line-ctn\">" + content + "</span>";
1082+
10741083
return "<tr>\n" +
10751084
" <td class=\"d2h-code-side-linenumber " + type + "\">" + number + "</td>\n" +
10761085
" <td class=\"" + type + "\">" +
1077-
" <div class=\"d2h-code-side-line " + type + "\">" + content + "</div>" +
1086+
" <div class=\"d2h-code-side-line " + type + "\">" + htmlPrefix + htmlContent + "</div>" +
10781087
" </td>\n" +
10791088
" </tr>\n";
10801089
}
@@ -1084,12 +1093,12 @@ function require() {
10841093
fileHtml.right = "";
10851094

10861095
fileHtml.left = "<tr>\n" +
1087-
" <td class=\"" + diffParser.LINE_TYPE.INFO + "\">" +
1088-
" <div class=\"d2h-code-side-line " + diffParser.LINE_TYPE.INFO + "\">" +
1089-
"File without changes" +
1090-
" </div>" +
1091-
" </td>\n" +
1092-
"</tr>\n";
1096+
" <td class=\"" + diffParser.LINE_TYPE.INFO + "\">" +
1097+
" <div class=\"d2h-code-side-line " + diffParser.LINE_TYPE.INFO + "\">" +
1098+
"File without changes" +
1099+
" </div>" +
1100+
" </td>\n" +
1101+
"</tr>\n";
10931102

10941103
return fileHtml;
10951104
}
@@ -1187,8 +1196,8 @@ function require() {
11871196
config.isCombined = file.isCombined;
11881197
var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, config);
11891198

1190-
processedOldLines += generateLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, diff.o);
1191-
processedNewLines += generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, diff.n);
1199+
processedOldLines += generateLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, diff.first.line, diff.first.prefix);
1200+
processedNewLines += generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, diff.second.line, diff.second.prefix);
11921201
}
11931202

11941203
lines += processedOldLines + processedNewLines;
@@ -1228,14 +1237,20 @@ function require() {
12281237
return lines;
12291238
}
12301239

1231-
function generateLineHtml(type, oldNumber, newNumber, content) {
1240+
function generateLineHtml(type, oldNumber, newNumber, content, prefix) {
1241+
var htmlPrefix = "";
1242+
if (prefix) htmlPrefix = "<span class=\"d2h-code-line-prefix\">" + prefix + "</span>";
1243+
1244+
var htmlContent = "";
1245+
if (content) htmlContent = "<span class=\"d2h-code-line-ctn\">" + content + "</span>";
1246+
12321247
return "<tr>\n" +
12331248
" <td class=\"d2h-code-linenumber " + type + "\">" +
12341249
" <div class=\"line-num1\">" + utils.valueOrEmpty(oldNumber) + "</div>" +
12351250
" <div class=\"line-num2\">" + utils.valueOrEmpty(newNumber) + "</div>" +
12361251
" </td>\n" +
12371252
" <td class=\"" + type + "\">" +
1238-
" <div class=\"d2h-code-line " + type + "\">" + content + "</div>" +
1253+
" <div class=\"d2h-code-line " + type + "\">" + htmlPrefix + htmlContent + "</div>" +
12391254
" </td>\n" +
12401255
"</tr>\n";
12411256
}

‎dist/diff2html.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/diff2html.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sample/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
Author: rtfpessoa
1010
-->
1111

12-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css">
1313

1414
<!--
1515
<link rel="stylesheet" type="text/css" href="../css/diff2html.min.css">
@@ -205,13 +205,13 @@
205205
hljs.configure({languages: uniqueLanguages});
206206

207207
$("#line-by-line").html(diff2Html.getPrettyHtmlFromJson(diffJson));
208-
var code = $(".d2h-code-line");
208+
var code = $(".d2h-code-line-ctn");
209209
code.map(function (i, line) {
210210
hljs.highlightBlock(line);
211211
});
212212

213213
$("#side-by-side").html(diff2Html.getPrettySideBySideHtmlFromJson(diffJson));
214-
var codeSide = $(".d2h-code-side-line");
214+
var codeSide = $(".d2h-code-line-ctn");
215215
codeSide.map(function (i, line) {
216216
hljs.highlightBlock(line);
217217
});

‎src/line-by-line-printer.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,8 @@
8484
config.isCombined = file.isCombined;
8585
var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, config);
8686

87-
processedOldLines += generateLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, diff.o);
88-
processedNewLines += generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, diff.n);
87+
processedOldLines += generateLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, diff.first.line, diff.first.prefix);
88+
processedNewLines += generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, diff.second.line, diff.second.prefix);
8989
}
9090

9191
lines += processedOldLines + processedNewLines;
@@ -125,14 +125,20 @@
125125
return lines;
126126
}
127127

128-
function generateLineHtml(type, oldNumber, newNumber, content) {
128+
function generateLineHtml(type, oldNumber, newNumber, content, prefix) {
129+
var htmlPrefix = "";
130+
if (prefix) htmlPrefix = "<span class=\"d2h-code-line-prefix\">" + prefix + "</span>";
131+
132+
var htmlContent = "";
133+
if (content) htmlContent = "<span class=\"d2h-code-line-ctn\">" + content + "</span>";
134+
129135
return "<tr>\n" +
130136
" <td class=\"d2h-code-linenumber " + type + "\">" +
131137
" <div class=\"line-num1\">" + utils.valueOrEmpty(oldNumber) + "</div>" +
132138
" <div class=\"line-num2\">" + utils.valueOrEmpty(newNumber) + "</div>" +
133139
" </td>\n" +
134140
" <td class=\"" + type + "\">" +
135-
" <div class=\"d2h-code-line " + type + "\">" + content + "</div>" +
141+
" <div class=\"d2h-code-line " + type + "\">" + htmlPrefix + htmlContent + "</div>" +
136142
" </td>\n" +
137143
"</tr>\n";
138144
}

‎src/printer-utils.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,6 @@
4747
if (config.charByChar) diff = jsDiff.diffChars(diffLine1, diffLine2);
4848
else diff = jsDiff.diffWordsWithSpace(diffLine1, diffLine2);
4949

50-
//var diff = jsDiff.diffChars(diffLine1, diffLine2);
51-
//var diff = jsDiff.diffWordsWithSpace(diffLine1, diffLine2);
52-
5350
var highlightedLine = "";
5451

5552
diff.forEach(function (part) {
@@ -60,8 +57,14 @@
6057
});
6158

6259
return {
63-
o: lineStart1 + removeIns(highlightedLine),
64-
n: lineStart2 + removeDel(highlightedLine)
60+
first: {
61+
prefix: lineStart1,
62+
line: removeIns(highlightedLine)
63+
},
64+
second: {
65+
prefix: lineStart2,
66+
line: removeDel(highlightedLine)
67+
}
6568
}
6669
};
6770

‎src/side-by-side-printer.js‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -63,18 +63,18 @@
6363
file.blocks.forEach(function (block) {
6464

6565
fileHtml.left += "<tr>\n" +
66-
" <td class=\"d2h-code-side-linenumber " + diffParser.LINE_TYPE.INFO + "\"></td>\n" +
67-
" <td class=\"" + diffParser.LINE_TYPE.INFO + "\">" +
68-
" <div class=\"d2h-code-side-line " + diffParser.LINE_TYPE.INFO + "\">" + utils.escape(block.header) + "</div>" +
69-
" </td>\n" +
70-
"</tr>\n";
66+
" <td class=\"d2h-code-side-linenumber " + diffParser.LINE_TYPE.INFO + "\"></td>\n" +
67+
" <td class=\"" + diffParser.LINE_TYPE.INFO + "\">" +
68+
" <div class=\"d2h-code-side-line " + diffParser.LINE_TYPE.INFO + "\">" + utils.escape(block.header) + "</div>" +
69+
" </td>\n" +
70+
"</tr>\n";
7171

7272
fileHtml.right += "<tr>\n" +
73-
" <td class=\"d2h-code-side-linenumber " + diffParser.LINE_TYPE.INFO + "\"></td>\n" +
74-
" <td class=\"" + diffParser.LINE_TYPE.INFO + "\">" +
75-
" <div class=\"d2h-code-side-line " + diffParser.LINE_TYPE.INFO + "\"></div>" +
76-
" </td>\n" +
77-
"</tr>\n";
73+
" <td class=\"d2h-code-side-linenumber " + diffParser.LINE_TYPE.INFO + "\"></td>\n" +
74+
" <td class=\"" + diffParser.LINE_TYPE.INFO + "\">" +
75+
" <div class=\"d2h-code-side-line " + diffParser.LINE_TYPE.INFO + "\"></div>" +
76+
" </td>\n" +
77+
"</tr>\n";
7878

7979
var oldLines = [], newLines = [];
8080
var tmpHtml = "";
@@ -109,8 +109,8 @@
109109

110110
var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, config);
111111

112-
fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, diff.o);
113-
fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, diff.n);
112+
fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, diff.first.line, diff.first.prefix);
113+
fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, diff.second.line, diff.second.prefix);
114114
}
115115
} else {
116116
tmpHtml = processLines(oldLines, newLines);
@@ -159,11 +159,17 @@
159159
return fileHtml;
160160
}
161161

162-
function generateSingleLineHtml(type, number, content) {
162+
function generateSingleLineHtml(type, number, content, prefix) {
163+
var htmlPrefix = "";
164+
if (prefix) htmlPrefix = "<span class=\"d2h-code-line-prefix\">" + prefix + "</span>";
165+
166+
var htmlContent = "";
167+
if (content) htmlContent = "<span class=\"d2h-code-line-ctn\">" + content + "</span>";
168+
163169
return "<tr>\n" +
164170
" <td class=\"d2h-code-side-linenumber " + type + "\">" + number + "</td>\n" +
165171
" <td class=\"" + type + "\">" +
166-
" <div class=\"d2h-code-side-line " + type + "\">" + content + "</div>" +
172+
" <div class=\"d2h-code-side-line " + type + "\">" + htmlPrefix + htmlContent + "</div>" +
167173
" </td>\n" +
168174
" </tr>\n";
169175
}
@@ -173,12 +179,12 @@
173179
fileHtml.right = "";
174180

175181
fileHtml.left = "<tr>\n" +
176-
" <td class=\"" + diffParser.LINE_TYPE.INFO + "\">" +
177-
" <div class=\"d2h-code-side-line " + diffParser.LINE_TYPE.INFO + "\">" +
178-
"File without changes" +
179-
" </div>" +
180-
" </td>\n" +
181-
"</tr>\n";
182+
" <td class=\"" + diffParser.LINE_TYPE.INFO + "\">" +
183+
" <div class=\"d2h-code-side-line " + diffParser.LINE_TYPE.INFO + "\">" +
184+
"File without changes" +
185+
" </div>" +
186+
" </td>\n" +
187+
"</tr>\n";
182188

183189
return fileHtml;
184190
}

0 commit comments

Comments
 (0)