- Add handling for mermaid code blocks

Author: DannyBen

lib/madness/rendering/pandoc.rb

@@ -6,6 +6,7 @@ class Pandoc
       include ServerHelper
 
       def render(text)
+        text = process_mermaid_blocks text if config.mermaid
         PandocRuby.new(text, [{ from: :gfm, to: :html }], *options).convert
       end
 
@@ -14,6 +15,12 @@ def render(text)
       def options
         @options ||= config.highlighter ? [] : :no_highlight
       end
+
+      def process_mermaid_blocks(text)
+        text.gsub(/```mermaid\s+(.+?)\s+```/m) do
+          "<pre class='mermaid'>#{$1.strip}</pre>"
+        end
+      end
     end
   end
 end

lib/madness/rendering/redcarpet.rb

@@ -36,7 +36,11 @@ def renderer
       end
 
       def handler_class
-        config.highlighter ? HighlightRenderer : ::Redcarpet::Render::HTML
+        if config.mermaid || config.highlighter
+          CustomRenderer
+        else
+          ::Redcarpet::Render::HTML
+        end
       end
     end
   end

lib/madness/rendering/redcarpet_custom.rb

@@ -0,0 +1,18 @@
+require 'redcarpet'
+require 'rouge'
+require 'rouge/plugins/redcarpet'
+
+module Madness
+  # Renderer with syntax highlighting support
+  class CustomRenderer < Redcarpet::Render::HTML
+    include Rouge::Plugins::Redcarpet
+
+    def block_code(code, language)
+      if language == 'mermaid'
+        "<pre class='mermaid'>#{code}</pre>"
+      else
+        super
+      end
+    end
+  end
+end

lib/madness/rendering/redcarpet_highlighter.rb

@@ -56,7 +56,7 @@ end
 <li>List
 
 <ol>
-<li>with </li>
+<li>with</li>
 <li>nesting</li>
 </ol></li>
 </ol>
@@ -111,6 +111,15 @@ graph TD;
     C-->D;
 </div>
 
+<p>Or using the <code>mermaid</code> code block:</p>
+
+<pre><code class="mermaid">graph TD;
+    A--&gt;B;
+    A--&gt;C;
+    B--&gt;D;
+    C--&gt;D;
+</code></pre>
+
 <h2 id="unsafe-html">Unsafe HTML</h2>
 
 <p>This is calculated by Javascript: <span id='demo'></div></p>

spec/approvals/render/all-disabled

@@ -67,7 +67,7 @@ with <strong>markdown support</strong> in it</p>
 <li>List
 
 <ol>
-<li>with </li>
+<li>with</li>
 <li>nesting</li>
 </ol></li>
 </ol>
@@ -122,6 +122,13 @@ graph TD;
     C-->D;
 </div>
 
+<p>Or using the <code>mermaid</code> code block:</p>
+<pre class='mermaid'>graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+</pre>
 <h2 id="unsafe-html">Unsafe HTML</h2>
 
 <p>This is calculated by Javascript: <span id='demo'></div></p>

spec/approvals/render/all-enabled

@@ -87,6 +87,13 @@ graph TD;
     C-->D;
 </div>
 
+<p>Or using the <code>mermaid</code> code block:</p>
+<pre class='mermaid'>graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;</pre>
+
 <h2 id="unsafe-html">Unsafe HTML</h2>
 <p>This is calculated by Javascript: <span id='demo'></div></p>
 <script>document.getElementById("demo").innerHTML = 5 + 6;</script>

spec/approvals/render/pandoc

@@ -45,7 +45,7 @@ This needs a footnote explanation[^1]
 
 1. Ordered
 2. List
-  1. with 
+  1. with
   2. nesting
 
 - [x] This is done
@@ -86,6 +86,16 @@ graph TD;
     C-->D;
 </div>
 
+Or using the `mermaid` code block:
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
 ## Unsafe HTML
 
 This is calculated by Javascript: <span id='demo'></div>
@@ -95,5 +105,3 @@ This is calculated by Javascript: <span id='demo'></div>
 
 [^1]: Footnote explanation
 [Reference link]: http://example.com
-
-

spec/fixtures/docroot/Style Guide/All.md

@@ -8,3 +8,13 @@ graph TD;
     B-->D;
     C-->D;
 </div>
+
+Or using the `mermaid` code block:
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```

spec/fixtures/docroot/Style Guide/Mermaid Diagrams.md

@@ -47,6 +47,7 @@
       before do
         config.renderer = 'pandoc'
         config.highlighter = true
+        config.mermaid = true
       end
 
       # In CI we have a different pandoc version, so we allow