From 3fa25abce4417d117fa2c1c858616257a389b6b8 Mon Sep 17 00:00:00 2001
From: Samuel Proulx <samuelproulx26@gmail.com>
Date: Thu, 29 Dec 2022 06:52:53 -0500
Subject: [PATCH] Add mathjax and katex support (#75)

* Add mathjax and katex support

* update readme
---
 README.md                    |  2 ++
 layouts/partials/header.html | 41 ++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+)

diff --git a/README.md b/README.md
index abf9193..9da1ad9 100644
--- a/README.md
+++ b/README.md
@@ -79,6 +79,8 @@ paginate=3 # articles per page
 	mode="auto" # color-mode → light,dark,toggle or auto
 	useCDN=false # don't use CDNs for fonts and icons, instead serve them locally.
 	subtitle = "Minimal and Clean [blog theme for Hugo](https://github.com/athul/archie)"
+	mathjax = true # enable MathJax support
+	katex = true # enable KaTeX support
 
 # Social Tags
 
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index f3c9e82..7d990d0 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -43,6 +43,47 @@
 		{{ $darkstyle := resources.Get "css/dark.css" | fingerprint }}
 		<link id="darkModeStyle" rel="stylesheet" type="text/css" href="{{ $darkstyle.Permalink }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} {{ if eq .Site.Params.mode "toggle" }}disabled{{ end }} />
 	{{ end }}
+
+	<!-- Mathjax support -->
+	{{ with .Site.Params.mathjax }}
+		<script type="text/javascript"
+		src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
+		</script>
+	
+		<!-- inline Mathjax -->
+		<script type="text/x-mathjax-config">
+		MathJax.Hub.Config({
+			tex2jax: {
+				inlineMath: [['$','$'], ['\\(','\\)']],
+				displayMath: [['$$','$$'], ['\[','\]']],
+				processEscapes: true,
+				processEnvironments: true,
+				skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
+				TeX: { equationNumbers: { autoNumber: "AMS" },
+						 extensions: ["AMSmath.js", "AMSsymbols.js"] }
+			}
+		});
+		</script>
+	{{ end }}
+
+	<!-- KaTeX support -->
+	{{ with .Site.Params.katex }}
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css">
+		<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.js"></script>
+		<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/contrib/auto-render.min.js" onload="renderMathInElement(document.body);"></script>
+		
+		<!-- inline KaTeX -->
+		<script>
+			document.addEventListener("DOMContentLoaded", function() {
+					renderMathInElement(document.body, {
+							delimiters: [
+									{left: "$$", right: "$$", display: true},
+									{left: "$", right: "$", display: false}
+							]
+					});
+			});
+			</script>
+	{{ end }}
 	
 	<!-- Custom CSS style get applied last -->
 	{{- if isset .Site.Params "customcss" }}