Fix blob multiline highlight

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

Fix blob multiline highlight
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Dmitriy Zaporozhets
1 parent 78b2fb5d
Showing 8 changed files with 32 additions and 8 deletions Show diff stats
app/assets/javascripts/blob.js.coffee
app/assets/javascripts/dispatcher.js.coffee
app/assets/javascripts/main.js.coffee
app/assets/stylesheets/generic/highlight.scss
app/assets/stylesheets/highlight/dark.scss
app/assets/stylesheets/highlight/monokai.scss
app/assets/stylesheets/highlight/solarized_dark.scss
app/assets/stylesheets/highlight/white.scss
@@ -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()
@@ -4,6 +4,7 @@ $ -&gt;
 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"))
@@ -56,9 +56,6 @@ document.addEventListener(&quot;page:fetch&quot;, 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()
@@ -16,6 +16,11 @@
     code {
       white-space: pre;
       word-wrap: normal;
+      padding: 0;
+
+      .line {
+        display: inline;
+      }
     }
   }
 .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;
   }
@@ -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;
   }
@@ -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;
   }
 .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;
   }
	@@ -64,7 +64,7 @@ class BlobView		@@ -64,7 +64,7 @@ class BlobView
64	nodes.attr("id", hash)	64	nodes.attr("id", hash)
65		65
66	# initialize multi-line select	66	# initialize multi-line select
67	- $("#tree-content-holder .line_numbers a[id^=L]").on("click", handleMultiSelect)	67	+ $("#tree-content-holder .line-numbers a[id^=L]").on("click", handleMultiSelect)
68		68
69	# Highlight the correct lines on load	69	# Highlight the correct lines on load
70	highlightBlobLines()	70	highlightBlobLines()
	@@ -4,6 +4,7 @@ $ ->		@@ -4,6 +4,7 @@ $ ->
4	class Dispatcher	4	class Dispatcher
5	constructor: () ->	5	constructor: () ->
6	@initSearch()	6	@initSearch()
		7	+ @initHighlight()
7	@initPageScripts()	8	@initPageScripts()
8		9
9	initPageScripts: ->	10	initPageScripts: ->
	@@ -53,3 +54,10 @@ class Dispatcher		@@ -53,3 +54,10 @@ class Dispatcher
53	project_ref = opts.data('autocomplete-project-ref')	54	project_ref = opts.data('autocomplete-project-ref')
54		55
55	new SearchAutocomplete(path, project_id, project_ref)	56	new SearchAutocomplete(path, project_id, project_ref)
		57	+
		58	+ initHighlight: ->
		59	+ $('pre code').each (i, e) ->
		60	+ hljs.highlightBlock(e)
		61	+ $(e).html($.map($(e).html().split("\n"), (line, i) ->
		62	+ "<div class='line' id='LC" + (i + 1) + "'>" + line + "</div>"
		63	+ ).join("\n"))