diff --git a/exampleSite/content.bn/_index.md b/exampleSite/content.bn/_index.md
index 85c03e006..e58e4b514 100644
--- a/exampleSite/content.bn/_index.md
+++ b/exampleSite/content.bn/_index.md
@@ -5,7 +5,7 @@ type: docs
 
 # বাংলা ভাষায় শুরু করুন
 
-{{< columns >}}
+{{% columns %}}
 ## অস্ট্রিস চিপসে ফুর্তিভা 
 
 Est in vagis et Pittheus tu arge accipiter regia iram vocatur nurus. Omnes ut
@@ -19,7 +19,7 @@ modo arsit? Utinam rapta fiducia valuere litora _adicit cursu_, ad facies
 Ea _furtique_ risere fratres edidit terrae magis. Colla tam mihi tenebat:
 miseram excita suadent es pecudes iam. Concilio _quam_ velatus posset ait quod
 nunc! Fragosis suae dextra geruntur functus vulgata.
-{{< /columns >}}
+{{% /columns %}}
 
 
 ## টেম্পোরার নিশি
diff --git a/exampleSite/content.en/_index.md b/exampleSite/content.en/_index.md
index 6123c2829..c2988dbb3 100644
--- a/exampleSite/content.en/_index.md
+++ b/exampleSite/content.en/_index.md
@@ -5,7 +5,7 @@ type: docs
 
 # Acerbo datus maxime
 
-{{< columns >}}
+{{% columns %}}
 ## Astris ipse furtiva
 
 Est in vagis et Pittheus tu arge accipiter regia iram vocatur nurus. Omnes ut
@@ -19,7 +19,7 @@ modo arsit? Utinam rapta fiducia valuere litora _adicit cursu_, ad facies
 Ea _furtique_ risere fratres edidit terrae magis. Colla tam mihi tenebat:
 miseram excita suadent es pecudes iam. Concilio _quam_ velatus posset ait quod
 nunc! Fragosis suae dextra geruntur functus vulgata.
-{{< /columns >}}
+{{% /columns %}}
 
 
 ## Tempora nisi nunc
diff --git a/exampleSite/content.en/docs/shortcodes/buttons.md b/exampleSite/content.en/docs/shortcodes/buttons.md
index c2ef1e755..15e3a3e6f 100644
--- a/exampleSite/content.en/docs/shortcodes/buttons.md
+++ b/exampleSite/content.en/docs/shortcodes/buttons.md
@@ -9,5 +9,5 @@ Buttons are styled links that can lead to local page or external link.
 {{</* button href="https://github.com/alex-shpak/hugo-book" */>}}Contribute{{</* /button */>}}
 ```
 
-{{< button relref="/" >}}Get Home{{< /button >}}
-{{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}}
+{{<button relref="/">}}Get Home{{</button>}}
+{{<button href="https://github.com/alex-shpak/hugo-book">}}Contribute{{</button>}}
diff --git a/exampleSite/content.en/docs/shortcodes/columns.md b/exampleSite/content.en/docs/shortcodes/columns.md
index 0b8fde836..6121d3aa6 100644
--- a/exampleSite/content.en/docs/shortcodes/columns.md
+++ b/exampleSite/content.en/docs/shortcodes/columns.md
@@ -4,7 +4,7 @@ Columns help organize shorter pieces of content horizontally for readability.
 
 
 ```html
-{{</* columns */>}} <!-- begin columns block -->
+{{%/* columns */%}} <!-- begin columns block -->
 # Left Content
 Lorem markdownum insigne...
 
@@ -17,12 +17,12 @@ Lorem markdownum insigne...
 
 # Right Content
 Lorem markdownum insigne...
-{{</* /columns */>}}
+{{%/* /columns */%}}
 ```
 
 ## Example
 
-{{< columns >}}
+{{% columns %}}
 ## Left Content
 Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
@@ -42,4 +42,4 @@ Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
 protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
 Miseratus fonte Ditis conubia.
-{{< /columns >}}
+{{% /columns %}}
diff --git a/exampleSite/content.en/docs/shortcodes/details.md b/exampleSite/content.en/docs/shortcodes/details.md
index 248bafd97..428491d24 100644
--- a/exampleSite/content.en/docs/shortcodes/details.md
+++ b/exampleSite/content.en/docs/shortcodes/details.md
@@ -4,19 +4,19 @@ Details shortcode is a helper for `details` html5 element. It is going to replac
 
 ## Example
 ```tpl
-{{</* details "Title" [open] */>}}
+{{%/* details "Title" [open] */%}}
 ## Markdown content
 Lorem markdownum insigne...
-{{</* /details */>}}
+{{%/* /details */%}}
 ```
 ```tpl
-{{</* details title="Title" open=true */>}}
+{{%/* details title="Title" open=true */%}}
 ## Markdown content
 Lorem markdownum insigne...
-{{</* /details */>}}
+{{%/* /details */%}}
 ```
 
-{{< details "Title" open >}}
+{{% details "Title" open %}}
 ## Markdown content
 Lorem markdownum insigne...
-{{< /details >}}
+{{% /details %}}
diff --git a/exampleSite/content.en/docs/shortcodes/hints.md b/exampleSite/content.en/docs/shortcodes/hints.md
index 3477113de..961bc054e 100644
--- a/exampleSite/content.en/docs/shortcodes/hints.md
+++ b/exampleSite/content.en/docs/shortcodes/hints.md
@@ -4,29 +4,29 @@ Hint shortcode can be used as hint/alerts/notification block.
 There are 3 colors to choose: `info`, `warning` and `danger`.
 
 ```tpl
-{{</* hint [info|warning|danger] */>}}
+{{%/* hint [info|warning|danger] */%}}
 **Markdown content**  
 Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
-{{</* /hint */>}}
+{{%/* /hint */%}}
 ```
 
 ## Example
 
-{{< hint info >}}
+{{% hint info %}}
 **Markdown content**  
 Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
-{{< /hint >}}
+{{% /hint %}}
 
-{{< hint warning >}}
+{{% hint warning %}}
 **Markdown content**  
 Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
-{{< /hint >}}
+{{% /hint %}}
 
-{{< hint danger >}}
+{{% hint danger %}}
 **Markdown content**  
 Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
-{{< /hint >}}
+{{% /hint %}}
diff --git a/exampleSite/content.en/docs/shortcodes/katex.md b/exampleSite/content.en/docs/shortcodes/katex.md
index 0b7b236fb..01ac938a0 100644
--- a/exampleSite/content.en/docs/shortcodes/katex.md
+++ b/exampleSite/content.en/docs/shortcodes/katex.md
@@ -6,9 +6,7 @@ title: KaTeX
 KaTeX shortcode let you render math typesetting in markdown document. See [KaTeX](https://katex.org/)
 
 ## Example
-
-<div class="book-columns flex flex-wrap">
-  <div class="flex-even markdown-inner">
+{{% columns %}}
 
 ```latex
 {{</* katex display=true class="optional" >}}
@@ -16,15 +14,13 @@ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
 {{< /katex */>}}
 ```
 
-  </div>
-  <div class="flex-even markdown-inner">
+<--->
 
 {{< katex display=true class="optional" >}}
 f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
 {{< /katex >}}
 
-  </div>
-</div>
+{{% /columns %}}
 
 ## Display Mode Example
 
diff --git a/exampleSite/content.en/docs/shortcodes/mermaid.md b/exampleSite/content.en/docs/shortcodes/mermaid.md
index 09eecea23..478c83401 100644
--- a/exampleSite/content.en/docs/shortcodes/mermaid.md
+++ b/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>
\ No newline at end of file
+{{% /columns %}}
diff --git a/exampleSite/content.en/docs/shortcodes/section/_index.md b/exampleSite/content.en/docs/shortcodes/section/_index.md
index f3b9ec315..b03893d9e 100644
--- a/exampleSite/content.en/docs/shortcodes/section/_index.md
+++ b/exampleSite/content.en/docs/shortcodes/section/_index.md
@@ -12,4 +12,4 @@ Section renders pages in section as definition list, using title and description
 {{</* section [summary] */>}}
 ```
 
-{{<section summary >}}
+{{<section summary>}}
diff --git a/exampleSite/content.en/docs/shortcodes/tabs.md b/exampleSite/content.en/docs/shortcodes/tabs.md
index 8a9ad5eba..4d39b8c3a 100644
--- a/exampleSite/content.en/docs/shortcodes/tabs.md
+++ b/exampleSite/content.en/docs/shortcodes/tabs.md
@@ -3,17 +3,17 @@
 Tabs let you organize content by context, for example installation instructions for each supported platform.
 
 ```tpl
-{{</* tabs */>}}
-{{</* tab "MacOS" */>}} # MacOS Content {{</* /tab */>}}
-{{</* tab "Linux" */>}} # Linux Content {{</* /tab */>}}
-{{</* tab "Windows" */>}} # Windows Content {{</* /tab */>}}
-{{</* /tabs */>}}
+{{%/* tabs */%}}
+{{%/* tab "MacOS" */%}} # MacOS Content {{%/* /tab */%}}
+{{%/* tab "Linux" */%}} # Linux Content {{%/* /tab */%}}
+{{%/* tab "Windows" */%}} # Windows Content {{%/* /tab */%}}
+{{%/* /tabs */%}}
 ```
 
 ## Example
 
-{{< tabs >}}
-{{< tab "MacOS" >}}
+{{% tabs %}}
+{{% tab "MacOS" %}}
 # MacOS
 
 This is tab **MacOS** content.
@@ -22,9 +22,9 @@ Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
 protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
 Miseratus fonte Ditis conubia.
-{{< /tab >}}
+{{% /tab %}}
 
-{{< tab "Linux" >}}
+{{% tab "Linux" %}}
 
 # Linux
 
@@ -34,9 +34,9 @@ Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
 protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
 Miseratus fonte Ditis conubia.
-{{< /tab >}}
+{{% /tab %}}
 
-{{< tab "Windows" >}}
+{{% tab "Windows" %}}
 
 # Windows
 
@@ -46,5 +46,5 @@ Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
 protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
 Miseratus fonte Ditis conubia.
-{{< /tab >}}
-{{< /tabs >}}
+{{% /tab %}}
+{{% /tabs %}}
diff --git a/exampleSite/content.en/menu/index.md b/exampleSite/content.en/menu/index.md
deleted file mode 100644
index ed418fe14..000000000
--- a/exampleSite/content.en/menu/index.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-headless: true
----
-
-- [**Example Site**]({{< relref "/docs/example" >}})
-- [Table of Contents]({{< relref "/docs/example/table-of-contents" >}})
-  - [With ToC]({{< relref "/docs/example/table-of-contents/with-toc" >}})
-  - [Without ToC]({{< relref "/docs/example/table-of-contents/without-toc" >}})
-- [Collapsed]({{< relref "/docs/example/collapsed" >}})
-  - [3rd]({{< relref "/docs/example/collapsed/3rd-level" >}})
-    - [4th]({{< relref "/docs/example/collapsed/3rd-level/4th-level" >}})
-<br />
-
-- **Shortcodes**
-- [Buttons]({{< relref "/docs/shortcodes/buttons" >}})
-- [Columns]({{< relref "/docs/shortcodes/columns" >}})
-- [Expand]({{< relref "/docs/shortcodes/expand" >}})
-- [Hints]({{< relref "/docs/shortcodes/hints" >}})
-- [KaTeX]({{< relref "/docs/shortcodes/katex" >}})
-- [Mermaid]({{< relref "/docs/shortcodes/mermaid" >}})
-- [Tabs]({{< relref "/docs/shortcodes/tabs" >}})
-<br />
diff --git a/exampleSite/content.ru/_index.md b/exampleSite/content.ru/_index.md
index 8fa610a41..5bcfb793f 100644
--- a/exampleSite/content.ru/_index.md
+++ b/exampleSite/content.ru/_index.md
@@ -5,7 +5,7 @@ type: docs
 
 # Стартовая страница на русском языке
 
-{{< columns >}}
+{{% columns %}}
 ## Astris ipse furtiva
 
 Est in vagis et Pittheus tu arge accipiter regia iram vocatur nurus. Omnes ut
@@ -19,7 +19,7 @@ modo arsit? Utinam rapta fiducia valuere litora _adicit cursu_, ad facies
 Ea _furtique_ risere fratres edidit terrae magis. Colla tam mihi tenebat:
 miseram excita suadent es pecudes iam. Concilio _quam_ velatus posset ait quod
 nunc! Fragosis suae dextra geruntur functus vulgata.
-{{< /columns >}}
+{{% /columns %}}
 
 
 ## Tempora nisi nunc
diff --git a/exampleSite/content.zh/_index.md b/exampleSite/content.zh/_index.md
index 3e9982357..7dc21c10f 100644
--- a/exampleSite/content.zh/_index.md
+++ b/exampleSite/content.zh/_index.md
@@ -5,7 +5,7 @@ type: docs
 
 # 中文索引页
 
-{{< columns >}}
+{{% columns %}}
 ## Astris ipse furtiva
 
 Est in vagis et Pittheus tu arge accipiter regia iram vocatur nurus. Omnes ut
@@ -19,7 +19,7 @@ modo arsit? Utinam rapta fiducia valuere litora _adicit cursu_, ad facies
 Ea _furtique_ risere fratres edidit terrae magis. Colla tam mihi tenebat:
 miseram excita suadent es pecudes iam. Concilio _quam_ velatus posset ait quod
 nunc! Fragosis suae dextra geruntur functus vulgata.
-{{< /columns >}}
+{{% /columns %}}
 
 
 ## Tempora nisi nunc
diff --git a/layouts/shortcodes/button.html b/layouts/shortcodes/button.html
index f616eb78d..e71c49b29 100644
--- a/layouts/shortcodes/button.html
+++ b/layouts/shortcodes/button.html
@@ -8,5 +8,5 @@
   {{- $ref = relref $ . -}}
 {{- end -}}
 <a {{ with $ref }} href="{{.}}" {{ end }} {{ with $target }} target="{{.}}" rel="noopener" {{ end }} class="book-btn{{ with .Get "class" }} {{ . }}{{ end }}">
-  {{ .InnerDeindent | .Page.RenderString }}
+  {{ .InnerDeindent }}
 </a>
diff --git a/layouts/shortcodes/columns.html b/layouts/shortcodes/columns.html
index 75ee34100..048b936bd 100644
--- a/layouts/shortcodes/columns.html
+++ b/layouts/shortcodes/columns.html
@@ -1,7 +1,7 @@
 <div class="book-columns flex flex-wrap">
-{{ range split .Inner "<--->" }}
+{{ range split .InnerDeindent "<--->" }}
   <div class="flex-even markdown-inner">
-    {{ . | $.Page.RenderString }}
+    {{ . | safeHTML }}
   </div>
 {{ end }}
 </div>
diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html
index e23d03650..a80209b0f 100644
--- a/layouts/shortcodes/details.html
+++ b/layouts/shortcodes/details.html
@@ -1,7 +1,7 @@
 <details {{ if or (.Get "open") (in .Params "open") }}open{{ end }}>
   {{- $summary := cond .IsNamedParams (.Get "title") (.Get 0) -}}
-  <summary>{{ $summary | .Page.RenderString }}</summary>
+  <summary>{{ $summary }}</summary>
   <div class="markdown-inner">
-    {{ .InnerDeindent | .Page.RenderString }}
+    {{ .InnerDeindent | safeHTML }}
   </div>
 </details>
diff --git a/layouts/shortcodes/hint.html b/layouts/shortcodes/hint.html
index e908f17bd..c908fd9b3 100644
--- a/layouts/shortcodes/hint.html
+++ b/layouts/shortcodes/hint.html
@@ -1,3 +1,3 @@
 <blockquote class="book-hint {{ .Get 0 }}">
-  {{ .InnerDeindent | .Page.RenderString }}
+  {{ .InnerDeindent | safeHTML }}
 </blockquote>
diff --git a/layouts/shortcodes/html.html b/layouts/shortcodes/html.html
index 141a3a842..b447d45af 100644
--- a/layouts/shortcodes/html.html
+++ b/layouts/shortcodes/html.html
@@ -1 +1 @@
-{{- .Inner -}}
\ No newline at end of file
+{{- .Inner | safeHTML -}}
\ No newline at end of file
diff --git a/layouts/shortcodes/katex.html b/layouts/shortcodes/katex.html
index cb7f6f20f..4eafc35df 100644
--- a/layouts/shortcodes/katex.html
+++ b/layouts/shortcodes/katex.html
@@ -8,6 +8,6 @@
 
 <span {{- with .Get "class" }} class="{{ . }}"{{ end }}>
   {{ with .Get "display" }}\[{{else}}\({{end}}
-  {{- trim .Inner "\n" -}}
+  {{- .InnerDeindent -}}
   {{ with .Get "display" }}\]{{else}}\){{end}}
 </span>
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
index 28fb80dec..07a3bfc0e 100644
--- a/layouts/shortcodes/mermaid.html
+++ b/layouts/shortcodes/mermaid.html
@@ -8,5 +8,5 @@
 {{ end }}
 
 <pre class="mermaid{{ with .Get "class" }} {{ . }}{{ end }}">
-  {{- .Inner | safeHTML -}}
+  {{- .Inner -}}
 </pre>
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
index 4960d30d3..ebb03adf7 100644
--- a/layouts/shortcodes/tabs.html
+++ b/layouts/shortcodes/tabs.html
@@ -8,7 +8,7 @@
     {{- $tab.Name -}}
   </label>
   <div class="book-tabs-content markdown-inner">
-    {{- .Content | $.Page.RenderString -}}
+    {{- .Content | safeHTML -}}
   </div>
 {{- end -}}
 </div>