adds mermaid support

Leverage the new codeblock renderhooks to support mermaid rendering.

Mermaid is picky about not being visible when it is rendered so we hook
on Reveal events to render on slide view or on ready event.

Mermaid is only included if it is used in the slides.

this change depends on hugo verison >= v0.93.0

7 files changed, 72 insertions, 6 deletions

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index b201cf0..41df78e 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -19,8 +19,8 @@ unsafe = true
 # choose between Hugo compile-time or Highlight.js
 # syntax highlighting for code inside of code fences
 [markup.highlight]
-codeFences = false  # use highlight.js 
-# codeFences = true  # use hugo highlighting at compile time
+# codeFences = false  # use highlight.js
+codeFences = true  # use hugo highlighting at compile time
 style = "tango"  # set a style for hugo highlighting
 
 [outputFormats.Reveal]
@@ -34,4 +34,4 @@ history = true
 # used in content/template-example
 [params.reveal_hugo.templates.grey]
 background = "#424242"
-transition = "convex"
\ No newline at end of file
+transition = "convex"
diff --git a/exampleSite/content/home/features.md b/exampleSite/content/home/features.md
index 5d70186..ce89fe7 100644
--- a/exampleSite/content/home/features.md
+++ b/exampleSite/content/home/features.md
@@ -21,5 +21,5 @@ weight = 10
 - Shortcodes for fragments, sections, slides & more
 - All Reveal.js parameters can be customized
 - Any Hugo section can be output as a presentation
+- Supports mermaid codeblocks
 - Supports offline development or using a CDN
-
diff --git a/exampleSite/content/home/usage.md b/exampleSite/content/home/usage.md
index a9ebe9d..65a3c6c 100644
--- a/exampleSite/content/home/usage.md
+++ b/exampleSite/content/home/usage.md
@@ -53,6 +53,29 @@ Hello program!
 
 ---
 
+### Mermaid
+
+Slides can contain [mermaid](https://mermaid-js.github.io/mermaid/#/) diagrams
+
+```code
+graph LR
+    A --> B
+    B --> C
+```
+
+results in:
+
+```mermaid
+graph LR
+    A --> B
+    B --> C
+```
+
+<small>💡 Note: hugo highlighting must be on (codeFences = true in config.toml)</small>
+
+
+---
+
 ### Add slides with other files
 
 Add slides to `content/home/*.md`
diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 0000000..2ed7001
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<div class="mermaid">
+    {{- .Inner | safeHTML }}
+</div>
+{{ .Page.Store.Set "hasMermaid" true }}
diff --git a/layouts/partials/layout/javascript.html b/layouts/partials/layout/javascript.html
index fe99cb9..4022bf5 100644
--- a/layouts/partials/layout/javascript.html
+++ b/layouts/partials/layout/javascript.html
@@ -57,6 +57,41 @@
 {{ range $.Param "reveal_hugo.plugins" }}
 <script type="text/javascript" src="{{ . | relURL }}"></script>
 {{ end }}
+
+{{/*  check if we need to load mermaid and its render trick.
+      mermaid is not rendered correctly in reveal if we don't hook
+      to the slidechanged event. (mermaid viewBox element has wrong sizes).
+      manage hot-reload by using the reveal ready event.
+*/}}
+{{ $hasMermaid := true }}
+{{ range .Site.RegularPages }}
+{{ if .Store.Get "hasMermaid" }}
+  {{ $hasMermaid = true }}
+{{ end }}
+{{ end }}
+
+{{ if $hasMermaid }}
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+  <script>
+    mermaid.initialize({startOnLoad: false});
+    let render = (event) => {
+      let mermaidElems = event.currentSlide.querySelectorAll('.mermaid');
+      if (!mermaidElems.length){
+          return
+      }
+      mermaidElems.forEach(mermaidElem => {
+          let processed = mermaidElem.getAttribute('data-processed');
+          if (!processed){
+              // https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344
+              mermaid.init(undefined, mermaidElem);
+          }
+      });
+    };
+    Reveal.addEventListener('slidechanged', render);
+    Reveal.addEventListener('ready', render);
+  </script>
+{{ end }}
+
 {{- $custom_js := $.Param "reveal_hugo.custom_js" -}}
 {{- if $custom_js -}}
 <script type="text/javascript" src="{{ $custom_js | relURL }}"></script>
diff --git a/layouts/partials/reveal-hugo/slides.html b/layouts/partials/reveal-hugo/slides.html
index 0bed8a9..63f72da 100644
--- a/layouts/partials/reveal-hugo/slides.html
+++ b/layouts/partials/reveal-hugo/slides.html
@@ -1,7 +1,7 @@
 <!-- Use the array of pages passed as a param -->
 {{ range . -}}
 <!-- Don't process empty content files -->
-  {{- if ne (len .Content) 0 -}}
+  {{- if .Content  -}}
     <!-- Remove the <hr /> tag generated by blackfriday for footnotes -->
     {{- $content := replace .Content "<div class=\"footnotes\">\n\n<hr />" "<div class=\"footnotes\">" -}}
     <!-- <code> blocks processed by Hugo's highlighter have a data-lang attribute. For those, we disable -->
diff --git a/theme.toml b/theme.toml
index 3a2b1b8..f5f1902 100644
--- a/theme.toml
+++ b/theme.toml
@@ -12,4 +12,8 @@ homepage = "https://dzello.com/"
 [original]
 name = "reveal.js"
 homepage = "https://revealjs.com"
-repo = "https://github.com/hakimel/reveal.js/"
\ No newline at end of file
+repo = "https://github.com/hakimel/reveal.js/"
+
+[module]
+    [module.hugoVersion]
+        min = "0.93.0"