#583, fix katex and mermaid examples with raw html

exampleSite/content.en/docs/shortcodes/mermaid.md

@@ -11,9 +11,12 @@ create a `mermaid.json` file in your `assets` folder!
 
 ## Example
 
-{{< columns >}}
+
+<div class="book-columns flex flex-wrap">
+  <div class="flex-even markdown-inner">
+
 ```tpl
-{{</*/* mermaid [class="text-center"]*/*/>}}
+{{</* mermaid class="optional" >}}
 stateDiagram-v2
     State1: The state with a note
     note right of State1
@@ -22,12 +25,13 @@ stateDiagram-v2
     end note
     State1 --> State2
     note left of State2 : This is the note to the left.
-{{</*/* /mermaid */*/>}}
+{{< /mermaid */>}}
 ```
 
-<--->
+  </div>
+  <div class="flex-even markdown-inner">
 
-{{< mermaid >}}
+{{< mermaid class="optional" >}}
 stateDiagram-v2
     State1: The state with a note
     note right of State1
@@ -38,4 +42,5 @@ stateDiagram-v2
     note left of State2 : This is the note to the left.
 {{< /mermaid >}}
 
-{{< /columns >}}
+  </div>
+</div>