Merge pull request #210 from MaddyGuthridge/maddy-marked-katex

MaddyGuthridge · web-flow · commit 9a1889579532 · 2025-10-15T22:30:52.000+11:00
Use katex in markdown rendering
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "minifolio",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": true,
   "license": "GPL-3.0-only",
   "scripts": {
@@ -28,6 +28,7 @@
     "marked": "^16.2.1",
     "marked-custom-heading-id": "^2.0.15",
     "marked-gfm-heading-id": "^4.1.2",
+    "marked-katex-extension": "^5.1.5",
     "marked-smartypants-lite": "^1.0.3",
     "mermaid": "^11.10.1",
     "mime-types": "^3.0.1",
diff --git a/src/app.html b/src/app.html
@@ -4,7 +4,8 @@
 <head>
 	<meta charset="utf-8" />
 	<!-- LineAwesome -->
-	<link rel= "stylesheet" href= "https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" >
+	<link rel= "stylesheet" href= "https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" ><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous">
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	%sveltekit.head%
 </head>
diff --git a/src/components/markdown/Markdown.svelte b/src/components/markdown/Markdown.svelte
@@ -6,6 +6,8 @@
   import customHeadingId from 'marked-custom-heading-id';
   // GitHub-flavoured Markdown, automatic heading IDs
   import { gfmHeadingId } from 'marked-gfm-heading-id';
+  // Katex (math rendering)
+  import markedKatex from 'marked-katex-extension';
   // Smartypants quotation marks and the like
   import { markedSmartypantsLite } from 'marked-smartypants-lite';
   import markedMermaid from '@maddyguthridge/marked-mermaid';
@@ -31,12 +33,17 @@
     },
   };
 
+  const katexOptions = {
+    throwOnError: false,
+  };
+
   // Specifically instantiate a new `Marked` instance to avoid exceeding the call stack
   const marked = new Marked(
     gfmHeadingId(),
     customHeadingId(),
     markedSmartypantsLite(),
     markedMermaid(),
+    markedKatex(katexOptions),
     { renderer },
   );
 
diff --git a/src/routes/[...item]/+page.svelte b/src/routes/[...item]/+page.svelte
@@ -11,10 +11,7 @@
   import api from '$endpoints';
   import consts from '$lib/consts';
   import DelayedUpdater from '$lib/delayedUpdate';
-  import {
-    applyFiltersToItemChildren,
-    createItemFilter,
-  } from '$lib/itemFilter';
+  import { applyFiltersToItemChildren, createItemFilter } from '$lib/itemFilter';
   import itemId from '$lib/itemId';
   import { generateKeywords, getDescription } from '$lib/seo';
   import type { ItemInfo } from '$lib/server/data/item';
