feat: add katex math typesetting

.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

@@ -1,7 +1,7 @@
 ---
 title: "Code"
-description: "Code highlighting examples"
-lead: "Code highlighting examples"
+description: "Code highlighting examples."
+lead: "Code highlighting examples."
 date: 2021-03-16T08:43:34+01:00
 lastmod: 2021-03-16T08:43:34+01:00
 draft: false

content/docs/examples/math.md

@@ -0,0 +1,44 @@
+---
+title: "Math"
+description: "Math typesetting examples."
+lead: "Math typesetting examples."
+date: 2021-03-16T10:46:05+01:00
+lastmod: 2021-03-16T10:46:05+01:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "examples"
+weight: 210
+toc: true
+---
+
+## Example 1
+
+_Excerpt taken from [Supernova Neutrinos](https://neutrino.leima.is/book/introduction/supernova-neutrinos/)_
+
+### Markdown
+
+```md
+The average energy of the neutrinos $\langle E \rangle$ emitted during a supernova explosion is of the order of 10MeV, and the neutrino luminosity at the early epoch of the explosion is approximately $10^{52}\mathrm{ergs\cdot s^{-1}}$.
+Therefore, the number density of the neutrinos at the radius $R$ is
+
+$$
+\begin{equation*}
+   n \sim  10^{18} \mathrm{cm^{-3}} \left(\frac{100\mathrm{km}}{R}\right)^2 \left(\frac{10\mathrm{MeV}}{\langle E \rangle}\right).
+\end{equation*}
+$$
+```
+
+### HTML
+
+The average energy of the neutrinos $\langle E \rangle$ emitted during a supernova explosion is of the order of 10MeV, and the neutrino luminosity at the early epoch of the explosion is approximately $10^{52}\mathrm{ergs\cdot s^{-1}}$.
+Therefore, the number density of the neutrinos at the radius $R$ is
+
+$$
+\begin{equation*}
+   n \sim  10^{18} \mathrm{cm^{-3}} \left(\frac{100\mathrm{km}}{R}\right)^2 \left(\frac{10\mathrm{MeV}}{\langle E \rangle}\right).
+\end{equation*}
+$$
+
+It turns out that the ambient dense neutrino medium has a significant impact on neutrino oscillations, which has been intensely investigated in the last decade.

layouts/partials/footer/script-footer.html

@@ -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>

package-lock.json

@@ -20,6 +20,7 @@
         "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",
@@ -27,6 +28,7 @@
         "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"
@@ -7531,6 +7533,27 @@
       "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==",
       "dev": true
     },
+    "node_modules/katex": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.13.0.tgz",
+      "integrity": "sha512-6cHbzbegYgS9vvVGuH8UA+o97X+ZshtboSqJJCdq7trBYzuD75JNwr7Ef606xkUjecPPhFnyB+afx1dVafielg==",
+      "dev": true,
+      "dependencies": {
+        "commander": "^6.0.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/keyv": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
@@ -11237,6 +11260,22 @@
         "node": ">=4"
       }
     },
+    "node_modules/shx": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/shx/-/shx-0.3.3.tgz",
+      "integrity": "sha512-nZJ3HFWVoTSyyB+evEKjJ1STiixGztlqwKLTUNV5KqMWtGey9fTd4KU1gdZ1X9BV6215pswQ/Jew9NsuS/fNDA==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.3",
+        "shelljs": "^0.8.4"
+      },
+      "bin": {
+        "shx": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
@@ -20085,6 +20124,23 @@
       "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==",
       "dev": true
     },
+    "katex": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.13.0.tgz",
+      "integrity": "sha512-6cHbzbegYgS9vvVGuH8UA+o97X+ZshtboSqJJCdq7trBYzuD75JNwr7Ef606xkUjecPPhFnyB+afx1dVafielg==",
+      "dev": true,
+      "requires": {
+        "commander": "^6.0.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+          "dev": true
+        }
+      }
+    },
     "keyv": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
@@ -23005,6 +23061,16 @@
         "rechoir": "^0.6.2"
       }
     },
+    "shx": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/shx/-/shx-0.3.3.tgz",
+      "integrity": "sha512-nZJ3HFWVoTSyyB+evEKjJ1STiixGztlqwKLTUNV5KqMWtGey9fTd4KU1gdZ1X9BV6215pswQ/Jew9NsuS/fNDA==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.3",
+        "shelljs": "^0.8.4"
+      }
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",

package.json

@@ -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,6 +44,7 @@
     "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",
@@ -50,6 +52,7 @@
     "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"