diff --git a/content/en/content-management/diagrams.md b/content/en/content-management/diagrams.md
index 8851034c6c..f9f3cd30f6 100644
--- a/content/en/content-management/diagrams.md
+++ b/content/en/content-management/diagrams.md
@@ -52,7 +52,7 @@ Hugo does not provide a built-in template for Mermaid diagrams. Create your own
 
 {{< code file=layouts/_default/_markup/render-codeblock-mermaid.html >}}
 <pre class="mermaid">
-  {{- .Inner | safeHTML }}
+  {{- .Inner | htmlEscape | safeHTML }}
 </pre>
 {{ .Page.Store.Set "hasMermaid" true }}
 {{< /code >}}
diff --git a/content/en/render-hooks/code-blocks.md b/content/en/render-hooks/code-blocks.md
index d322cb88dc..f43df06c7c 100755
--- a/content/en/render-hooks/code-blocks.md
+++ b/content/en/render-hooks/code-blocks.md
@@ -122,7 +122,7 @@ For example, to create a code block render hook to render [Mermaid] diagrams:
 
 {{< code file=layouts/_default/_markup/render-codeblock-mermaid.html copy=true >}}
 <pre class="mermaid">
-  {{- .Inner | safeHTML }}
+  {{- .Inner | htmlEscape | safeHTML }}
 </pre>
 {{ .Page.Store.Set "hasMermaid" true }}
 {{< /code >}}