feat: support katex math rendering (#9)

6 files changed, 57 insertions, 28 deletions

diff --git a/README.md b/README.md
index c607aca..234f19b 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@ A minimal, latex-style hugo theme for personal blogging.
 - [Disqus](https://disqus.com/) & Google Analytics included
 - Responsive design for mobile devices
 - Customize the site with your own styles
-- Math equations powered by [MathJax](https://www.mathjax.org/)
+- Math equations powered by [KaTeX](https://katex.org/) or [MathJax](https://www.mathjax.org/)
 - Minimal CSS, No JavaScript, Blazing Fast!
 
 ## Usage
@@ -18,7 +18,6 @@ Install with:
 
 ```bash
 git submodule add https://github.com/queensferryme/hugo-theme-texify.git themes/hugo-theme-texify
-cp themes/hugo-theme-texify/config.toml config.toml
 ```
 
 Upgrade with:
@@ -27,9 +26,9 @@ Upgrade with:
 git submodule foreach git pull origin master
 ```
 
-See `config.toml` for an example configuration.
+See [`config.toml`](https://github.com/queensferryme/hugo-theme-texify/blob/master/config.toml) for an example configuration.
 
-Note that for Simplified Chinese users, it is generally recommended to use [Noto Serif SC](https://fonts.google.com/specimen/Noto+Serif+SC) via Google Fonts. For instance, put the following codes in your `static/css/custom.css`:
+Note that for Simplified Chinese users, it is recommended to use [Noto Serif SC](https://fonts.google.com/specimen/Noto+Serif+SC) via Google Fonts. You may put the following codes in your `static/css/custom.css`:
 
 ```css
 @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;700&display=swap');
diff --git a/config.toml b/config.toml
index d8bff0b..74684e9 100644
--- a/config.toml
+++ b/config.toml
@@ -63,12 +63,15 @@ Follow me on <a class=link href=https://github.com/queensferryme>GitHub</a>,
 """ # notes in the website footer
 keywords = ["hugo", "latex", "theme"] # website keywords
 
-customCSS = [] # path to custom css files, relative to './static/css/'
-customJS = [] # path to custom js files, relative to './static/js/'
+customCSS = []            # path to custom css files, relative to './static/css/'
+customJS = []             # path to custom js files, relative to './static/js/'
 dateFormat = "2006-01-02" # date format, see https://gohugo.io/functions/format/
-enableFullRSS = true # rss full-text output
-enableHanEmph = true # use dots to emphasize chinese texts, see https://zh.wikipedia.org/wiki/%E7%9D%80%E9%87%8D%E5%8F%B7
-enableMathjax = true # enable mathjax for rendering math formulas
+enableFullRSS = true      # rss full-text output
+enableHanEmph = true      # use dots to emphasize chinese texts, see https://zh.wikipedia.org/wiki/%E7%9D%80%E9%87%8D%E5%8F%B7
+
+[params.math]
+enable = true # whether to enable math typesetting
+use = "katex" # katex or mathjax
 
 # https://utteranc.es
 [params.utterances]
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 324f01e..c82b5ad 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -28,9 +28,9 @@
   <meta name="keywords" content="{{ range $key, $value := .Site.Params.keywords }} {{ $value }} {{ end }}">
   {{ end }}
 
-  <!-- mathjax -->
-  {{ if .Site.Params.enableMathjax }}
-  {{ partial "mathjax.html" . }}
+  <!-- math -->
+  {{ if .Site.Params.math.enable }}
+  {{ partial "math.html" . }}
   {{ end }}
 
   <!-- permalink -->
diff --git a/layouts/partials/math.html b/layouts/partials/math.html
new file mode 100644
index 0000000..cfc0cce
--- /dev/null
+++ b/layouts/partials/math.html
@@ -0,0 +1,37 @@
+{{ if eq .Site.Params.math.use "katex" }}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css"
+  integrity="sha384-KiWOvVjnN8qwAZbuQyWDIbfCLFhLXNETzBQjA/92pIowpC0d2O3nppDGQVgwd2nB" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.js"
+  integrity="sha384-0fdwu/T/EQMsQlrHCCHoH10pkPLlKA1jL5dFyUOvB3lfeT2540/2g6YgSi2BL14p" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/contrib/auto-render.min.js"
+  integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    renderMathInElement(document.body, {
+      delimiters: [
+        { left: '$$', right: '$$', display: true },
+        { left: '\\[', right: '\\]', display: true },
+        { left: '$', right: '$', display: false },
+        { left: '\\(', right: '\\)', display: false }
+      ],
+      ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'option'],
+      throwOnError: false
+    });
+  });
+</script>
+{{ else if eq .Site.Params.math.use "mathjax" }}
+<script>
+  window.MathJax = {
+    tex: {
+      inlineMath: [['$', '$'], ['\\(', '\\)']],
+      displayMath: [['$$', '$$'], ['\\[', '\\]']],
+      processEscapes: true,
+      processEnvironments: true,
+    },
+    options: {
+      skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'option'],
+        }
+  };
+</script>
+<script async defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script"></script>
+{{ end }}
diff --git a/layouts/partials/mathjax.html b/layouts/partials/mathjax.html
deleted file mode 100644
index 4cee432..0000000
--- a/layouts/partials/mathjax.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  // https://mathjax.github.io/MathJax-demos-web/convert-configuration/convert-configuration.html
-  window.MathJax = {
-    tex: {
-      inlineMath: [['$', '$'], ['\\(', '\\)']],
-      displayMath: [['$$', '$$'], ['\\[', '\\]']],
-      processEscapes: true,
-      processEnvironments: true,
-    },
-    options: {
-      skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
-    }
-  };
-</script>
-
-<script async defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script"></script>
diff --git a/static/css/content.css b/static/css/content.css
index b5b26ed..128789d 100644
--- a/static/css/content.css
+++ b/static/css/content.css
@@ -4,6 +4,12 @@
     overflow-y: hidden;
 }
 
+.content .katex {
+    font-size: 100%!important;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
 .content :last-child {
     margin-bottom: 0;
 }