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

16 files changed, 34 insertions, 64 deletions

diff --git a/app/assets/javascripts/blob/edit_blob.js.coffee b/app/assets/javascripts/blob/edit_blob.js.coffee
index f6bf836f19f..390e41ed8d4 100644
--- a/app/assets/javascripts/blob/edit_blob.js.coffee
+++ b/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
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 9bc814cfd2d..6ea2219073c 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index 2e13ee842e0..9854df4c45c 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/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;
-  }
-}
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index c4e9f467ce4..b5134f44ded 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/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;
       }
     }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index ab4f71af039..4866a17005d 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -87,8 +87,8 @@
   }
 
   p {
-    color:#5c5d5e;
-    margin:6px 0 0 0;
+    color: #5c5d5e;
+    margin: 6px 0 0 0;
   }
 
   table {
@@ -102,11 +102,10 @@
   }
 
   pre {
-    margin: 12px 0 12px 0 !important;
-    background-color: #f8fafc;
-    font-size: 13px !important;
-    color: #5b6169;
-    line-height: 1.6em !important;
+    margin: 12px 0 12px 0;
+    font-size: 13px;
+    line-height: 1.6em;
+    overflow-x: auto;
     @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;
diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index c7f7a5aaf07..41a4579e1bc 100644
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -10,8 +10,8 @@
   }
 
   // Code itself
-  pre.code {
-    border-left: 1px solid #666;
+  pre.code, .diff-line-num {
+    border-color: #666;
   }
 
   &, pre.code, .line_holder .line_content {
diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index 516d8aef960..22cee1af39f 100644
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -10,8 +10,8 @@
   }
 
   // Code itself
-  pre.code {
-    border-left: 1px solid #555;
+  pre.code, .diff-line-num {
+    border-color: #555;
   }
 
   &, pre.code, .line_holder .line_content {
diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss
index b0aaadd0f7f..0e8f30b4b0b 100644
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -10,8 +10,8 @@
   }
 
   // Code itself
-  pre.code {
-    border-left: 1px solid #113b46;
+  pre.code, .diff-line-num {
+    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 {
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss
index 1c138572145..08b6c835907 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -10,8 +10,8 @@
   }
 
   // Code itself
-  pre.code {
-    border-left: 1px solid #c5d0d4;
+  pre.code, .diff-line-num {
+    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 {
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 8a932e6540e..8a091028a6c 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -10,8 +10,8 @@
   }
 
   // Code itself
-  pre.code {
-    border-left: 1px solid $border-color;
+  pre.code, .diff-line-num {
+    border-color: $border-color;
   }
 
   &, pre.code, .line_holder .line_content {
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 5215df04a6e..a7925e79549 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/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;
         }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index f6343e6bb1e..19ead07c06a 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/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;
diff --git a/app/views/projects/blob/_text.html.haml b/app/views/projects/blob/_text.html.haml
index 4429c395aee..906e5ccb360 100644
--- a/app/views/projects/blob/_text.html.haml
+++ b/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?
-      = render 'shared/file_highlight', blob: blob
-    - else
+  - unless blob.empty?
+    = render 'shared/file_highlight', blob: blob
+  - else
+    .file-content.code
       .nothing-here-block Empty file
diff --git a/app/views/projects/blob/preview.html.haml b/app/views/projects/blob/preview.html.haml
index c5a269f334c..541dc96c45f 100644
--- a/app/views/projects/blob/preview.html.haml
+++ b/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|
diff --git a/app/views/projects/notes/discussions/_diff.html.haml b/app/views/projects/notes/discussions/_diff.html.haml
index 92bbaf0961a..820e31ccd61 100644
--- a/app/views/projects/notes/discussions/_diff.html.haml
+++ b/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
diff --git a/app/views/shared/snippets/_blob.html.haml b/app/views/shared/snippets/_blob.html.haml
index d26a99bb14c..e0e41fc4bea 100644
--- a/app/views/shared/snippets/_blob.html.haml
+++ b/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