Add math equations using KaTeX

_config.yml

@@ -1,4 +1,3 @@
-# things you probably want to change
 url: https://mbacvanski.github.io
 title: Marc Bacvanski
 description: Marc Bacvanski
@@ -16,6 +15,7 @@ kramdown:
   input: GFM
   hard_wrap: false
   syntax_highlighter: rouge
+  math_engine: mathjax
 
 defaults:
   - # applies the default layout to all files in the project

_includes/foot.html

@@ -1,3 +1,24 @@
-        </div>
-    </body>
-</html>
+</div>
+</body>
+
+<!-- Parse the Latex divs with Katex-->
+<script type="text/javascript">
+    document.querySelectorAll('script[type=\'math/tex\']').forEach(
+        function (s) {
+            const tex = s.textContent;
+            const str = katex.renderToString(tex, {displayMode: false}); // inline
+            // s.replaceWith(str);
+            s.outerHTML = str;
+        });
+
+    document.querySelectorAll('script[type=\'math/tex; mode=display\']').forEach(
+        function (s) {
+            const tex = s.textContent;
+            const str = katex.renderToString(tex.replace(/%.*/g, ''), {displayMode: true}); // block
+            console.log('str = ' + str);
+            // s.innerHTML = str;
+            s.outerHTML = str;
+        });
+</script>
+
+</html>

_includes/head.html

@@ -12,6 +12,10 @@
 	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 	<link rel="manifest" href="/site.webmanifest">
 
+	<!-- Load KaTeX -->
+	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.css">
+	<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.js"></script>
+
 	<!-- Global site tag (gtag.js) - Google Analytics -->
 	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-163967035-1"></script>
 	<script>

_includes/smallhead.html

@@ -7,6 +7,10 @@
 	<link rel="stylesheet" href="{{ '/styles/styles.css' | prepend:site.url }}">
 	<link rel="stylesheet" href="{{ '/styles/syntax.css' | prepend:site.url }}">
 
+	<!-- Load KaTeX -->
+	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.css">
+	<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.js"></script>
+
 	<!-- Global site tag (gtag.js) - Google Analytics -->
 	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-163967035-1"></script>
 	<script>