feat: add KaTeX <Tex> component for math typography

package-lock.json

@@ -13,6 +13,7 @@
         "@sveltejs/kit": "^2.5.0",
         "@sveltejs/vite-plugin-svelte": "^4.0.0",
         "autoprefixer": "^10.4.0",
+        "katex": "^0.16.45",
         "postcss": "^8.4.0",
         "svelte": "^5.0.0",
         "tailwindcss": "^3.4.0",
@@ -1795,6 +1796,31 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/katex": {
+      "version": "0.16.45",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.45.tgz",
+      "integrity": "sha512-pQpZbdBu7wCTmQUh7ufPmLr0pFoObnGUoL/yhtwJDgmmQpbkg/0HSVti25Fu4rmd1oCR6NGWe9vqTWuWv3GcNA==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",

package.json

@@ -18,16 +18,17 @@
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.5.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "svelte": "^5.0.0",
-    "vite": "^5.4.0",
-    "tailwindcss": "^3.4.0",
     "autoprefixer": "^10.4.0",
-    "postcss": "^8.4.0"
+    "katex": "^0.16.45",
+    "postcss": "^8.4.0",
+    "svelte": "^5.0.0",
+    "tailwindcss": "^3.4.0",
+    "vite": "^5.4.0"
   },
   "devDependencies": {
-    "svelte-check": "^4.0.0",
     "prettier": "^3.3.0",
     "prettier-plugin-svelte": "^3.2.0",
+    "svelte-check": "^4.0.0",
     "vitest": "^3.2.0"
   }
 }

src/lib/components/tex.svelte

@@ -0,0 +1,26 @@
+<script>
+  import katex from 'katex';
+
+  /**
+   * @type {{
+   *   math: string;
+   *   display?: boolean;
+   *   ariaLabel?: string;
+   * }}
+   */
+  let { math, display = false, ariaLabel } = $props();
+
+  const html = $derived(
+    katex.renderToString(math, {
+      displayMode: display,
+      throwOnError: false,
+      output: 'htmlAndMathml',
+    })
+  );
+</script>
+
+{#if ariaLabel}
+  <span aria-label={ariaLabel}>{@html html}</span>
+{:else}
+  {@html html}
+{/if}