🧮 - Add KaTeX for MathML in markdown

xdesro · Oct 19, 2023 · 013289e · 013289e
1 parent 3dc7dc3
commit 013289e
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 1 deletion.
diff --git a/.eleventy.js b/.eleventy.js
@@ -9,6 +9,7 @@ const markdownRenderer = require('markdown-it')({
   typographer: true,
   breaks: true
 })
+  .use(require('markdown-it-katex'))
   .use(require('markdown-it-attrs'))
   .use(require('markdown-it-implicit-figures'));
 

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-  "editor.formatOnSave": true
+  "editor.formatOnSave": false
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@11ty/eleventy": "^2.0.0",
     "@11ty/eleventy-plugin-vue": "^0.2.2",
     "@dogstudio/highway": "^2.2.1",
+    "@iktakahiro/markdown-it-katex": "^4.0.1",
     "concurrently": "^5.3.0",
     "contentful": "^8.1.7",
     "core-js": "^3.8.2",

diff --git a/src/_includes/layout.html b/src/_includes/layout.html
@@ -39,6 +39,8 @@
   <link rel="preload" href="/fonts/neue-haas-grotesk/neue-haas-grotesk-bold.woff2" as="font" type="font/woff2"
     crossorigin />
   <link rel="stylesheet" href="/css/index.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">
+
   <script>
     if (localStorage.getItem('darkMode') == 'true')
       document.documentElement.setAttribute('dark', true);

diff --git a/src/_lib/utils.js b/src/_lib/utils.js
@@ -4,6 +4,7 @@ const markdownRenderer = require('markdown-it')({
   typographer: true,
   breaks: true
 })
+  .use(require('@iktakahiro/markdown-it-katex'), { throwOnError: true, output: 'mathml' })
   .use(require('markdown-it-attrs'))
   .use(require('markdown-it-implicit-figures'))
   .use(require('markdown-it-anchor'), {
@@ -22,3 +23,4 @@ const dateFormatter = dateString => {
   });
 };
 export { markdownRenderer, dateFormatter };
+