Improve highlight for notes

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

app/assets/javascripts/dispatcher.js.coffee

@@ -56,7 +56,7 @@ class Dispatcher
     new SearchAutocomplete(path, project_id, project_ref)
 
   initHighlight: ->
-    $('pre code').each (i, e) ->
+    $('.highlight 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>"

app/assets/javascripts/notes.js.coffee

@@ -94,6 +94,9 @@ class Notes
     if @isNewNote(note)
       @note_ids.push(note.id)
       $('ul.main-notes-list').append(note.html)
+      code = "#note_" + note.id + " .highlight pre code"
+      $(code).each (i, e) ->
+        hljs.highlightBlock(e)
 
 
   ###
@@ -253,6 +256,9 @@ class Notes
   updateNote: (xhr, note, status) =>
     note_li = $("#note_" + note.id)
     note_li.replaceWith(note.html)
+    code = "#note_" + note.id + " .highlight pre code"
+    $(code).each (i, e) ->
+      hljs.highlightBlock(e)
 
   ###
   Called in response to clicking the edit note link

app/assets/stylesheets/generic/highlight.scss

@@ -6,6 +6,7 @@
   table-layout: fixed;
 
   pre {
+    padding: 10px;
     border: none;
     border-radius: 0;
     font-family: $monospace_font;
@@ -57,10 +58,6 @@
     pre {
       white-space: pre;
       word-wrap: normal;
-
-      .line {
-        padding: 0 10px;
-      }
     }
   }
 }

app/assets/stylesheets/main/mixins.scss

@@ -128,7 +128,7 @@
     }
   }
 
-  code {
+  p > code {
     font-size: inherit;
     font-weight: inherit;
     color: #555;

app/assets/stylesheets/sections/notes.scss

@@ -92,10 +92,6 @@ ul.notes {
     .note-body {
       @include md-typography;
       margin-left: 45px;
-
-      .highlight {
-        @include border-radius(4px);
-      }
     }
     .note-header {
       padding-bottom: 5px;

lib/redcarpet/render/gitlab_html.rb

@@ -23,9 +23,7 @@ class Redcarpet::Render::GitlabHTML < Redcarpet::Render::HTML
 
 <div class="highlighted-data #{h.user_color_scheme_class}">
   <div class="highlight">
-    <pre>
+    <pre><code class="#{language}">#{code}</code></pre>
-      <code class="#{language}">#{code}</code>
-    </pre>
   </div>
 </div>
 

spec/helpers/gitlab_markdown_helper_spec.rb

@@ -378,7 +378,7 @@ describe GitlabMarkdownHelper do
     it "should leave code blocks untouched" do
       helper.stub(:user_color_scheme_class).and_return(:white)
 
-      target_html = "\n<div class=\"highlighted-data white\">\n  <div class=\"highlight\">\n    <pre>\n      <code class=\"\">some code from $#{snippet.id}\nhere too\n</code>\n    </pre>\n  </div>\n</div>\n\n"
+      target_html = "\n<div class=\"highlighted-data white\">\n  <div class=\"highlight\">\n    <pre><code class=\"\">some code from $#{snippet.id}\nhere too\n</code></pre>\n  </div>\n</div>\n\n"
 
       helper.markdown("\n    some code from $#{snippet.id}\n    here too\n").should == target_html
       helper.markdown("\n```\nsome code from $#{snippet.id}\nhere too\n```\n").should == target_html