feat: add KaTeX support (#211)

.dictionary

@@ -23,6 +23,8 @@ toc
 ToC
 relref
 href
+KaTeX
+katex
 Emojify
 Netlify
 Makefile

exampleSite/content/posts/advanced/shortcodes.md

@@ -266,3 +266,41 @@ investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad
 prompts feud gait, quid exercise emeritus bis e. In pro quints consequent.
 {{< /tab >}}
 {{< /tabs >}}
+
+## KaTeX
+
+[KaTeX](https://katex.org/) shortcode let you render math typesetting in markdown document.
+
+### Example
+
+{{< columns >}}
+
+```latex
+{{</* katex [display] [class="text-center"] */>}}
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+{{</* /katex */>}}
+```
+
+<--->
+
+<!-- spellchecker-disable -->
+<!-- prettier-ignore -->
+{{< katex display >}}
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+{{< /katex >}}
+
+<!-- spellchecker-enable -->
+
+{{< /columns >}}
+
+KaTeX can also be used inline, for example {{< katex >}}\pi(x){{< /katex >}} or used with the `display` parameter:
+
+<!-- spellchecker-disable -->
+<!-- prettier-ignore -->
+{{< katex display >}}
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+{{< /katex >}}
+
+<!-- spellchecker-enable -->
+
+Text continues here.

layouts/shortcodes/katex.html

@@ -0,0 +1,15 @@
+{{ if not (.Page.Scratch.Get "katex") }}
+  <!-- Include katex only first time -->
+  <link
+    rel="stylesheet"
+    href="{{ index (index .Site.Data.assets "katex.css") "src" | relURL }}"
+  />
+  <script defer src="{{ index (index .Site.Data.assets "katex.js") "src" | relURL }}"></script>
+  {{ .Page.Scratch.Set "katex" true }}
+{{ end }}
+
+<span class="gblog-katex">
+  {{ cond (in .Params "display") "\\[" "\\(" -}}
+  {{- trim .Inner "\n" -}}
+  {{- cond (in .Params "display") "\\]" "\\)" }}
+</span>

package.json

@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "clipboard": "2.0.10",
+    "katex": "0.15.2",
     "mermaid": "8.14.0",
     "store2": "2.13.1"
   },
@@ -42,6 +43,7 @@
     "eslint": "8.9.0",
     "eslint-config-prettier": "8.4.0",
     "eslint-plugin-prettier": "4.0.0",
+    "favicons": "6.2.2",
     "favicons-webpack-plugin": "5.0.2",
     "npm-run-all": "4.1.5",
     "postcss-loader": "6.2.1",

src/js/katex.js

@@ -0,0 +1,9 @@
+import "katex/dist/katex.css"
+
+document.addEventListener("DOMContentLoaded", function () {
+  import("katex/dist/contrib/auto-render")
+    .then(({ default: renderMathInElement }) => {
+      renderMathInElement(document.body)
+    })
+    .catch((error) => console.error(error))
+})

webpack.config.js

@@ -17,7 +17,10 @@ var config = {
       path.resolve("src", "sass", "print.scss")
     ],
     main: path.resolve("src", "js", "app.js"),
-    mermaid: path.resolve("src", "js", "mermaid.js")
+    mermaid: path.resolve("src", "js", "mermaid.js"),
+    katex: [path.resolve("src", "js", "katex.js")].concat(
+      glob.sync(path.join(nodeModulesPath, "katex", "dist", "fonts", "*.{woff,woff2}"))
+    )
   },
   output: {
     filename: "js/[name]-[contenthash:8].bundle.min.js",