feat: add katex math typesetting

Author: h-enk

.eslintignore

@@ -1,3 +1,4 @@
 assets/js/index.js
+assets/js/katex.js
 assets/js/vendor
 node_modules

assets/js/katex.js

@@ -0,0 +1,10 @@
+document.addEventListener('DOMContentLoaded', function() {
+  renderMathInElement(document.body, {
+    delimiters: [
+      {left: '$$', right: '$$', display: true},
+      {left: '$', right: '$', display: false},
+      {left: '\\(', right: '\\)', display: false},
+      {left: '\\[', right: '\\]', display: true},
+    ],
+  });
+});

assets/scss/app.scss

@@ -10,6 +10,9 @@
 /** Import highlight.js */
 // @import "highlight.js/scss/dracula";
 
+/** Import KaTeX */
+@import "katex/dist/katex";
+
 /** Import theme styles */
 @import "common/fonts";
 @import "common/global";

assets/scss/common/_global.scss

@@ -223,3 +223,7 @@ body {
   -webkit-text-fill-color: transparent;
   -moz-text-fill-color: transparent;
 }
+
+.katex {
+  font-size: $font-size-md;
+}

config/_default/config.toml

@@ -85,3 +85,6 @@ rel  = "sitemap"
   [[module.mounts]]
     source = "node_modules/flexsearch"
     target = "assets/js/vendor/flexsearch"
+  [[module.mounts]]
+    source = "node_modules/katex"
+    target = "assets/js/vendor/katex"

config/_default/params.toml

@@ -55,3 +55,4 @@ editPage = false
   bootStrapJs = false
   breadCrumb = false
   highLight = true
+  kaTex = true

config/postcss.config.js

@@ -23,6 +23,7 @@ module.exports = {
           './assets/scss/components/_code.scss',
           './assets/scss/components/_search.scss',
           './assets/scss/common/_dark.scss',
+          './node_modules/katex/dist/katex.css'
         ]),
       ],
     }),

content/docs/examples/code.md

@@ -7,6 +7,9 @@
 {{ $highlight := resources.Get "js/highlight.js" -}}
 {{ $highlight := $highlight | js.Build -}}
 
+{{ $katex := resources.Get "js/vendor/katex/dist/katex.js" -}}
+{{ $katexAutoRender := resources.Get "js/vendor/katex/dist/contrib/auto-render.js" -}}
+
 {{ $app := resources.Get "js/app.js" -}}
 
 {{ $slice := slice $app -}}
@@ -40,6 +43,12 @@
   {{ $slice = $slice | append $darkMode -}}
 {{ end -}}
 
+{{ if .Site.Params.options.kaTex -}}
+  {{ $katexConfig := resources.Get "js/katex.js" -}}
+  {{ $katexConfig := $katexConfig | js.Build -}}
+  {{ $slice = $slice | append $katexConfig -}}
+{{ end -}}
+
 {{ $js := $slice | resources.Concat "main.js" -}}
 
 {{ if eq (hugo.Environment) "development" -}}
@@ -50,6 +59,10 @@
   {{ if .Site.Params.options.highLight -}}
     <script src="{{ $highlight.Permalink }}" defer></script>
   {{ end -}}
+  {{ if .Site.Params.options.kaTex -}}
+    <script src="{{ $katex.Permalink }}" defer></script>
+    <script src="{{ $katexAutoRender.Permalink }}" onload="renderMathInElement(document.body);" defer></script>
+  {{ end -}}
   {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.Permalink }}" defer></script>
   {{ end -}}
@@ -58,12 +71,18 @@
   {{ $index := $index | minify | fingerprint "sha512" -}}
   {{ $bs := $bs | minify | fingerprint "sha512" -}}
   {{ $highlight := $highlight | minify | fingerprint "sha512" -}}
+  {{ $katex := $katex | minify | fingerprint "sha512" -}}
+  {{ $katexAutoRender := $katexAutoRender | minify | fingerprint "sha512" -}}
   {{ if .Site.Params.options.bootStrapJs -}}
     <script src="{{ $bs.Permalink }}" integrity="{{ $bs.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}
   <script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ if .Site.Params.options.highLight -}}
-    <script src="{{ $highlight.Permalink }}" defer></script>
+    <script src="{{ $highlight.Permalink }}" integrity="{{ $highlight.Data.Integrity }}" crossorigin="anonymous" defer></script>
+  {{ end -}}
+  {{ if .Site.Params.options.kaTex -}}
+    <script src="{{ $katex.Permalink }}" integrity="{{ $katex.Data.Integrity }}" crossorigin="anonymous" defer></script>
+    <script src="{{ $katexAutoRender.Permalink }}" integrity="{{ $katexAutoRender.Data.Integrity }}" crossorigin="anonymous" onload="renderMathInElement(document.body);" defer></script>
   {{ end -}}
   {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.Permalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>

content/docs/examples/math.md

@@ -28,7 +28,8 @@
     "test": "npm run -s lint",
     "env": "env",
     "precheck": "npm version",
-    "check": "hugo version"
+    "check": "hugo version",
+    "copy:katex-fonts": "shx cp ./node_modules/katex/dist/fonts/* ./static/fonts/"
   },
   "devDependencies": {
     "@babel/cli": "^7.13",
@@ -43,13 +44,15 @@
     "highlight.js": "^10.6.0",
     "hugo-bin": "^0.69",
     "instant.page": "^5.1",
+    "katex": "^0.13.0",
     "lazysizes": "^5.3",
     "markdownlint-cli": "^0.27",
     "netlify-lambda": "^2.0",
     "postcss": "^8.2",
     "postcss-cli": "^8.3",
     "purgecss-whitelister": "^2.4",
     "rimraf": "^3.0",
+    "shx": "^0.3.3",
     "standard-version": "^9.1",
     "stylelint": "^13.12",
     "stylelint-config-standard": "^21.0"