docs: move mermaid shortcode documentation to shortcode page (#212)

exampleSite/content/posts/advanced/mermaid.md

@@ -1,54 +0,0 @@
----
-title: Mermaid
-date: 2021-05-23T20:00:00+01:00
-authors:
-  - john-doe
-tags:
-  - Documentation
-  - Shortcodes
----
-
-[Mermaid](https://mermaidjs.github.io/) is library for generating SVG charts and diagrams from text.
-
-<!--more-->
-
-## Example
-
-{{< columns >}}
-
-<!-- prettier-ignore -->
-```tpl
-{{</* mermaid class="text-center"*/>}}
-sequenceDiagram
-    Alice->>Bob: Hello Bob, how are you?
-    alt is sick
-        Bob->>Alice: Not so good :(
-    else is well
-        Bob->>Alice: Feeling fresh like a daisy
-    end
-    opt Extra response
-        Bob->>Alice: Thanks for asking
-    end
-{{</* /mermaid */>}}
-```
-
-<--->
-
-<!-- spellchecker-disable -->
-<!-- prettier-ignore -->
-{{< mermaid class="text-center" >}}
-sequenceDiagram
-    Alice->>Bob: Hello Bob, how are you?
-    alt is sick
-        Bob->>Alice: Not so good :(
-    else is well
-        Bob->>Alice: Feeling fresh like a daisy
-    end
-    opt Extra response
-        Bob->>Alice: Thanks for asking
-    end
-{{< /mermaid >}}
-
-<!-- spellchecker-enable -->
-
-{{< /columns >}}

exampleSite/content/posts/advanced/shortcodes.md

@@ -267,6 +267,53 @@ prompts feud gait, quid exercise emeritus bis e. In pro quints consequent.
 {{< /tab >}}
 {{< /tabs >}}
 
+## Mermaid
+
+[Mermaid](https://mermaidjs.github.io/) is library for generating SVG charts and diagrams from text.
+
+<!--more-->
+
+### Example
+
+{{< columns >}}
+
+<!-- prettier-ignore -->
+```tpl
+{{</* mermaid class="text-center"*/>}}
+sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you?
+    alt is sick
+        Bob->>Alice: Not so good :(
+    else is well
+        Bob->>Alice: Feeling fresh like a daisy
+    end
+    opt Extra response
+        Bob->>Alice: Thanks for asking
+    end
+{{</* /mermaid */>}}
+```
+
+<--->
+
+<!-- spellchecker-disable -->
+<!-- prettier-ignore -->
+{{< mermaid class="text-center" >}}
+sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you?
+    alt is sick
+        Bob->>Alice: Not so good :(
+    else is well
+        Bob->>Alice: Feeling fresh like a daisy
+    end
+    opt Extra response
+        Bob->>Alice: Thanks for asking
+    end
+{{< /mermaid >}}
+
+<!-- spellchecker-enable -->
+
+{{< /columns >}}
+
 ## KaTeX
 
 [KaTeX](https://katex.org/) shortcode let you render math typesetting in markdown document.
@@ -293,7 +340,7 @@ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
 
 {{< /columns >}}
 
-KaTeX can also be used inline, for example {{< katex >}}\pi(x){{< /katex >}} or used with the `display` parameter:
+KaTeX can also be used inline, for example {{< katex >}}\pi(x){{< /katex >}} or used with the `display` parameter (e.g. `display: block`):
 
 <!-- spellchecker-disable -->
 <!-- prettier-ignore -->

exampleSite/content/posts/usage/getting-started.md

@@ -259,5 +259,4 @@ There are a lot more things to discover. To get the most out of the Theme we hav
 - [Shortcodes](/posts/advanced/shortcodes/)
   - [Advanced Images](/posts/post-with-images/)
   - [Includes](/posts/advanced/includes/)
-  - [Mermaid](/posts/advanced/mermaid/)
   - [Table of Content](/posts/advanced/toc/)

layouts/shortcodes/katex.html

@@ -1,3 +1,4 @@
+<!-- prettier-ignore-start -->
 {{ if not (.Page.Scratch.Get "katex") }}
   <!-- Include katex only first time -->
   <link
@@ -7,8 +8,9 @@
   <script defer src="{{ index (index .Site.Data.assets "katex.js") "src" | relURL }}"></script>
   {{ .Page.Scratch.Set "katex" true }}
 {{ end }}
+<!-- prettier-ignore-end -->
 
-<span class="gblog-katex">
+<span class="gdoc-katex katex{{ with .Get "class" }}{{ . }}{{ end }}">
   {{ cond (in .Params "display") "\\[" "\\(" -}}
   {{- trim .Inner "\n" -}}
   {{- cond (in .Params "display") "\\]" "\\)" }}

layouts/shortcodes/mermaid.html

@@ -1,8 +1,10 @@
+<!-- prettier-ignore-start -->
 {{ if not (.Page.Scratch.Get "mermaid") }}
-  <!-- Include mermaid only first time --><script defer src="{{ index (index .Site.Data.assets "mermaid.js") "src" | relURL }}"></script>
+  <!-- Include mermaid only first time -->
+  <script defer src="{{ index (index .Site.Data.assets "mermaid.js") "src" | relURL }}"></script>
   {{ .Page.Scratch.Set "mermaid" true }}
 {{ end }}
-
+<!-- prettier-ignore-end -->
 
 <pre class="gblog-mermaid mermaid {{ with .Get "class" }}{{ . }}{{ end }}">
   {{- .Inner -}}