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	64	nodes.attr("id", hash)
65	65
66	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	69	# Highlight the correct lines on load
70	70	highlightBlobLines()
...	...
...	...	@@ -4,6 +4,7 @@ $ ->
4	4	class Dispatcher
5	5	constructor: () ->
6	6	@initSearch()
	7	+ @initHighlight()
7	8	@initPageScripts()
8	9
9	10	initPageScripts: ->
...	...	@@ -53,3 +54,10 @@ class Dispatcher
53	54	project_ref = opts.data('autocomplete-project-ref')
54	55
55	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"))
...	...
...	...	@@ -56,9 +56,6 @@ document.addEventListener("page:fetch", unbindEvents)
56	56	document.addEventListener("page:change", stopSpinner)
57	57
58	58	$ ->
59		- $('pre code').each (i, e) ->
60		- hljs.highlightBlock(e)
61		-
62	59	# Click a .one_click_select field, select the contents
63	60	$(".one_click_select").on 'click', -> $(@).select()
64	61
...	...
...	...	@@ -16,6 +16,11 @@
16	16	code {
17	17	white-space: pre;
18	18	word-wrap: normal;
	19	+ padding: 0;
	20	+
	21	+ .line {
	22	+ display: inline;
	23	+ }
19	24	}
20	25	}
21	26
...	...
1	1	.dark {
2	2	background-color: #232323;
3	3
	4	+ .line.hll {
	5	+ background: #558;
	6	+ }
	7	+
4	8	.highlight{
5	9	border-left: 1px solid #444;
6	10	}
...	...	@@ -15,7 +19,6 @@
15	19
16	20	.hljs {
17	21	display: block;
18		- padding: 0.5em;
19	22	background: #232323;
20	23	color: #E6E1DC;
21	24	}
...	...
...	...	@@ -5,6 +5,10 @@
5	5	border-left: 1px solid #444;
6	6	}
7	7
	8	+ .line.hll {
	9	+ background: #558;
	10	+ }
	11	+
8	12	.line-numbers a {
9	13	color: #666;
10	14	}
...	...	@@ -15,7 +19,7 @@
15	19	}
16	20
17	21	.hljs {
18		- display: block; padding: 0.5em;
	22	+ display: block;
19	23	background: #272822;
20	24	}
21	25
...	...
...	...	@@ -5,6 +5,10 @@
5	5	border-left: 1px solid #113b46;
6	6	}
7	7
	8	+ .line.hll {
	9	+ background: #000;
	10	+ }
	11	+
8	12	pre {
9	13	background-color: #002B36;
10	14	color: #eee;
...	...	@@ -16,7 +20,6 @@
16	20
17	21	.hljs {
18	22	display: block;
19		- padding: 0.5em;
20	23	background: #002b36;
21	24	color: #839496;
22	25	}
...	...
1	1	.white {
2	2	background-color: #fff;
3	3
	4	+ .line.hll {
	5	+ background: #FFA;
	6	+ }
	7	+
4	8	.highlight{
5	9	border-left: 1px solid #eee;
6	10	}
...	...	@@ -19,7 +23,7 @@
19	23	}
20	24
21	25	.hljs {
22		- display: block; padding: 0.5em;
	26	+ display: block;
23	27	background: #fff; color: black;
24	28	}
25	29
...	...