adds mermaid shortcode when codeFences=false

the shortcode provides an alternative to codeblocks if codeFences
are disabled.

4 files changed, 49 insertions, 6 deletions

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 41df78e..c29b219 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]
diff --git a/exampleSite/content/home/shortcodes/mermaid.md b/exampleSite/content/home/shortcodes/mermaid.md
new file mode 100644
index 0000000..b9c04ac
--- /dev/null
+++ b/exampleSite/content/home/shortcodes/mermaid.md
@@ -0,0 +1,27 @@
++++
+weight = 32
++++
+
+{{< slide id=mermaid-shortcode >}}
+
+# Mermaid diagrams
+
+Use the `mermaid` shortcode if you need to enable reveal-js highligting module
+(`codeFences = false`). Otherwize, when `codeFences = true`, ` ```mermaid ``` ` codeblocks
+are also supported. [More info](hugo-hl-example/#/5).
+
+```code
+{{</* mermaid */>}}
+graph LR
+    A --> B
+    B --> C
+{{</* /mermaid */>}}
+```
+
+results in:
+
+{{< mermaid >}}
+graph LR
+    A --> B
+    B --> C
+{{< /mermaid >}}
diff --git a/exampleSite/content/home/usage.md b/exampleSite/content/home/usage.md
index 65a3c6c..fb81cc1 100644
--- a/exampleSite/content/home/usage.md
+++ b/exampleSite/content/home/usage.md
@@ -55,23 +55,35 @@ Hello program!
 
 ### Mermaid
 
-Slides can contain [mermaid](https://mermaid-js.github.io/mermaid/#/) diagrams
+Slides can contain [mermaid](https://mermaid-js.github.io/mermaid/#/) diagrams:
+
+````code
+```mermaid
+graph LR
+    A --> B
+    B --> C
+```
+````
+
+Or (see [mermaid shortcode](#/mermaid-shortcode))
 
 ```code
+{{</* mermaid */>}}
 graph LR
     A --> B
     B --> C
+{{</* /mermaid */>}}
 ```
 
 results in:
 
-```mermaid
+{{< mermaid >}}
 graph LR
     A --> B
     B --> C
-```
+{{< /mermaid >}}
 
-<small>💡 Note: hugo highlighting must be on (codeFences = true in config.toml)</small>
+<small>💡 Note: for codeblocks support (` ```mermaid ...``` `), hugo highlighting must be on (codeFences = true in config.toml)</small>
 
 
 ---
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
new file mode 100644
index 0000000..2ed7001
--- /dev/null
+++ b/layouts/shortcodes/mermaid.html
@@ -0,0 +1,4 @@
+<div class="mermaid">
+    {{- .Inner | safeHTML }}
+</div>
+{{ .Page.Store.Set "hasMermaid" true }}