Merge branch 'fix-multiline-comment-highlighting' into 'master'

Fix multi-line syntax highlighting

### What does this MR do?

This MR fixes multi-line syntax highlighting in the code views. HTML span elements only apply to a single line, and in the case of multi-line comments, the highlighting was dropped as a result. Ensure that each line has
the proper styling to fix this.

### Why was this MR needed?

The current styling was broken for a while.

### Screenshots

Before:

![image](https://gitlab.com/stanhu/gitlab-ce/uploads/bbcb61760ab04a010aabc40942a2c0ba/image.png)

After:

![image](https://gitlab.com/stanhu/gitlab-ce/uploads/48f61c91b6fdd9c99cd7f3d214853141/image.png)

### What are the relevant issue numbers?

Closes #1577
Closes #1495

See merge request !1079

3 files changed, 29 insertions, 2 deletions

diff --git a/CHANGELOG b/CHANGELOG
index bfff6a56777..27cf89b5938 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,6 +1,7 @@
 Please view this file on the master branch, on stable branches it's out of date.
 
 v 7.14.0 (unreleased)
+  - Fix multi-line syntax highlighting (Stan Hu)
   - Fix network graph when branch name has single quotes (Stan Hu)
   - Upgrade gitlab_git to version 7.2.6 to fix Error 500 when creating network graphs (Stan Hu)
   - Add support for Unicode filenames in relative links (Hiroyuki Sato)
diff --git a/lib/rouge/formatters/html_gitlab.rb b/lib/rouge/formatters/html_gitlab.rb
index 485af6832d7..092a920a0c4 100644
--- a/lib/rouge/formatters/html_gitlab.rb
+++ b/lib/rouge/formatters/html_gitlab.rb
@@ -148,6 +148,12 @@ module Rouge
         end
       end
 
+      def wrap_values(val, element)
+        lines = val.split("\n")
+        lines = lines.map{ |x| "<span #{element}>#{x}</span>" }
+        lines.join("\n")
+      end
+
       def span(tok, val)
         # http://stackoverflow.com/a/1600584/2587286
         val = CGI.escapeHTML(val)
@@ -155,11 +161,13 @@ module Rouge
         if tok.shortname.empty?
           val
         else
+          # In the case of multi-line values (e.g. comments), we need to apply
+          # styling to each line since span elements are inline.
           if @inline_theme
             rules = @inline_theme.style_for(tok).rendered_rules
-            "<span style=\"#{rules.to_a.join(';')}\">#{val}</span>"
+            wrap_values(val, "style=\"#{rules.to_a.join(';')}\"")
           else
-            "<span class=\"#{tok.shortname}\">#{val}</span>"
+            wrap_values(val, "class=\"#{tok.shortname}\"")
           end
         end
       end
diff --git a/spec/helpers/blob_helper_spec.rb b/spec/helpers/blob_helper_spec.rb
index e49e4e6d5d8..76009c36099 100644
--- a/spec/helpers/blob_helper_spec.rb
+++ b/spec/helpers/blob_helper_spec.rb
@@ -6,6 +6,14 @@ describe BlobHelper do
     let(:no_context_content) { ":type \"assem\"))" }
     let(:blob_content) { "(make-pathname :defaults name\n#{no_context_content}" }
     let(:split_content) { blob_content.split("\n") }
+    let(:multiline_content) do
+      %q(
+      def test(input):
+        """This is line 1 of a multi-line comment.
+        This is line 2.
+        """
+      )
+    end
 
     it 'should return plaintext for unknown lexer context' do
       result = highlight(blob_name, no_context_content, nowrap: true, continue: false)
@@ -29,5 +37,15 @@ describe BlobHelper do
       result = split_content.map{ |content| highlight(blob_name, content, nowrap: true, continue: true) }
       expect(result).to eq(expected)
     end
+
+    it 'should highlight multi-line comments' do
+      result = highlight(blob_name, multiline_content, nowrap: true, continue: false)
+      html = Nokogiri::HTML(result)
+      lines = html.search('.s')
+      expect(lines.count).to eq(3)
+      expect(lines[0].text).to eq('"""This is line 1 of a multi-line comment.')
+      expect(lines[1].text).to eq('        This is line 2.')
+      expect(lines[2].text).to eq('        """')
+    end
   end
 end