Merge branch 'asciidoc-syntax-highlighting' into 'master'

Enable AsciiDoc syntax highlighting (using Rouge)

Closes #32635

See merge request gitlab-org/gitlab-ce!29835

6 files changed, 91 insertions, 3 deletions

diff --git a/changelogs/unreleased/asciidoc-enable-syntax-highlighting.yml b/changelogs/unreleased/asciidoc-enable-syntax-highlighting.yml
new file mode 100644
index 00000000000..558ee7b6224
--- /dev/null
+++ b/changelogs/unreleased/asciidoc-enable-syntax-highlighting.yml
@@ -0,0 +1,5 @@
+---
+title: "Enable syntax highlighting for AsciiDoc"
+merge_request: 29835
+author: Guillaume Grossetie
+type: added
\ No newline at end of file
diff --git a/lib/banzai/filter/syntax_highlight_filter.rb b/lib/banzai/filter/syntax_highlight_filter.rb
index fe56f9a1e33..9b66759a5fb 100644
--- a/lib/banzai/filter/syntax_highlight_filter.rb
+++ b/lib/banzai/filter/syntax_highlight_filter.rb
@@ -14,7 +14,7 @@ module Banzai
       LANG_PARAMS_ATTR = 'data-lang-params'.freeze
 
       def call
-        doc.search('pre > code').each do |node|
+        doc.search('pre:not([data-math-style]) > code').each do |node|
           highlight_node(node)
         end
 
diff --git a/lib/banzai/pipeline/ascii_doc_pipeline.rb b/lib/banzai/pipeline/ascii_doc_pipeline.rb
index cc4af280872..6be489c6572 100644
--- a/lib/banzai/pipeline/ascii_doc_pipeline.rb
+++ b/lib/banzai/pipeline/ascii_doc_pipeline.rb
@@ -6,6 +6,7 @@ module Banzai
       def self.filters
         FilterArray[
           Filter::SanitizationFilter,
+          Filter::SyntaxHighlightFilter,
           Filter::ExternalLinkFilter,
           Filter::PlantumlFilter,
           Filter::AsciiDocPostProcessingFilter
diff --git a/lib/gitlab/asciidoc.rb b/lib/gitlab/asciidoc.rb
index 7f8300a0c2f..00c87cce7b6 100644
--- a/lib/gitlab/asciidoc.rb
+++ b/lib/gitlab/asciidoc.rb
@@ -4,6 +4,7 @@ require 'asciidoctor'
 require 'asciidoctor-plantuml'
 require 'asciidoctor/extensions'
 require 'gitlab/asciidoc/html5_converter'
+require 'gitlab/asciidoc/syntax_highlighter/html_pipeline_adapter'
 
 module Gitlab
   # Parser/renderer for the AsciiDoc format that uses Asciidoctor and filters
@@ -16,7 +17,7 @@ module Gitlab
         'idseparator' => '-',
         'env' => 'gitlab',
         'env-gitlab' => '',
-        'source-highlighter' => 'html-pipeline',
+        'source-highlighter' => 'gitlab-html-pipeline',
         'icons' => 'font',
         'outfilesuffix' => '.adoc',
         'max-include-depth' => MAX_INCLUDE_DEPTH
diff --git a/lib/gitlab/asciidoc/syntax_highlighter/html_pipeline_adapter.rb b/lib/gitlab/asciidoc/syntax_highlighter/html_pipeline_adapter.rb
new file mode 100644
index 00000000000..5fc3323f0fd
--- /dev/null
+++ b/lib/gitlab/asciidoc/syntax_highlighter/html_pipeline_adapter.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Gitlab
+  module Asciidoc
+    module SyntaxHighlighter
+      class HtmlPipelineAdapter < Asciidoctor::SyntaxHighlighter::Base
+        register_for 'gitlab-html-pipeline'
+
+        def format(node, lang, opts)
+          %(<pre><code #{lang ? %[ lang="#{lang}"] : ''}>#{node.content}</code></pre>)
+        end
+      end
+    end
+  end
+end
diff --git a/spec/lib/gitlab/asciidoc_spec.rb b/spec/lib/gitlab/asciidoc_spec.rb
index 0f933ac5464..8f2434acd26 100644
--- a/spec/lib/gitlab/asciidoc_spec.rb
+++ b/spec/lib/gitlab/asciidoc_spec.rb
@@ -56,7 +56,7 @@ module Gitlab
           },
           'pre' => {
             input: '```mypre"><script>alert(3)</script>',
-            output: "<div>\n<div>\n<pre lang=\"mypre\">\"&gt;<code></code></pre>\n</div>\n</div>"
+            output: "<div>\n<div>\n<pre class=\"code highlight js-syntax-highlight plaintext\" lang=\"plaintext\" v-pre=\"true\"><code><span id=\"LC1\" class=\"line\" lang=\"plaintext\">\"&gt;</span></code></pre>\n</div>\n</div>"
           }
         }
 
@@ -67,6 +67,72 @@ module Gitlab
         end
       end
 
+      context 'with fenced block' do
+        it 'highlights syntax' do
+          input = <<~ADOC
+            ```js
+            console.log('hello world')
+            ```
+          ADOC
+
+          output = <<~HTML
+            <div>
+            <div>
+            <pre class="code highlight js-syntax-highlight javascript" lang="javascript" v-pre="true"><code><span id="LC1" class="line" lang="javascript"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello world</span><span class="dl">'</span><span class="p">)</span></span></code></pre>
+            </div>
+            </div>
+          HTML
+
+          expect(render(input, context)).to include(output.strip)
+        end
+      end
+
+      context 'with listing block' do
+        it 'highlights syntax' do
+          input = <<~ADOC
+            [source,c++]
+            .class.cpp
+            ----
+            #include <stdio.h>
+
+            for (int i = 0; i < 5; i++) {
+              std::cout<<"*"<<std::endl;
+            }
+            ----
+          ADOC
+
+          output = <<~HTML
+            <div>
+            <div>class.cpp</div>
+            <div>
+            <pre class="code highlight js-syntax-highlight cpp" lang="cpp" v-pre="true"><code><span id="LC1" class="line" lang="cpp"><span class="cp">#include &lt;stdio.h&gt;</span></span>
+            <span id="LC2" class="line" lang="cpp"></span>
+            <span id="LC3" class="line" lang="cpp"><span class="k">for</span> <span class="p">(</span><span class="kt">int</span> <span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="n">i</span> <span class="o">&lt;</span> <span class="mi">5</span><span class="p">;</span> <span class="n">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span></span>
+            <span id="LC4" class="line" lang="cpp">  <span class="n">std</span><span class="o">::</span><span class="n">cout</span><span class="o">&lt;&lt;</span><span class="s">"*"</span><span class="o">&lt;&lt;</span><span class="n">std</span><span class="o">::</span><span class="n">endl</span><span class="p">;</span></span>
+            <span id="LC5" class="line" lang="cpp"><span class="p">}</span></span></code></pre>
+            </div>
+            </div>
+          HTML
+
+          expect(render(input, context)).to include(output.strip)
+        end
+      end
+
+      context 'with stem block' do
+        it 'does not apply syntax highlighting' do
+          input = <<~ADOC
+            [stem]
+            ++++
+            \sqrt{4} = 2
+            ++++
+          ADOC
+
+          output = "<div>\n<div>\n\\$ qrt{4} = 2\\$\n</div>\n</div>"
+
+          expect(render(input, context)).to include(output)
+        end
+      end
+
       context 'external links' do
         it 'adds the `rel` attribute to the link' do
           output = render('link:https://google.com[Google]', context)