#583, fix katex and mermaid examples with raw html

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

@@ -6,26 +6,30 @@ title: KaTeX
 KaTeX shortcode let you render math typesetting in markdown document. See [KaTeX](https://katex.org/)
 
 ## Example
-{{< columns >}}
+
+<div class="book-columns flex flex-wrap">
+  <div class="flex-even markdown-inner">
 
 ```latex
-{{</*/* katex [display] [class="text-center"] */*/>}}
+{{</* katex display=true class="optional" >}}
 f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
-{{</*/* /katex */*/>}}
+{{< /katex */>}}
 ```
 
-<--->
+  </div>
+  <div class="flex-even markdown-inner">
 
-{{< katex display >}}
+{{< katex display=true class="optional" >}}
 f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
 {{< /katex >}}
 
-{{< /columns >}}
+  </div>
+</div>
 
 ## Display Mode Example
 
 Here is some inline example: {{< katex >}}\pi(x){{< /katex >}}, rendered in the same line. And below is `display` example, having `display: block`
-{{< katex display >}}
+{{< katex display=true >}}
 f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
 {{< /katex >}}
 Text continues here.