Update to version 2.0.0-beta18 with better code lines selection

diff2html-ui.js

@@ -16,6 +16,7 @@
 
   var diffJson = null;
   var defaultTarget = "body";
+  var currentSelectionColumnId = -1;
 
   function Diff2HtmlUI(config) {
     var cfg = config || {};
@@ -25,6 +26,8 @@
     } else if (cfg.json) {
       diffJson = cfg.json;
     }
+
+    this._initSelection();
   }
 
   Diff2HtmlUI.prototype.draw = function(targetId, config) {
@@ -132,6 +135,54 @@
     });
   };
 
+  Diff2HtmlUI.prototype._initSelection = function() {
+    var body = $('body');
+    var that = this;
+
+    body.on('mousedown', '.d2h-diff-table', function(event) {
+      var target = $(event.target);
+      var table = target.closest('.d2h-diff-table');
+
+      if (target.closest('.d2h-code-line,.d2h-code-side-line').length) {
+        table.removeClass('selecting-left');
+        table.addClass('selecting-right');
+        currentSelectionColumnId = 1;
+      } else if (target.closest('.d2h-code-linenumber,.d2h-code-side-linenumber').length) {
+        table.removeClass('selecting-right');
+        table.addClass('selecting-left');
+        currentSelectionColumnId = 0;
+      }
+    });
+
+    body.on('copy', '.d2h-diff-table', function(event) {
+      var clipboardData = event.originalEvent.clipboardData;
+      var text = that._getSelectedText();
+      clipboardData.setData('text', text);
+      event.preventDefault();
+    });
+  };
+
+
+  Diff2HtmlUI.prototype._getSelectedText = function() {
+    var sel = window.getSelection();
+    var range = sel.getRangeAt(0);
+    var doc = range.cloneContents();
+    var nodes = doc.querySelectorAll('tr');
+    var text = '';
+    var idx = currentSelectionColumnId;
+
+    if (nodes.length === 0) {
+      text = doc.textContent;
+    } else {
+      [].forEach.call(nodes, function(tr, i) {
+        var td = tr.cells[tr.cells.length === 1 ? 0 : idx];
+        text += (i ? '\n' : '') + td.textContent.replace(/(?:\r\n|\r|\n)/g, '');
+      });
+    }
+
+    return text;
+  };
+
   module.exports.Diff2HtmlUI = Diff2HtmlUI;
 
   // Expose diff2html in the browser

diff2html-ui.min.js

@@ -1 +1 @@
-!function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module){(function(global){!function(){function Diff2HtmlUI(config){var cfg=config||{};cfg.diff?diffJson=Diff2Html.getJsonFromDiff(cfg.diff):cfg.json&&(diffJson=cfg.json)}var diffJson=null,defaultTarget="body";Diff2HtmlUI.prototype.draw=function(targetId,config){var cfg=config||{},$target=this._getTarget(targetId);$target.html(Diff2Html.getPrettyHtml(diffJson,cfg))},Diff2HtmlUI.prototype.fileListCloseable=function(targetId,startVisible){function show(){$showBtn.hide(),$hideBtn.show(),$fileList.show()}function hide(){$hideBtn.hide(),$showBtn.show(),$fileList.hide()}var $target=this._getTarget(targetId),hashTag=this._getHashTag(),$showBtn=$target.find(".d2h-show"),$hideBtn=$target.find(".d2h-hide"),$fileList=$target.find(".d2h-file-list");"files-summary-show"===hashTag?show():"files-summary-hide"===hashTag?hide():startVisible?show():hide(),$showBtn.click(show),$hideBtn.click(hide)},Diff2HtmlUI.prototype.highlightCode=function(targetId){var that=this,$target=that._getTarget(targetId),languages=that._getLanguages($target);hljs.configure({languages:languages});var $codeLines=$target.find(".d2h-code-line-ctn");$codeLines.map(function(i,line){hljs.highlightBlock(line)})},Diff2HtmlUI.prototype._getTarget=function(targetId){var $target;return"object"==typeof targetId&&targetId instanceof jQuery?$target=targetId:"string"==typeof targetId?$target=$(targetId):(console.error("Wrong target provided! Falling back to default value 'body'."),console.log("Please provide a jQuery object or a valid DOM query string."),$target=$(defaultTarget)),$target},Diff2HtmlUI.prototype._getLanguages=function($target){var allFileLanguages=[];return diffJson?allFileLanguages=diffJson.map(function(line){return line.language}):$target.find(".d2h-file-wrapper").map(function(i,file){allFileLanguages.push($(file).data("lang"))}),this._distinct(allFileLanguages)},Diff2HtmlUI.prototype._getHashTag=function(){var docUrl=document.URL,hashTagIndex=docUrl.indexOf("#"),hashTag=null;return-1!==hashTagIndex&&(hashTag=docUrl.substr(hashTagIndex+1)),hashTag},Diff2HtmlUI.prototype._distinct=function(collection){return collection.filter(function(v,i){return collection.indexOf(v)===i})},module.exports.Diff2HtmlUI=Diff2HtmlUI,global.Diff2HtmlUI=Diff2HtmlUI}()}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1]);
+!function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module){(function(global){!function(){function Diff2HtmlUI(config){var cfg=config||{};cfg.diff?diffJson=Diff2Html.getJsonFromDiff(cfg.diff):cfg.json&&(diffJson=cfg.json),this._initSelection()}var diffJson=null,defaultTarget="body",currentSelectionColumnId=-1;Diff2HtmlUI.prototype.draw=function(targetId,config){var cfg=config||{},$target=this._getTarget(targetId);$target.html(Diff2Html.getPrettyHtml(diffJson,cfg))},Diff2HtmlUI.prototype.fileListCloseable=function(targetId,startVisible){function show(){$showBtn.hide(),$hideBtn.show(),$fileList.show()}function hide(){$hideBtn.hide(),$showBtn.show(),$fileList.hide()}var $target=this._getTarget(targetId),hashTag=this._getHashTag(),$showBtn=$target.find(".d2h-show"),$hideBtn=$target.find(".d2h-hide"),$fileList=$target.find(".d2h-file-list");"files-summary-show"===hashTag?show():"files-summary-hide"===hashTag?hide():startVisible?show():hide(),$showBtn.click(show),$hideBtn.click(hide)},Diff2HtmlUI.prototype.highlightCode=function(targetId){var that=this,$target=that._getTarget(targetId),languages=that._getLanguages($target);hljs.configure({languages:languages});var $codeLines=$target.find(".d2h-code-line-ctn");$codeLines.map(function(i,line){hljs.highlightBlock(line)})},Diff2HtmlUI.prototype._getTarget=function(targetId){var $target;return"object"==typeof targetId&&targetId instanceof jQuery?$target=targetId:"string"==typeof targetId?$target=$(targetId):(console.error("Wrong target provided! Falling back to default value 'body'."),console.log("Please provide a jQuery object or a valid DOM query string."),$target=$(defaultTarget)),$target},Diff2HtmlUI.prototype._getLanguages=function($target){var allFileLanguages=[];return diffJson?allFileLanguages=diffJson.map(function(line){return line.language}):$target.find(".d2h-file-wrapper").map(function(i,file){allFileLanguages.push($(file).data("lang"))}),this._distinct(allFileLanguages)},Diff2HtmlUI.prototype._getHashTag=function(){var docUrl=document.URL,hashTagIndex=docUrl.indexOf("#"),hashTag=null;return-1!==hashTagIndex&&(hashTag=docUrl.substr(hashTagIndex+1)),hashTag},Diff2HtmlUI.prototype._distinct=function(collection){return collection.filter(function(v,i){return collection.indexOf(v)===i})},Diff2HtmlUI.prototype._initSelection=function(){var body=$("body"),that=this;body.on("mousedown",".d2h-diff-table",function(event){var target=$(event.target),table=target.closest(".d2h-diff-table");target.closest(".d2h-code-line,.d2h-code-side-line").length?(table.removeClass("selecting-left"),table.addClass("selecting-right"),currentSelectionColumnId=1):target.closest(".d2h-code-linenumber,.d2h-code-side-linenumber").length&&(table.removeClass("selecting-right"),table.addClass("selecting-left"),currentSelectionColumnId=0)}),body.on("copy",".d2h-diff-table",function(event){var clipboardData=event.originalEvent.clipboardData,text=that._getSelectedText();clipboardData.setData("text",text),event.preventDefault()})},Diff2HtmlUI.prototype._getSelectedText=function(){var sel=window.getSelection(),range=sel.getRangeAt(0),doc=range.cloneContents(),nodes=doc.querySelectorAll("tr"),text="",idx=currentSelectionColumnId;return 0===nodes.length?text=doc.textContent:[].forEach.call(nodes,function(tr,i){var td=tr.cells[1===tr.cells.length?0:idx];text+=(i?"\n":"")+td.textContent.replace(/(?:\r\n|\r|\n)/g,"")}),text},module.exports.Diff2HtmlUI=Diff2HtmlUI,global.Diff2HtmlUI=Diff2HtmlUI}()}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1]);

diff2html.css

@@ -274,3 +274,33 @@ ins.d2h-change, del.d2h-change {
     font-size: 10px;
     cursor: pointer;
 }
+
+/*
+ * Selection util.
+ */
+
+.selecting-left .d2h-code-line,
+.selecting-left .d2h-code-line *,
+.selecting-right td.d2h-code-linenumber,
+.selecting-right td.d2h-code-linenumber *,
+.selecting-left .d2h-code-side-line,
+.selecting-left .d2h-code-side-line *,
+.selecting-right td.d2h-code-side-linenumber,
+.selecting-right td.d2h-code-side-linenumber *{
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.selecting-left .d2h-code-line::selection,
+.selecting-left .d2h-code-line *::selection
+.selecting-right td.d2h-code-linenumber::selection,
+.selecting-left .d2h-code-side-line::selection,
+.selecting-left .d2h-code-side-line *::selection,
+.selecting-right td.d2h-code-side-linenumber::selection,
+.selecting-right td.d2h-code-side-linenumber *::selection {
+  background: transparent;
+}

diff2html.js

@@ -2333,32 +2333,30 @@ process.umask = function() { return 0; };
     var oldLine2 = null; // Used for combined diff
     var newLine = null;
 
-    var saveBlock = function() {
-
     /* Add previous block(if exists) before start a new file */
+    var saveBlock = function() {
       if (currentBlock) {
         currentFile.blocks.push(currentBlock);
         currentBlock = null;
       }
     };
 
-    var saveFile = function() {
-
     /*
      * Add previous file(if exists) before start a new one
      * if it has name (to avoid binary files errors)
      */
+    var saveFile = function() {
       if (currentFile && currentFile.newName) {
         files.push(currentFile);
         currentFile = null;
       }
     };
 
+    /* Create file structure */
     var startFile = function() {
       saveBlock();
       saveFile();
 
-      /* Create file structure */
       currentFile = {};
       currentFile.blocks = [];
       currentFile.deletedLines = 0;
@@ -2479,18 +2477,72 @@ process.umask = function() { return 0; };
         return;
       }
 
-      var values = [];
+      if (
-      if (utils.startsWith(line, 'diff')) {
+        utils.startsWith(line, 'diff') || // Git diffs always start with diff
+        !currentFile || // If we do not have a file yet, we should crete one
+        (
+          currentFile && // If we already have some file in progress and
+          (
+            currentFile.oldName && utils.startsWith(line, '---') || // Either we reached a old file identification line
+            currentFile.newName && utils.startsWith(line, '+++')  // Or we reached a new file identification line
+          )
+        )
+      ) {
         startFile();
-      } else if (currentFile && !currentFile.oldName && (values = getSrcFilename(line, config))) {
+      }
+
+      var values;
+
+      /*
+       * --- Date Timestamp[FractionalSeconds] TimeZone
+       * --- 2002-02-21 23:30:39.942229878 -0800
+       */
+      if (currentFile && !currentFile.oldName &&
+        utils.startsWith(line, '---') && (values = getSrcFilename(line, config))) {
         currentFile.oldName = values;
         currentFile.language = getExtension(currentFile.oldName, currentFile.language);
-      } else if (currentFile && !currentFile.newName && (values = getDstFilename(line, config))) {
+        return;
+      }
+
+      /*
+       * +++ Date Timestamp[FractionalSeconds] TimeZone
+       * +++ 2002-02-21 23:30:39.942229878 -0800
+       */
+      if (currentFile && !currentFile.newName &&
+        utils.startsWith(line, '+++') && (values = getDstFilename(line, config))) {
         currentFile.newName = values;
         currentFile.language = getExtension(currentFile.newName, currentFile.language);
-      } else if (currentFile && utils.startsWith(line, '@@')) {
+        return;
+      }
+
+      if (currentFile && utils.startsWith(line, '@')) {
         startBlock(line);
-      } else if ((values = oldMode.exec(line))) {
+        return;
+      }
+
+      /*
+       * There are three types of diff lines. These lines are defined by the way they start.
+       * 1. New line     starts with: +
+       * 2. Old line     starts with: -
+       * 3. Context line starts with: <SPACE>
+       */
+      if (currentBlock && (utils.startsWith(line, '+') || utils.startsWith(line, '-') || utils.startsWith(line, ' '))) {
+        createLine(line);
+        return;
+      }
+
+      if (
+        (currentFile && currentFile.blocks.length) ||
+        (currentBlock && currentBlock.lines.length)
+      ) {
+        startFile();
+      }
+
+      /*
+       * Git diffs provide more information regarding files modes, renames, copies,
+       * commits between changes and similarity indexes
+       */
+      if ((values = oldMode.exec(line))) {
         currentFile.oldMode = values[1];
       } else if ((values = newMode.exec(line))) {
         currentFile.newMode = values[1];
@@ -2532,8 +2584,6 @@ process.umask = function() { return 0; };
       } else if ((values = combinedDeletedFile.exec(line))) {
         currentFile.deletedFileMode = values[1];
         currentFile.isDeleted = true;
-      } else if (currentBlock) {
-        createLine(line);
       }
     });
 
@@ -2758,7 +2808,7 @@ process.umask = function() { return 0; };
 })();
 
 },{"./printer-utils.js":28}],25:[function(require,module,exports){
-(function (global,__dirname){
+(function (__dirname){
 /*
  *
  * Utils (hoganjs-utils.js)
@@ -2776,7 +2826,6 @@ process.umask = function() { return 0; };
   var hoganTemplates = require('./templates/diff2html-templates.js');
 
   var templatesPath = path.resolve(__dirname, 'templates');
-  var templatesCache = {};
 
   function HoganJsUtils() {
   }
@@ -2815,7 +2864,7 @@ process.umask = function() { return 0; };
         var templatePath = path.join(templatesPath, templateKey);
         var templateContent = fs.readFileSync(templatePath + '.mustache', 'utf8');
         template = hogan.compile(templateContent);
-        templatesCache[templateKey] = template;
+        hoganTemplates[templateKey] = template;
       }
     } catch (e) {
       console.error('Failed to read (template: ' + templateKey + ') from fs: ' + e.message);
@@ -2825,9 +2874,7 @@ process.umask = function() { return 0; };
   };
 
   HoganJsUtils.prototype._readFromCache = function(templateKey) {
-    return global.browserTemplates && global.browserTemplates[templateKey] ||
+    return hoganTemplates[templateKey];
-      hoganTemplates[templateKey] ||
-      templatesCache[templateKey];
   };
 
   HoganJsUtils.prototype._templateKey = function(namespace, view) {
@@ -2838,7 +2885,7 @@ process.umask = function() { return 0; };
 
 })();
 
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {},"/src")
+}).call(this,"/src")
 },{"./templates/diff2html-templates.js":31,"fs":1,"hogan.js":18,"path":20}],26:[function(require,module,exports){
 /*
  *
@@ -3084,10 +3131,6 @@ process.umask = function() { return 0; };
       var i, chr, len;
       var hash = 0;
 
-      if (text.length === 0) {
-        return hash;
-      }
-
       for (i = 0, len = text.length; i < len; i++) {
         chr = text.charCodeAt(i);
         hash = ((hash << 5) - hash) + chr;
@@ -3104,8 +3147,7 @@ process.umask = function() { return 0; };
     var oldFilename = file.oldName;
     var newFilename = file.newName;
 
-    if (oldFilename && newFilename && oldFilename !== newFilename &&
+    if (oldFilename && newFilename && oldFilename !== newFilename && !isDevNullName(oldFilename) && !isDevNullName(newFilename)) {
-      !isDevNullName(oldFilename) && !isDevNullName(newFilename)) {
       return oldFilename + ' -> ' + newFilename;
     } else if (newFilename && !isDevNullName(newFilename)) {
       return newFilename;
@@ -3226,13 +3268,6 @@ process.umask = function() { return 0; };
 (function() {
 
   var Rematch = {};
-  Rematch.arrayToString = function arrayToString(a) {
-    if (Object.prototype.toString.apply(a, []) === "[object Array]") {
-      return "[" + a.map(arrayToString).join(", ") + "]";
-    } else {
-      return a;
-    }
-  };
 
   /*
    Copyright (c) 2011 Andrei Mackenzie

diff2html.min.css

@@ -1 +1 @@
-.d2h-code-line-prefix,.line-num1{float:left}.d2h-wrapper{text-align:left}.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}.d2h-lines-added{text-align:right}.d2h-lines-added>*{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px}.d2h-lines-deleted{text-align:left}.d2h-lines-deleted>*{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px}.d2h-file-name-wrapper{display:inline-flex;width:90%}.d2h-file-name{line-height:33px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-file-diff,.d2h-file-side-diff{overflow-x:scroll;overflow-y:hidden}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;width:100%}.d2h-diff-tbody>tr>td>div{height:16px;line-height:16px}.d2h-files-diff{width:100%}.d2h-file-side-diff{display:inline-block;width:50%;margin-right:-4px}.d2h-code-line{display:block;white-space:nowrap;padding:0 10px;margin-left:80px}.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}.d2h-code-line-ctn,.d2h-code-line-prefix{background:0 0;padding:0}.d2h-code-linenumber,.d2h-code-side-linenumber{position:absolute;height:18px;line-height:18px;background-color:#fff;text-align:right;color:rgba(0,0,0,.3);cursor:pointer}.line-num1,.line-num2{width:40px;padding-left:3px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}.line-num2{float:right}.d2h-code-linenumber{box-sizing:border-box;width:86px;padding-left:2px;padding-right:2px;border:solid #eee;border-width:0 1px}.d2h-code-side-linenumber{box-sizing:border-box;width:56px;padding-left:5px;padding-right:5px;border:solid #eee;border-width:0 1px;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}.d2h-del.d2h-change,.d2h-ins.d2h-change{background-color:#ffc}del.d2h-change,ins.d2h-change{background-color:#fad771}.d2h-file-diff .d2h-del.d2h-change{background-color:#fae1af}.d2h-file-diff .d2h-ins.d2h-change{background-color:#ded}.d2h-file-list-wrapper{margin-bottom:10px}.d2h-file-list-wrapper a{text-decoration:none;color:#3572b0}.d2h-file-list-wrapper a:visited{color:#3572b0}.d2h-file-list-header{text-align:left}.d2h-file-list-title{font-weight:700}.d2h-file-list-line{text-align:left;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-list-line .d2h-file-name{line-height:21px}.d2h-file-list{display:block}.d2h-file-switch{display:none;font-size:10px;cursor:pointer}
+.d2h-code-line-prefix,.line-num1{float:left}.d2h-wrapper{text-align:left}.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}.d2h-lines-added{text-align:right}.d2h-lines-added>*{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px}.d2h-lines-deleted{text-align:left}.d2h-lines-deleted>*{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px}.d2h-file-name-wrapper{display:inline-flex;width:90%}.d2h-file-name{line-height:33px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-file-diff,.d2h-file-side-diff{overflow-x:scroll;overflow-y:hidden}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;width:100%}.d2h-diff-tbody>tr>td>div{height:16px;line-height:16px}.d2h-files-diff{width:100%}.d2h-file-side-diff{display:inline-block;width:50%;margin-right:-4px}.d2h-code-line{display:block;white-space:nowrap;padding:0 10px;margin-left:80px}.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}.d2h-code-line-ctn,.d2h-code-line-prefix{background:0 0;padding:0}.d2h-code-linenumber,.d2h-code-side-linenumber{position:absolute;height:18px;line-height:18px;background-color:#fff;text-align:right;color:rgba(0,0,0,.3);cursor:pointer}.line-num1,.line-num2{width:40px;padding-left:3px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}.line-num2{float:right}.d2h-code-linenumber{box-sizing:border-box;width:86px;padding-left:2px;padding-right:2px;border:solid #eee;border-width:0 1px}.d2h-code-side-linenumber{box-sizing:border-box;width:56px;padding-left:5px;padding-right:5px;border:solid #eee;border-width:0 1px;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}.d2h-del.d2h-change,.d2h-ins.d2h-change{background-color:#ffc}del.d2h-change,ins.d2h-change{background-color:#fad771}.d2h-file-diff .d2h-del.d2h-change{background-color:#fae1af}.d2h-file-diff .d2h-ins.d2h-change{background-color:#ded}.d2h-file-list-wrapper{margin-bottom:10px}.d2h-file-list-wrapper a{text-decoration:none;color:#3572b0}.d2h-file-list-wrapper a:visited{color:#3572b0}.d2h-file-list-header{text-align:left}.d2h-file-list-title{font-weight:700}.d2h-file-list-line{text-align:left;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-list-line .d2h-file-name{line-height:21px}.d2h-file-list{display:block}.d2h-file-switch{display:none;font-size:10px;cursor:pointer}.selecting-left .d2h-code-line,.selecting-left .d2h-code-line *,.selecting-left .d2h-code-side-line,.selecting-left .d2h-code-side-line *,.selecting-right td.d2h-code-linenumber,.selecting-right td.d2h-code-linenumber *,.selecting-right td.d2h-code-side-linenumber,.selecting-right td.d2h-code-side-linenumber *{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.selecting-left .d2h-code-line ::selection .selecting-right td.d2h-code-linenumber::selection,.selecting-left .d2h-code-line::selection,.selecting-left .d2h-code-side-line ::selection,.selecting-left .d2h-code-side-line::selection,.selecting-right td.d2h-code-side-linenumber ::selection,.selecting-right td.d2h-code-side-linenumber::selection{background:0 0}

index.html

@@ -228,7 +228,13 @@
       "        </test>\n" +
       " -->\n" +
       "+\n" +
-                "+\n";
+      "+\n" +
+      "--- a/sample.js\n" +
+      "+++ b/sample.js\n" +
+      "@@ -1 +1,2 @@\n" +
+      "-test\n" +
+      "+test1r\n" +
+      "+test2r\n";
 
     $(document).ready(function() {
       var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});