Merge branch 'note-highlighting' into 'master'

Highlight note code and edit preview

More highlighting fixes! Highlighting wasn't applied all the way for
code in notes, diff notes diffs and diff preview (on the file edit page).

The CSS changes further unify the styling for file-content highlighting,
diff highlighting and note code highlighting.

See merge request !2594

app/assets/javascripts/blob/edit_blob.js.coffee

@@ -32,6 +32,7 @@ class @EditBlob
           content: editor.getValue()
         , (response) ->
           currentPane.empty().append response
+          currentPane.syntaxHighlight()
           return
 
       else

app/assets/stylesheets/framework/common.scss

@@ -311,14 +311,6 @@ table {
   }
 }
 
-.wiki .highlight, .note-body .highlight {
-  margin: 12px 0 12px 0;
-}
-
-.wiki .code {
-  overflow-x: auto;
-}
-
 .footer-links {
   margin-bottom: 20px;
   a {

app/assets/stylesheets/framework/highlight.scss

@@ -17,6 +17,7 @@
     overflow-y: hidden;
     white-space: pre;
     word-wrap: normal;
+    border-left: 1px solid;
 
     code {
       font-family: $monospace_font;
@@ -25,7 +26,7 @@
       padding: 0;
 
       .line {
-        display: inline;
+        display: inline-block;
       }
     }
   }
@@ -53,18 +54,3 @@
     }
   }
 }
-
-.note-text .code {
-  border: none;
-  box-shadow: none;
-  background: $background-color;
-  padding: 1em;
-  overflow-x: auto;
-
-  code {
-    font-family: $monospace_font;
-    white-space: pre;
-    word-wrap: normal;
-    padding: 0;
-  }
-}

app/assets/stylesheets/framework/tables.scss

@@ -33,11 +33,11 @@ table {
         background-color: $background-color;
         font-weight: normal;
         font-size: 15px;
-        border-bottom: 1px solid $border-color !important;
+        border-bottom: 1px solid $border-color;
       }
 
       td {
-        border-color: $table-border-color !important;
+        border-color: $table-border-color;
         border-bottom: 1px solid;
       }
     }

app/assets/stylesheets/framework/typography.scss

@@ -87,8 +87,8 @@
   }
 
   p {
-    color:#5c5d5e;
+    color: #5c5d5e;
-    margin:6px 0 0 0;
+    margin: 6px 0 0 0;
   }
 
   table {
@@ -102,11 +102,10 @@
   }
 
   pre {
-    margin: 12px 0 12px 0 !important;
+    margin: 12px 0 12px 0;
-    background-color: #f8fafc;
+    font-size: 13px;
-    font-size: 13px !important;
+    line-height: 1.6em;
-    color: #5b6169;
+    overflow-x: auto;
-    line-height: 1.6em !important;
     @include border-radius(2px);
   }
 
@@ -204,11 +203,6 @@ h1, h2, h3, h4, h5, h6 {
 pre {
   font-family: $monospace_font;
 
-  &.dark {
-    background: #333;
-    color: $background-color;
-  }
-
   &.plain-readme {
     background: none;
     border: none;

app/assets/stylesheets/highlight/dark.scss

@@ -10,8 +10,8 @@
   }
 
   // Code itself
-  pre.code {
+  pre.code, .diff-line-num {
-    border-left: 1px solid #666;
+    border-color: #666;
   }
 
   &, pre.code, .line_holder .line_content {

app/assets/stylesheets/highlight/monokai.scss

@@ -10,8 +10,8 @@
   }
 
   // Code itself
-  pre.code {
+  pre.code, .diff-line-num {
-    border-left: 1px solid #555;
+    border-color: #555;
   }
 
   &, pre.code, .line_holder .line_content {

app/assets/stylesheets/highlight/solarized_dark.scss

@@ -10,8 +10,8 @@
   }
 
   // Code itself
-  pre.code {
+  pre.code, .diff-line-num {
-    border-left: 1px solid #113b46;
+    border-color: #113b46;
   }
 
   &, pre.code, .line_holder .line_content {
@@ -22,11 +22,11 @@
   // Diff line
   .line_holder {
     .diff-line-num.new, .line_content.new {
-      @include diff_background(rgba(133, 153, 0, 0.2), rgba(133, 153, 0, 0.3), #808080);
+      @include diff_background(rgba(133, 153, 0, 0.2), rgba(133, 153, 0, 0.3), #113b46);
     }
 
     .diff-line-num.old, .line_content.old {
-      @include diff_background(rgba(220, 50, 47, 0.3), rgba(220, 50, 47, 0.3), #808080);
+      @include diff_background(rgba(220, 50, 47, 0.3), rgba(220, 50, 47, 0.3), #113b46);
     }
 
     .line_content.match {

app/assets/stylesheets/highlight/solarized_light.scss

@@ -10,8 +10,8 @@
   }
 
   // Code itself
-  pre.code {
+  pre.code, .diff-line-num {
-    border-left: 1px solid #c5d0d4;
+    border-color: #c5d0d4;
   }
 
   &, pre.code, .line_holder .line_content {
@@ -22,11 +22,11 @@
   // Diff line
   .line_holder {
     .diff-line-num.new, .line_content.new {
-      @include diff_background(rgba(133, 153, 0, 0.2), rgba(133, 153, 0, 0.3), #FAF3DD);
+      @include diff_background(rgba(133, 153, 0, 0.2), rgba(133, 153, 0, 0.3), #c5d0d4);
     }
 
     .diff-line-num.old, .line_content.old {
-      @include diff_background(rgba(220, 50, 47, 0.2), rgba(220, 50, 47, 0.3), #FAF3DD);
+      @include diff_background(rgba(220, 50, 47, 0.2), rgba(220, 50, 47, 0.3), #c5d0d4);
     }
 
     .line_content.match {

app/assets/stylesheets/highlight/white.scss

@@ -10,8 +10,8 @@
   }
 
   // Code itself
-  pre.code {
+  pre.code, .diff-line-num {
-    border-left: 1px solid $border-color;
+    border-color: $border-color;
   }
 
   &, pre.code, .line_holder .line_content {

app/assets/stylesheets/pages/diff.scss

@@ -79,10 +79,8 @@
       margin: 0px;
       padding: 0px;
       border: none;
-      background: $background-color;
-      color: rgba(0, 0, 0, 0.3);
       padding: 0px 5px;
-      border-right: 1px solid $border-color;
+      border-right: 1px solid;
       text-align: right;
       min-width: 35px;
       max-width: 50px;
@@ -92,7 +90,6 @@
         float: left;
         width: 35px;
         font-weight: normal;
-        color: rgba(0, 0, 0, 0.3);
         &:hover {
           text-decoration: underline;
         }

app/assets/stylesheets/pages/notes.scss

@@ -154,6 +154,7 @@ ul.notes {
       text-align: center;
       padding: 10px 0;
       background: #FFF;
+      color: $text-color;
     }
     &.notes_line2 {
       text-align: center;

app/views/projects/blob/_text.html.haml

@@ -2,8 +2,8 @@
   .file-content.wiki
     = render_markup(blob.name, blob.data)
 - else
-  .file-content.code
+  - unless blob.empty?
-    - unless blob.empty?
+    = render 'shared/file_highlight', blob: blob
-      = render 'shared/file_highlight', blob: blob
+  - else
-    - else
+    .file-content.code
       .nothing-here-block Empty file

app/views/projects/blob/preview.html.haml

@@ -8,7 +8,7 @@
       .file-content.wiki
         = raw render_markup(@blob.name, @content)
     - else
-      .file-content.code
+      .file-content.code.js-syntax-highlight
         - unless @diff_lines.empty?
           %table.text-file
             - @diff_lines.each do |line|

app/views/projects/notes/discussions/_diff.html.haml

@@ -9,7 +9,7 @@
           = diff.new_path
           - if diff.a_mode && diff.b_mode && diff.a_mode != diff.b_mode
             %span.file-mode= "#{diff.a_mode} → #{diff.b_mode}"
-    .diff-content
+    .diff-content.code.js-syntax-highlight
       %table
         - note.truncated_diff_lines.each do |line|
           - type = line.type

app/views/shared/snippets/_blob.html.haml

@@ -3,8 +3,7 @@
     .file-content.wiki
       = render_markup(@snippet.file_name, @snippet.data)
   - else
-    .file-content.code
+    = render 'shared/file_highlight', blob: @snippet
-      = render 'shared/file_highlight', blob: @snippet
 - else
   .file-content.code
     .nothing-here-block Empty file