diff --git a/exampleSite/content.en/docs/shortcodes/katex.md b/exampleSite/content.en/docs/shortcodes/katex.md
index f292ca1..0b7b236 100644
--- a/exampleSite/content.en/docs/shortcodes/katex.md
+++ b/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.
diff --git a/exampleSite/content.en/docs/shortcodes/mermaid.md b/exampleSite/content.en/docs/shortcodes/mermaid.md
index a9ed4d4..09eecea 100644
--- a/exampleSite/content.en/docs/shortcodes/mermaid.md
+++ b/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>
\ No newline at end of file
diff --git a/layouts/shortcodes/html.html b/layouts/shortcodes/html.html
new file mode 100644
index 0000000..141a3a8
--- /dev/null
+++ b/layouts/shortcodes/html.html
@@ -0,0 +1 @@
+{{- .Inner -}}
\ No newline at end of file
diff --git a/layouts/shortcodes/katex.html b/layouts/shortcodes/katex.html
index c83135e..cb7f6f2 100644
--- a/layouts/shortcodes/katex.html
+++ b/layouts/shortcodes/katex.html
@@ -7,7 +7,7 @@
 {{- end -}}
 
 <span {{- with .Get "class" }} class="{{ . }}"{{ end }}>
-  {{ cond (in .Params "display") "\\[" "\\(" -}}
+  {{ with .Get "display" }}\[{{else}}\({{end}}
   {{- trim .Inner "\n" -}}
-  {{- cond (in .Params "display") "\\]" "\\)" }}
+  {{ with .Get "display" }}\]{{else}}\){{end}}
 </span>