Fix blob multiline highlight

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

8 files changed, 32 insertions, 8 deletions

diff --git a/app/assets/javascripts/blob.js.coffee b/app/assets/javascripts/blob.js.coffee
index 6cdfc182b63..584f6faea16 100644
--- a/app/assets/javascripts/blob.js.coffee
+++ b/app/assets/javascripts/blob.js.coffee
@@ -64,7 +64,7 @@ class BlobView
         nodes.attr("id", hash)
 
     # initialize multi-line select
-    $("#tree-content-holder .line_numbers a[id^=L]").on("click", handleMultiSelect)
+    $("#tree-content-holder .line-numbers a[id^=L]").on("click", handleMultiSelect)
 
     # Highlight the correct lines on load
     highlightBlobLines()
diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee
index 8ea302f256a..3ae6d32210e 100644
--- a/app/assets/javascripts/dispatcher.js.coffee
+++ b/app/assets/javascripts/dispatcher.js.coffee
@@ -4,6 +4,7 @@ $ ->
 class Dispatcher
   constructor: () ->
     @initSearch()
+    @initHighlight()
     @initPageScripts()
 
   initPageScripts: ->
@@ -53,3 +54,10 @@ class Dispatcher
     project_ref = opts.data('autocomplete-project-ref')
 
     new SearchAutocomplete(path, project_id, project_ref)
+
+  initHighlight: ->
+    $('pre code').each (i, e) ->
+      hljs.highlightBlock(e)
+      $(e).html($.map($(e).html().split("\n"), (line, i) ->
+        "<div class='line' id='LC" + (i + 1) + "'>" + line + "</div>"
+      ).join("\n"))
diff --git a/app/assets/javascripts/main.js.coffee b/app/assets/javascripts/main.js.coffee
index dd71a4a1711..9cf4dba815b 100644
--- a/app/assets/javascripts/main.js.coffee
+++ b/app/assets/javascripts/main.js.coffee
@@ -56,9 +56,6 @@ document.addEventListener("page:fetch", unbindEvents)
 document.addEventListener("page:change", stopSpinner)
 
 $ ->
-  $('pre code').each (i, e) ->
-    hljs.highlightBlock(e)
-
   # Click a .one_click_select field, select the contents
   $(".one_click_select").on 'click', -> $(@).select()
 
diff --git a/app/assets/stylesheets/generic/highlight.scss b/app/assets/stylesheets/generic/highlight.scss
index 80b49c61209..7614d2083fc 100644
--- a/app/assets/stylesheets/generic/highlight.scss
+++ b/app/assets/stylesheets/generic/highlight.scss
@@ -16,6 +16,11 @@
     code {
       white-space: pre;
       word-wrap: normal;
+      padding: 0;
+
+      .line {
+        display: inline;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index 1d544b3f246..d370175fb8d 100644
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -1,6 +1,10 @@
 .dark {
   background-color: #232323;
 
+  .line.hll {
+    background: #558;
+  }
+
   .highlight{
     border-left: 1px solid #444;
   }
@@ -15,7 +19,6 @@
 
   .hljs {
     display: block;
-    padding: 0.5em;
     background: #232323;
     color: #E6E1DC;
   }
diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index fb0da7cea91..1557f82f826 100644
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -5,6 +5,10 @@
     border-left: 1px solid #444;
   }
 
+  .line.hll {
+    background: #558;
+  }
+
   .line-numbers a {
     color: #666;
   }
@@ -15,7 +19,7 @@
   }
 
   .hljs {
-    display: block; padding: 0.5em;
+    display: block;
     background: #272822;
   }
 
diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss
index 694f3590f46..6fd32d2a286 100644
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -5,6 +5,10 @@
     border-left: 1px solid #113b46;
   }
 
+  .line.hll {
+    background: #000;
+  }
+
   pre {
     background-color: #002B36;
     color: #eee;
@@ -16,7 +20,6 @@
 
   .hljs {
     display: block;
-    padding: 0.5em;
     background: #002b36;
     color: #839496;
   }
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 7eec3da94d5..880387a3483 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -1,6 +1,10 @@
 .white {
   background-color: #fff;
 
+  .line.hll {
+    background: #FFA;
+  }
+
   .highlight{
     border-left: 1px solid #eee;
   }
@@ -19,7 +23,7 @@
   }
 
   .hljs {
-    display: block; padding: 0.5em;
+    display: block;
     background: #fff; color: black;
   }