Add highlight.js support to markdown, snippets etc

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

app/assets/stylesheets/application.scss

@@ -39,6 +39,7 @@
 @import "generic/lists.scss";
 @import "generic/forms.scss";
 @import "generic/selects.scss";
+@import "generic/highlight.scss";
 
 /**
  * Page specific styles (issues, projects etc):

app/assets/stylesheets/generic/files.scss

@@ -143,68 +143,6 @@
      */
     &.code {
       padding: 0;
-
-      .highlighted-data {
-        border: none;
-        box-shadow: none;
-        margin: 0px;
-        padding: 0px;
-        table-layout: fixed;
-
-        pre {
-          border: none;
-          border-radius: 0;
-          font-family: $monospace_font;
-          font-size: 12px !important;
-          line-height: 16px !important;
-          margin: 0;
-
-          code {
-            white-space: pre;
-            word-wrap: normal;
-          }
-        }
-
-        .hljs {
-          padding: 0;
-        }
-
-        .line-numbers {
-          padding: 10px;
-          text-align: right;
-          float: left;
-          width: 60px;
-
-          a {
-            font-family: $monospace_font;
-            display: block;
-            font-size: 12px !important;
-            line-height: 16px !important;
-
-            i {
-              display: none;
-            }
-
-            &:hover i {
-              display: inline;
-            }
-          }
-        }
-
-        .highlight {
-          overflow: auto;
-          overflow-y: hidden;
-
-          pre {
-            white-space: pre;
-            word-wrap: normal;
-
-            .line {
-              padding: 0 10px;
-            }
-          }
-        }
-      }
     }
   }
 }

app/assets/stylesheets/generic/highlight.scss

+.highlighted-data {
+  border: none;
+  box-shadow: none;
+  margin: 0px;
+  padding: 0px;
+  table-layout: fixed;
+
+  pre {
+    border: none;
+    border-radius: 0;
+    font-family: $monospace_font;
+    font-size: 12px !important;
+    line-height: 16px !important;
+    margin: 0;
+
+    code {
+      white-space: pre;
+      word-wrap: normal;
+    }
+  }
+
+  .hljs {
+    padding: 0;
+  }
+
+  .line-numbers {
+    padding: 10px;
+    text-align: right;
+    float: left;
+    width: 60px;
+
+    a {
+      font-family: $monospace_font;
+      display: block;
+      font-size: 12px !important;
+      line-height: 16px !important;
+
+      i {
+        display: none;
+      }
+
+      &:hover i {
+        display: inline;
+      }
+    }
+  }
+
+  .highlight {
+    overflow: auto;
+    overflow-y: hidden;
+
+    pre {
+      white-space: pre;
+      word-wrap: normal;
+
+      .line {
+        padding: 0 10px;
+      }
+    }
+  }
+}

app/helpers/application_helper.rb

@@ -203,8 +203,14 @@ module ApplicationHelper
   def highlight_js(&block)
     string = capture(&block)
 
-    content_tag :div, class: user_color_scheme_class do
-      Pygments::Lexer[:js].highlight(string).html_safe
+    content_tag :div, class: "highlighted-data #{user_color_scheme_class}" do
+      content_tag :div, class: 'highlight' do
+        content_tag :pre do
+          content_tag :code do
+            string.html_safe
+          end
+        end
+      end
     end
   end
 

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

@@ -8,16 +8,6 @@
 - else
   .file-content.code
     - unless blob.empty?
-      %div.highlighted-data{class: user_color_scheme_class}
-        .line-numbers
-          - blob.data.lines.size.times do |index|
-            - i = index + 1
-            = link_to "#L#{i}", id: "L#{i}", rel: "#L#{i}" do
-              %i.icon-link
-              = i
-        .highlight
-          %pre
-            %code
-              = raw blob.data
+      = render 'shared/file_hljs', blob: blob
     - else
       %p.nothing_here_message Empty file

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

@@ -9,7 +9,6 @@
         = link_to "raw", raw_project_snippet_path(@project, @snippet), class: "btn btn-tiny", target: "_blank"
   .file-content.code
     - unless @snippet.content.empty?
-      %div{class: user_color_scheme_class}
-        = raw @snippet.colorize(formatter: :gitlab)
+      = render 'shared/file_hljs', blob: @snippet
     - else
       %p.nothing_here_message Empty file

app/views/shared/_file_hljs.html.haml

+%div.highlighted-data{class: user_color_scheme_class}
+  .line-numbers
+    - blob.data.lines.size.times do |index|
+      - i = index + 1
+      = link_to "#L#{i}", id: "L#{i}", rel: "#L#{i}" do
+        %i.icon-link
+        = i
+  .highlight
+    %pre
+      %code
+        = raw blob.data

app/views/snippets/_blob.html.haml

@@ -18,8 +18,7 @@
         = render_markup(@snippet.file_name, @snippet.data)
     - else
       .file-content.code
-        %div{class: user_color_scheme_class}
-          = raw @snippet.colorize(formatter: :gitlab)
+        = render 'shared/file_hljs', blob: @snippet
   - else
     .file-content.code
       %p.nothing_here_message Empty file

doc/raketasks/user_management.md

 ### Add user as a developer to all projects
 
-```
+```bash
 bundle exec rake gitlab:import:user_to_projects[username@domain.tld]
 ```
 
@@ -11,6 +11,6 @@ Notes:
 
 * admin users are added as masters
 
-```
+```bash
 bundle exec rake gitlab:import:all_users_to_all_projects
 ```

lib/redcarpet/render/gitlab_html.rb

@@ -12,10 +12,6 @@ class Redcarpet::Render::GitlabHTML < Redcarpet::Render::HTML
   end
 
   def block_code(code, language)
-    options = { options: {encoding: 'utf-8'} }
-    lexer = Pygments::Lexer.find(language) # language can be an alias
-    options.merge!(lexer: lexer.aliases[0].downcase) if lexer # downcase is required
-
     # New lines are placed to fix an rendering issue
     # with code wrapped inside <h1> tag for next case:
     #
@@ -25,7 +21,13 @@ class Redcarpet::Render::GitlabHTML < Redcarpet::Render::HTML
     #
     <<-HTML
 
-       <div class="#{h.user_color_scheme_class}">#{Pygments.highlight(code, options)}</div>
+<div class="highlighted-data #{h.user_color_scheme_class}">
+  <div class="highlight">
+    <pre>
+      <code class="#{language}">#{code}</code>
+    </pre>
+  </div>
+</div>
 
     HTML
   end