Enable AsciiDoc syntax highlighting (using Rouge)

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

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
 

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

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

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

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)