diff --git a/.dictionary b/.dictionary
index 8b2d088..709352f 100644
--- a/.dictionary
+++ b/.dictionary
@@ -23,6 +23,8 @@ toc
 ToC
 relref
 href
+KaTeX
+katex
 Emojify
 Netlify
 Makefile
diff --git a/exampleSite/content/posts/advanced/shortcodes.md b/exampleSite/content/posts/advanced/shortcodes.md
index 7493a69..f7e95e2 100644
--- a/exampleSite/content/posts/advanced/shortcodes.md
+++ b/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.
diff --git a/layouts/shortcodes/katex.html b/layouts/shortcodes/katex.html
new file mode 100644
index 0000000..6bb6708
--- /dev/null
+++ b/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>
diff --git a/package.json b/package.json
index 4e3428d..c04cb5b 100644
--- a/package.json
+++ b/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",
diff --git a/src/js/katex.js b/src/js/katex.js
new file mode 100644
index 0000000..a8d4ad9
--- /dev/null
+++ b/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))
+})
diff --git a/webpack.config.js b/webpack.config.js
index b2f31fa..b6b760c 100644
--- a/webpack.config.js
+++ b/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",