Highlight fenced code-block contents with Rouge

lib/jekyll-commonmark.rb

@@ -1,5 +1,7 @@
 # frozen-string-literal: true
 
+require_relative "jekyll-commonmark/html_renderer"
+
 module Jekyll
   module Converters
     class Markdown
@@ -43,8 +45,12 @@ def initialize(config)
         end
 
         def convert(content)
-          CommonMarker.render_doc(content, @parse_options, @extensions)
-            .to_html(@render_options, @extensions)
+          HtmlRenderer.new(
+            :options    => @render_options,
+            :extensions => @extensions
+          ).render(
+            CommonMarker.render_doc(content, @parse_options, @extensions)
+          )
         end
       end
     end

lib/jekyll-commonmark/html_renderer.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+Jekyll::External.require_with_graceful_fail "commonmarker"
+
+module Jekyll
+  module Converters
+    class Markdown
+      class CommonMark
+        class HtmlRenderer < CommonMarker::HtmlRenderer
+          def code_block(node)
+            block do
+              lang = extract_code_lang(node.fence_info)
+
+              out('<div class="')
+              out("language-", lang, " ") if lang
+              out('highlighter-rouge"><div class="highlight">')
+              out("<pre", sourcepos(node), ' class="highlight"')
+
+              if option_enabled?(:GITHUB_PRE_LANG)
+                out_data_attr(lang)
+                out("><code>")
+              else
+                out("><code")
+                out_data_attr(lang)
+                out(">")
+              end
+              out(render_with_rouge(node.string_content, lang))
+              out("</code></pre></div></div>")
+            end
+          end
+
+          private
+
+          def extract_code_lang(info)
+            return unless info.is_a?(String)
+            return if info.empty?
+
+            info.split(%r!\s+!)[0]
+          end
+
+          def out_data_attr(lang)
+            return unless lang
+
+            out(' data-lang="', lang, '"')
+          end
+
+          def render_with_rouge(code, lang)
+            require "rouge"
+
+            formatter = Rouge::Formatters::HTMLLegacy.new(
+              :line_numbers => false,
+              :wrap         => false,
+              :css_class    => "highlight",
+              :gutter_class => "gutter",
+              :code_class   => "code"
+            )
+            lexer = Rouge::Lexer.find_fancy(lang, code) || Rouge::Lexers::PlainText
+            formatter.format(lexer.lex(code))
+          end
+        end
+      end
+    end
+  end
+end

spec/jekyll_commonmark_spec.rb

@@ -46,6 +46,37 @@
       expected = "https://example.com"
       expect(actual).to match(expected)
     end
+
+    it "highlights fenced code-block" do
+      content = <<~CODE
+        ```yaml
+        # Sample configuration
+        title: CommonMark Test
+        verbose: true
+        atm_pin: 1234
+        ```
+      CODE
+
+      output = <<~HTML
+        <div class="language-yaml highlighter-rouge">
+          <div class="highlight">
+            <pre class="highlight">
+              <code data-lang="yaml">
+                <span class="c1"># Sample configuration</span>
+                <span class="na">title</span><span class="pi">:</span>
+                <span class="s">CommonMark Test</span>
+                <span class="na">verbose</span><span class="pi">:</span>
+                <span class="no">true</span>
+                <span class="na">atm_pin</span><span class="pi">:</span>
+                <span class="s">1234</span>
+              </code>
+            </pre>
+          </div>
+        </div>
+      HTML
+
+      expect(commonmark.convert(content).gsub(%r!\s+!, "")).to match(output.gsub(%r!\s+!, ""))
+    end
   end
 
   context "with SmartyPants enabled" do