Breaking change: switch to '{{%' decorators in shortcodes to better support shortcode-in-shortcode

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

@@ -2,18 +2,16 @@
 
 [MermaidJS](https://mermaid-js.github.io/) is library for generating svg charts and diagrams from text.
 
-{{< hint info >}}
-**Override Mermaid Initialization Config**
-
+{{% hint info %}}
+**Override Mermaid initialization config**  
 To override the [initialization config](https://mermaid-js.github.io/mermaid/#/Setup) for Mermaid,
 create a `mermaid.json` file in your `assets` folder!
-{{< /hint >}}
+{{% /hint %}}
 
 ## Example
 
 
-<div class="book-columns flex flex-wrap">
-  <div class="flex-even markdown-inner">
+{{% columns %}}
 
 ```tpl
 {{</* mermaid class="optional" >}}
@@ -28,8 +26,7 @@ stateDiagram-v2
 {{< /mermaid */>}}
 ```
 
-  </div>
-  <div class="flex-even markdown-inner">
+<--->
 
 {{< mermaid class="optional" >}}
 stateDiagram-v2
@@ -42,5 +39,4 @@ stateDiagram-v2
     note left of State2 : This is the note to the left.
 {{< /mermaid >}}
 
-  </div>
-</div>
+{{% /columns %}}