diff --git a/remarkbox/templates/snippets/javascript-includes.j2 b/remarkbox/templates/snippets/javascript-includes.j2
index 4dd19bb..b42b5a7 100644
--- a/remarkbox/templates/snippets/javascript-includes.j2
+++ b/remarkbox/templates/snippets/javascript-includes.j2
@@ -17,13 +17,18 @@
     gtag('config', '{{ request.namespace.google_analytics_id }}');
   </script>
 {%- endif %}
-{% if request.namespace and request.namespace.mathjax %}
-  <!-- references:
-    * https://docs.mathjax.org/en/v2.7-latest/safe-mode.html
-    * reference https://docs.mathjax.org/en/v2.7-latest/start.html#using-a-content-delivery-network-cdn
-  -->
-  <script type="text/javascript" async
-    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML,Safe">
+{% if request.namespace and request.namespace.katex %}
+  <!-- KaTeX CSS and JS -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
+  <!-- KaTeX auto-render extension -->
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
+    onload="renderMathInElement(document.body, {
+      delimiters: [
+        {left: '$$', right: '$$', display: true},
+        {left: '$', right: '$', display: false}
+      ]
+    });">
   </script>
 {%- endif %}
 {%- include 'google-analytics.j2' %}