Highlight note code and edit previewnote-highlighting

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