avoid diff prefix on hightlight

css/diff2html.css

@@ -98,7 +98,7 @@
     /* ******************** */
 }
 
-.d2h-code-side-line.hljs {
+.d2h-code-side-line {
     display: block;
     white-space: pre;
     padding: 0 10px;
@@ -130,6 +130,17 @@
     border-radius: 0.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;

dist/diff2html.css

@@ -98,7 +98,7 @@
     /* ******************** */
 }
 
-.d2h-code-side-line.hljs {
+.d2h-code-side-line {
     display: block;
     white-space: pre;
     padding: 0 10px;
@@ -130,6 +130,17 @@
     border-radius: 0.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;

dist/diff2html.js

@@ -872,9 +872,6 @@ function require() {
     if (config.charByChar) diff = jsDiff.diffChars(diffLine1, diffLine2);
     else diff = jsDiff.diffWordsWithSpace(diffLine1, diffLine2);
 
-    //var diff = jsDiff.diffChars(diffLine1, diffLine2);
-    //var diff = jsDiff.diffWordsWithSpace(diffLine1, diffLine2);
-
     var highlightedLine = "";
 
     diff.forEach(function (part) {
@@ -885,8 +882,14 @@ function require() {
     });
 
     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);
 
-              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 {
             tmpHtml = processLines(oldLines, newLines);
@@ -1070,11 +1073,17 @@ function require() {
     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" +
       "    <td class=\"d2h-code-side-linenumber " + type + "\">" + number + "</td>\n" +
       "    <td class=\"" + type + "\">" +
-      "      <div class=\"d2h-code-side-line " + type + "\">" + content + "</div>" +
+      "      <div class=\"d2h-code-side-line " + type + "\">" + htmlPrefix + htmlContent + "</div>" +
       "    </td>\n" +
       "  </tr>\n";
   }
@@ -1187,8 +1196,8 @@ function require() {
               config.isCombined = file.isCombined;
               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;
@@ -1228,14 +1237,20 @@ function require() {
     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" +
       "  <td class=\"d2h-code-linenumber " + type + "\">" +
       "    <div class=\"line-num1\">" + utils.valueOrEmpty(oldNumber) + "</div>" +
       "    <div class=\"line-num2\">" + utils.valueOrEmpty(newNumber) + "</div>" +
       "  </td>\n" +
       "  <td class=\"" + type + "\">" +
-      "    <div class=\"d2h-code-line " + type + "\">" + content + "</div>" +
+      "    <div class=\"d2h-code-line " + type + "\">" + htmlPrefix + htmlContent + "</div>" +
       "  </td>\n" +
       "</tr>\n";
   }

dist/diff2html.min.css

@@ -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}

sample/index.html

@@ -9,7 +9,7 @@
         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">
@@ -205,13 +205,13 @@
             hljs.configure({languages: uniqueLanguages});
 
             $("#line-by-line").html(diff2Html.getPrettyHtmlFromJson(diffJson));
-            var code = $(".d2h-code-line");
+            var code = $(".d2h-code-line-ctn");
             code.map(function (i, line) {
                 hljs.highlightBlock(line);
             });
 
             $("#side-by-side").html(diff2Html.getPrettySideBySideHtmlFromJson(diffJson));
-            var codeSide = $(".d2h-code-side-line");
+            var codeSide = $(".d2h-code-line-ctn");
             codeSide.map(function (i, line) {
                 hljs.highlightBlock(line);
             });

src/line-by-line-printer.js

@@ -84,8 +84,8 @@
               config.isCombined = file.isCombined;
               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;
@@ -125,14 +125,20 @@
     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" +
       "  <td class=\"d2h-code-linenumber " + type + "\">" +
       "    <div class=\"line-num1\">" + utils.valueOrEmpty(oldNumber) + "</div>" +
       "    <div class=\"line-num2\">" + utils.valueOrEmpty(newNumber) + "</div>" +
       "  </td>\n" +
       "  <td class=\"" + type + "\">" +
-      "    <div class=\"d2h-code-line " + type + "\">" + content + "</div>" +
+      "    <div class=\"d2h-code-line " + type + "\">" + htmlPrefix + htmlContent + "</div>" +
       "  </td>\n" +
       "</tr>\n";
   }

src/printer-utils.js

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

src/side-by-side-printer.js

@@ -109,8 +109,8 @@
 
               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 {
             tmpHtml = processLines(oldLines, newLines);
@@ -159,11 +159,17 @@
     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" +
       "    <td class=\"d2h-code-side-linenumber " + type + "\">" + number + "</td>\n" +
       "    <td class=\"" + type + "\">" +
-      "      <div class=\"d2h-code-side-line " + type + "\">" + content + "</div>" +
+      "      <div class=\"d2h-code-side-line " + type + "\">" + htmlPrefix + htmlContent + "</div>" +
       "    </td>\n" +
       "  </tr>\n";
   }