diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index a006d6f..faa21d3 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -156,6 +156,42 @@ disableHugoGeneratorInject = false
   # [params.commento]
   #   url = ""
 
+  # Utteranc.es is a lightweight comments widget built on GitHub issues.
+  # See https://utteranc.es/ for documentation
+  # Uncomment this to enable Utteranc.es.
+  #
+  # [params.utterances]
+  #   Your GitHub repository
+  #
+  #   repository = ""
+
+  #   label used for GitHub issues
+  #
+  #   label      = ""
+
+  #   Blog Post <-> Issue mapping. This parameter is optional. Possible values are:
+  #      - pathname
+  #      - url
+  #      - title
+  #      - og:title
+  #      - issue number
+  #      - specific term
+  #
+  #   issueTerm  = ""
+
+  #   Theme used: possible values are:
+  #      - github-light
+  #      - github-dark
+  #      - preferred-color-scheme
+  #      - github-dark-orange
+  #      - icy-dark
+  #      - dark-blue
+  #      - photon-dark
+  #      - boxy-light
+  #      - gruvbox-dark
+  #
+  #   theme      = ""
+
   # Uncomment this if you want a portrait on your start page
   #
   # [params.portrait]
diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 0000000..bb7bf42
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<pre class="mermaid">
+  {{- .Inner | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}
\ No newline at end of file
diff --git a/layouts/partials/javascript.html b/layouts/partials/javascript.html
index 69ccb82..3616997 100644
--- a/layouts/partials/javascript.html
+++ b/layouts/partials/javascript.html
@@ -9,3 +9,28 @@
         <script src="{{ $val }}"></script>
     {{ end }}
 {{ end }}
+{{ if .Page.Store.Get "hasMermaid" }}
+<script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+    const settings = localStorage.getItem('theme') === 'dark' ?
+        {
+            startOnLoad: true,
+            theme: 'dark',
+            darkMode: true,
+            themeVariables: {
+                tertiaryColor: '#dee3ed'
+            }
+        }
+        :
+        {
+            startOnLoad: true,
+            theme: 'base',
+            darkMode: false,
+            themeVariables: {
+                tertiaryColor: '#dee3ed'
+            }
+        }
+    ;
+    mermaid.initialize(settings);
+</script>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index dfb95a3..cc65058 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -135,5 +135,16 @@
       <div id="commento"></div>
     {{ end }}
 
+    {{ if .Site.Params.Utterances.Repository }}
+    <script src="https://utteranc.es/client.js"
+            repo="{{ .Site.Params.Utterances.Repository }}"
+            {{ if .Site.Params.Utterances.Label }}label="{{ .Site.Params.Utterances.Label }}"{{ end }}
+            issue-term="{{ .Site.Params.Utterances.IssueTerm }}"
+            theme="{{ .Site.Params.Utterances.Theme }}"
+            crossorigin="anonymous"
+            async>
+    </script>
+    {{ end }}
+
   </main>
 {{ end }}