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>