feat: add katex math typesetting

gethyas · Mar 16, 2021 · 253b938 · 253b938
1 parent ee9b898
commit 253b938
Show file tree

Hide file tree

Showing 72 changed files with 159 additions and 4 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,4 @@
 assets/js/index.js
+assets/js/katex.js
 assets/js/vendor
 node_modules
diff --git a/assets/js/katex.js b/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},
+    ],
+  });
+});
diff --git a/assets/scss/app.scss b/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";

diff --git a/assets/scss/common/_global.scss b/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;
+}
diff --git a/config/_default/config.toml b/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"
diff --git a/config/_default/params.toml b/config/_default/params.toml
@@ -55,3 +55,4 @@ editPage = false
   bootStrapJs = false
   breadCrumb = false
   highLight = true
+  kaTex = true
diff --git a/config/postcss.config.js b/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'
         ]),
       ],
     }),

diff --git a/content/docs/examples/code.md b/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

diff --git a/content/docs/examples/math.md b/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.
diff --git a/layouts/partials/footer/script-footer.html b/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>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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,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"

diff --git a/static/fonts/KaTeX_AMS-Regular.ttf b/static/fonts/KaTeX_AMS-Regular.ttf
diff --git a/static/fonts/KaTeX_AMS-Regular.woff b/static/fonts/KaTeX_AMS-Regular.woff
diff --git a/static/fonts/KaTeX_AMS-Regular.woff2 b/static/fonts/KaTeX_AMS-Regular.woff2
diff --git a/static/fonts/KaTeX_Caligraphic-Bold.ttf b/static/fonts/KaTeX_Caligraphic-Bold.ttf
diff --git a/static/fonts/KaTeX_Caligraphic-Bold.woff b/static/fonts/KaTeX_Caligraphic-Bold.woff
diff --git a/static/fonts/KaTeX_Caligraphic-Bold.woff2 b/static/fonts/KaTeX_Caligraphic-Bold.woff2
diff --git a/static/fonts/KaTeX_Caligraphic-Regular.ttf b/static/fonts/KaTeX_Caligraphic-Regular.ttf
diff --git a/static/fonts/KaTeX_Caligraphic-Regular.woff b/static/fonts/KaTeX_Caligraphic-Regular.woff
diff --git a/static/fonts/KaTeX_Caligraphic-Regular.woff2 b/static/fonts/KaTeX_Caligraphic-Regular.woff2
diff --git a/static/fonts/KaTeX_Fraktur-Bold.ttf b/static/fonts/KaTeX_Fraktur-Bold.ttf
diff --git a/static/fonts/KaTeX_Fraktur-Bold.woff b/static/fonts/KaTeX_Fraktur-Bold.woff
diff --git a/static/fonts/KaTeX_Fraktur-Bold.woff2 b/static/fonts/KaTeX_Fraktur-Bold.woff2
diff --git a/static/fonts/KaTeX_Fraktur-Regular.ttf b/static/fonts/KaTeX_Fraktur-Regular.ttf
diff --git a/static/fonts/KaTeX_Fraktur-Regular.woff b/static/fonts/KaTeX_Fraktur-Regular.woff
diff --git a/static/fonts/KaTeX_Fraktur-Regular.woff2 b/static/fonts/KaTeX_Fraktur-Regular.woff2
diff --git a/static/fonts/KaTeX_Main-Bold.ttf b/static/fonts/KaTeX_Main-Bold.ttf
diff --git a/static/fonts/KaTeX_Main-Bold.woff b/static/fonts/KaTeX_Main-Bold.woff
diff --git a/static/fonts/KaTeX_Main-Bold.woff2 b/static/fonts/KaTeX_Main-Bold.woff2
diff --git a/static/fonts/KaTeX_Main-BoldItalic.ttf b/static/fonts/KaTeX_Main-BoldItalic.ttf
diff --git a/static/fonts/KaTeX_Main-BoldItalic.woff b/static/fonts/KaTeX_Main-BoldItalic.woff
diff --git a/static/fonts/KaTeX_Main-BoldItalic.woff2 b/static/fonts/KaTeX_Main-BoldItalic.woff2
diff --git a/static/fonts/KaTeX_Main-Italic.ttf b/static/fonts/KaTeX_Main-Italic.ttf
diff --git a/static/fonts/KaTeX_Main-Italic.woff b/static/fonts/KaTeX_Main-Italic.woff
diff --git a/static/fonts/KaTeX_Main-Italic.woff2 b/static/fonts/KaTeX_Main-Italic.woff2
diff --git a/static/fonts/KaTeX_Main-Regular.ttf b/static/fonts/KaTeX_Main-Regular.ttf
diff --git a/static/fonts/KaTeX_Main-Regular.woff b/static/fonts/KaTeX_Main-Regular.woff
diff --git a/static/fonts/KaTeX_Main-Regular.woff2 b/static/fonts/KaTeX_Main-Regular.woff2
diff --git a/static/fonts/KaTeX_Math-BoldItalic.ttf b/static/fonts/KaTeX_Math-BoldItalic.ttf
diff --git a/static/fonts/KaTeX_Math-BoldItalic.woff b/static/fonts/KaTeX_Math-BoldItalic.woff
diff --git a/static/fonts/KaTeX_Math-BoldItalic.woff2 b/static/fonts/KaTeX_Math-BoldItalic.woff2
diff --git a/static/fonts/KaTeX_Math-Italic.ttf b/static/fonts/KaTeX_Math-Italic.ttf
diff --git a/static/fonts/KaTeX_Math-Italic.woff b/static/fonts/KaTeX_Math-Italic.woff
diff --git a/static/fonts/KaTeX_Math-Italic.woff2 b/static/fonts/KaTeX_Math-Italic.woff2
diff --git a/static/fonts/KaTeX_SansSerif-Bold.ttf b/static/fonts/KaTeX_SansSerif-Bold.ttf
diff --git a/static/fonts/KaTeX_SansSerif-Bold.woff b/static/fonts/KaTeX_SansSerif-Bold.woff
diff --git a/static/fonts/KaTeX_SansSerif-Bold.woff2 b/static/fonts/KaTeX_SansSerif-Bold.woff2
diff --git a/static/fonts/KaTeX_SansSerif-Italic.ttf b/static/fonts/KaTeX_SansSerif-Italic.ttf
diff --git a/static/fonts/KaTeX_SansSerif-Italic.woff b/static/fonts/KaTeX_SansSerif-Italic.woff
diff --git a/static/fonts/KaTeX_SansSerif-Italic.woff2 b/static/fonts/KaTeX_SansSerif-Italic.woff2
diff --git a/static/fonts/KaTeX_SansSerif-Regular.ttf b/static/fonts/KaTeX_SansSerif-Regular.ttf
diff --git a/static/fonts/KaTeX_SansSerif-Regular.woff b/static/fonts/KaTeX_SansSerif-Regular.woff
diff --git a/static/fonts/KaTeX_SansSerif-Regular.woff2 b/static/fonts/KaTeX_SansSerif-Regular.woff2
diff --git a/static/fonts/KaTeX_Script-Regular.ttf b/static/fonts/KaTeX_Script-Regular.ttf
diff --git a/static/fonts/KaTeX_Script-Regular.woff b/static/fonts/KaTeX_Script-Regular.woff
diff --git a/static/fonts/KaTeX_Script-Regular.woff2 b/static/fonts/KaTeX_Script-Regular.woff2
diff --git a/static/fonts/KaTeX_Size1-Regular.ttf b/static/fonts/KaTeX_Size1-Regular.ttf
diff --git a/static/fonts/KaTeX_Size1-Regular.woff b/static/fonts/KaTeX_Size1-Regular.woff
diff --git a/static/fonts/KaTeX_Size1-Regular.woff2 b/static/fonts/KaTeX_Size1-Regular.woff2
diff --git a/static/fonts/KaTeX_Size2-Regular.ttf b/static/fonts/KaTeX_Size2-Regular.ttf
diff --git a/static/fonts/KaTeX_Size2-Regular.woff b/static/fonts/KaTeX_Size2-Regular.woff
diff --git a/static/fonts/KaTeX_Size2-Regular.woff2 b/static/fonts/KaTeX_Size2-Regular.woff2
diff --git a/static/fonts/KaTeX_Size3-Regular.ttf b/static/fonts/KaTeX_Size3-Regular.ttf
diff --git a/static/fonts/KaTeX_Size3-Regular.woff b/static/fonts/KaTeX_Size3-Regular.woff
diff --git a/static/fonts/KaTeX_Size3-Regular.woff2 b/static/fonts/KaTeX_Size3-Regular.woff2
diff --git a/static/fonts/KaTeX_Size4-Regular.ttf b/static/fonts/KaTeX_Size4-Regular.ttf
diff --git a/static/fonts/KaTeX_Size4-Regular.woff b/static/fonts/KaTeX_Size4-Regular.woff
diff --git a/static/fonts/KaTeX_Size4-Regular.woff2 b/static/fonts/KaTeX_Size4-Regular.woff2
diff --git a/static/fonts/KaTeX_Typewriter-Regular.ttf b/static/fonts/KaTeX_Typewriter-Regular.ttf
diff --git a/static/fonts/KaTeX_Typewriter-Regular.woff b/static/fonts/KaTeX_Typewriter-Regular.woff
diff --git a/static/fonts/KaTeX_Typewriter-Regular.woff2 b/static/fonts/KaTeX_Typewriter-Regular.woff2