diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 00000000..79a2f05e
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,12 @@
+<!-- prettier-ignore-start -->
+{{ if not (.Page.Scratch.Get "mermaid") }}
+  <!-- Include mermaid only first time -->
+  <script defer src="{{ index (index .Site.Data.assets "mermaid.js") "src" | relURL }}"></script>
+  {{ .Page.Scratch.Set "mermaid" true }}
+{{ end }}
+<!-- prettier-ignore-end -->
+
+{{ .Page.Scratch.Set "mermaid" true }}
+<pre class="gdoc-mermaid mermaid">
+  {{- .Inner -}}
+</pre>
diff --git a/layouts/partials/foot.html b/layouts/partials/foot.html
index e27cce58..99dbffa6 100644
--- a/layouts/partials/foot.html
+++ b/layouts/partials/foot.html
@@ -4,8 +4,3 @@
   {{- $searchConfig := resources.Get "search/config.json" | resources.ExecuteAsTemplate $searchConfigFile . | resources.Minify -}}
   {{- $searchConfig.Publish -}}
 {{ end }}
-
-<!-- Include mermaid if not already included by a shortcode but a mermaid code fence is present -->
-{{ if and (findRE "[\n^]```mermaid[\n ]" .RawContent) (not (.Scratch.Get "mermaid")) }}
-  <script defer src="{{ index (index .Site.Data.assets "mermaid.js") "src" | relURL }}"></script>
-{{ end }}
diff --git a/src/js/mermaid.js b/src/js/mermaid.js
index 1b85aa90..263dd6df 100644
--- a/src/js/mermaid.js
+++ b/src/js/mermaid.js
@@ -18,20 +18,19 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
   import("mermaid")
     .then(({ default: md }) => {
-      // Configure mermaid with matching color scheme
       md.initialize({
         flowchart: { useMaxWidth: true },
         theme: theme,
         themeVariables: {
           darkMode: darkMode
+        },
+        mermaid: {
+          // Fix height of mermaid SVG elements (see https://github.com/mermaid-js/mermaid/issues/2481)
+          callback: (id) => {
+            document.getElementById(id).setAttribute("height", "100%")
+          }
         }
       })
-
-      // Render mermaid from shortcodes and code fences
-      md.init(undefined, ".mermaid,.language-mermaid", (id) => {
-        // Fix height of mermaid SVG elements (see https://github.com/mermaid-js/mermaid/issues/2481)
-        document.getElementById(id).setAttribute("height", "100%")
-      })
     })
     .catch((error) => console.error(error))
 })