From 7600d26565b409ac61fecc3aca010d5e0f9cba21 Mon Sep 17 00:00:00 2001
From: chyzman <chyzalt@gmail.com>
Date: Fri, 28 Aug 2026 23:29:04 -0400
Subject: [PATCH] latex

---
 packages/ui/package.json                      |  1 +
 .../ui/src/components/base/MarkdownBody.vue   |  4 ++
 packages/utils/markdown/parse.ts              |  3 +-
 packages/utils/markdown/security.ts           | 14 ++++---
 pnpm-lock.yaml                                | 38 ++++++++++++++-----
 5 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/packages/ui/package.json b/packages/ui/package.json
index 809ad59018..429ac10421 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -86,6 +86,7 @@
 		"highlight.js": "^11.9.0",
 		"intl-messageformat": "^10.7.7",
 		"jszip": "^3.10.1",
+		"katex": "^0.17.0",
 		"lru-cache": "^11.2.4",
 		"motion-v": "^2.2.1",
 		"overlayscrollbars": "^2.15.1",
diff --git a/packages/ui/src/components/base/MarkdownBody.vue b/packages/ui/src/components/base/MarkdownBody.vue
index 669a2ba36d..f126f7cb59 100644
--- a/packages/ui/src/components/base/MarkdownBody.vue
+++ b/packages/ui/src/components/base/MarkdownBody.vue
@@ -29,9 +29,12 @@
 
 <script setup lang="ts">
 import { Markdown } from '@comark/vue'
+import { Math as MarkdownMath } from '@comark/vue/plugins/math'
 import { modrinthBasicPlugins, modrinthForceLinkTarget, modrinthPlugins } from '@modrinth/utils'
 import { computed } from 'vue'
 
+import 'katex/dist/katex.min.css'
+
 import MarkdownAlert, { alertMarkerTypes } from './markdown/MarkdownAlert.vue'
 import MarkdownCollectionEmbed from './markdown/MarkdownCollectionEmbed.vue'
 import MarkdownHighlightedPre from './markdown/MarkdownHighlightedPre.vue'
@@ -85,6 +88,7 @@ const components = computed(() =>
 				organization: MarkdownOrganizationEmbed,
 				collection: MarkdownCollectionEmbed,
 				input: MarkdownTaskCheckbox,
+				math: MarkdownMath,
 				mermaid: MarkdownMermaid,
 				...(props.highlight ? { pre: MarkdownHighlightedPre } : {}),
 			},
diff --git a/packages/utils/markdown/parse.ts b/packages/utils/markdown/parse.ts
index c307504252..f955cdcb73 100644
--- a/packages/utils/markdown/parse.ts
+++ b/packages/utils/markdown/parse.ts
@@ -11,6 +11,7 @@ import components from 'comark/plugins/components'
 import emoji from 'comark/plugins/emoji'
 import footnotes from 'comark/plugins/footnotes'
 import html from 'comark/plugins/html'
+import math from 'comark/plugins/math'
 import mermaid from 'comark/plugins/mermaid'
 import punctuation from 'comark/plugins/punctuation'
 import taskList from 'comark/plugins/task-list'
@@ -48,7 +49,7 @@ export const modrinthPlugins: ComarkPlugin[] = [
 	html(),
 	modrinthHtmlBlock(),
 	// json-render()
-	// math(), // needs dep
+	math(),
 	mermaid(),
 	punctuation(),
 	// rangi() // needs dep + we have highlight.js + if we do want to switch I'd say shiki is better
diff --git a/packages/utils/markdown/security.ts b/packages/utils/markdown/security.ts
index 748a947fbd..387cef6a77 100644
--- a/packages/utils/markdown/security.ts
+++ b/packages/utils/markdown/security.ts
@@ -5,18 +5,19 @@ import { visitAsync } from 'comark/utils'
 
 const allowedClassPrefixes = ['hljs-', 'language-']
 
-const taskListClassByTag: Record<string, string> = {
-	input: 'task-list-item-checkbox',
-	li: 'task-list-item',
-	ul: 'contains-task-list',
+const exactClassesByTag: Record<string, string[]> = {
+	input: ['task-list-item-checkbox'],
+	li: ['task-list-item'],
+	math: ['math', 'inline', 'block'],
+	ul: ['contains-task-list'],
 }
 
 function filterClassValue(value: unknown, tag?: string): string | undefined {
 	if (typeof value !== 'string') return undefined
-	const exact = tag ? taskListClassByTag[tag] : undefined
+	const exact = tag ? exactClassesByTag[tag] : undefined
 	const kept = value
 		.split(/\s+/)
-		.filter((cls) => cls === exact || allowedClassPrefixes.some((prefix) => cls.startsWith(prefix)))
+		.filter((cls) => exact?.includes(cls) || allowedClassPrefixes.some((prefix) => cls.startsWith(prefix)))
 	return kept.length ? kept.join(' ') : undefined
 }
 
@@ -93,6 +94,7 @@ export const attributeAllowlist: Record<string, string[]> = {
 	li: ['class'],
 	map: ['name'],
 	mark: [],
+	math: ['content', 'class'],
 	mermaid: ['content', 'theme', 'theme-dark', 'class'],
 	nav: [],
 	ol: [],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3137a64ff9..2a3a2d3af7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -657,7 +657,7 @@ importers:
         version: 6.39.12
       '@comark/vue':
         specifier: ^0.6.2
-        version: 0.6.2(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))(vue@3.5.27(typescript@5.9.3))
+        version: 0.6.2(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))(katex@0.17.0)(vue@3.5.27(typescript@5.9.3))
       '@intercom/messenger-js-sdk':
         specifier: ^0.0.14
         version: 0.0.14
@@ -717,7 +717,7 @@ importers:
         version: 1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47)
       comark:
         specifier: ^0.6.2
-        version: 0.6.2(patch_hash=c8af805d46dd2a152fda357d551ed56a0a876f61520b78ad6fe250b82afd17f8)(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))
+        version: 0.6.2(patch_hash=c8af805d46dd2a152fda357d551ed56a0a876f61520b78ad6fe250b82afd17f8)(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))(katex@0.17.0)
       dayjs:
         specifier: ^1.11.10
         version: 1.11.19
@@ -748,6 +748,9 @@ importers:
       jszip:
         specifier: ^3.10.1
         version: 3.10.1
+      katex:
+        specifier: ^0.17.0
+        version: 0.17.0
       lru-cache:
         specifier: ^11.2.4
         version: 11.2.5
@@ -862,13 +865,13 @@ importers:
         version: 6.39.12
       '@comark/html':
         specifier: ^0.6.2
-        version: 0.6.2(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))
+        version: 0.6.2(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))(katex@0.17.0)
       '@types/three':
         specifier: ^0.172.0
         version: 0.172.0
       comark:
         specifier: ^0.6.2
-        version: 0.6.2(patch_hash=c8af805d46dd2a152fda357d551ed56a0a876f61520b78ad6fe250b82afd17f8)(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))
+        version: 0.6.2(patch_hash=c8af805d46dd2a152fda357d551ed56a0a876f61520b78ad6fe250b82afd17f8)(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))(katex@0.17.0)
       dayjs:
         specifier: ^1.11.10
         version: 1.11.19
@@ -5863,6 +5866,10 @@ packages:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
 
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
   comment-parser@1.4.1:
     resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
     engines: {node: '>= 12.0.0'}
@@ -7420,6 +7427,10 @@ packages:
   jszip@3.10.1:
     resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
 
+  katex@0.17.0:
+    resolution: {integrity: sha512-Vdw0ATsQ9V+LuegM/BTwQqV/6cTl5lbGcIrU+BCgLxyf6bo38ybOr372tuSIxir3CN720flu1meYR6XzNMwQnw==}
+    hasBin: true
+
   keep-a-changelog@3.0.2:
     resolution: {integrity: sha512-MKk4RWduGopP7MoA8bkzdXQk9CV6cbqNjMzpClM/mA2kT+jsbvO6co2h3UuYPe6/bX/UITemzLBNEanplrIOmQ==}
     hasBin: true
@@ -11320,20 +11331,22 @@ snapshots:
       style-mod: 4.1.3
       w3c-keyname: 2.2.8
 
-  '@comark/html@0.6.2(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))':
+  '@comark/html@0.6.2(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))(katex@0.17.0)':
     dependencies:
-      comark: 0.6.2(patch_hash=c8af805d46dd2a152fda357d551ed56a0a876f61520b78ad6fe250b82afd17f8)(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))
+      comark: 0.6.2(patch_hash=c8af805d46dd2a152fda357d551ed56a0a876f61520b78ad6fe250b82afd17f8)(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))(katex@0.17.0)
     optionalDependencies:
       beautiful-mermaid: 1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47)
+      katex: 0.17.0
     transitivePeerDependencies:
       - rangi
 
-  '@comark/vue@0.6.2(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))(vue@3.5.27(typescript@5.9.3))':
+  '@comark/vue@0.6.2(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))(katex@0.17.0)(vue@3.5.27(typescript@5.9.3))':
     dependencies:
-      comark: 0.6.2(patch_hash=c8af805d46dd2a152fda357d551ed56a0a876f61520b78ad6fe250b82afd17f8)(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))
+      comark: 0.6.2(patch_hash=c8af805d46dd2a152fda357d551ed56a0a876f61520b78ad6fe250b82afd17f8)(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))(katex@0.17.0)
       vue: 3.5.27(typescript@5.9.3)
     optionalDependencies:
       beautiful-mermaid: 1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47)
+      katex: 0.17.0
     transitivePeerDependencies:
       - rangi
 
@@ -15972,7 +15985,7 @@ snapshots:
 
   colord@2.9.3: {}
 
-  comark@0.6.2(patch_hash=c8af805d46dd2a152fda357d551ed56a0a876f61520b78ad6fe250b82afd17f8)(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47)):
+  comark@0.6.2(patch_hash=c8af805d46dd2a152fda357d551ed56a0a876f61520b78ad6fe250b82afd17f8)(beautiful-mermaid@1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47))(katex@0.17.0):
     dependencies:
       entities: 8.0.0
       htmlparser2: 12.0.0
@@ -15980,6 +15993,7 @@ snapshots:
       markdown-exit: 1.1.0-beta.2
     optionalDependencies:
       beautiful-mermaid: 1.1.3(patch_hash=51834efb99f2945be29ce3a3cbc45a3b9ff4cde6ca80ba6d2c22e85d9b9cbd47)
+      katex: 0.17.0
 
   combined-stream@1.0.8:
     dependencies:
@@ -15997,6 +16011,8 @@ snapshots:
 
   commander@7.2.0: {}
 
+  commander@8.3.0: {}
+
   comment-parser@1.4.1: {}
 
   comment-parser@1.4.5: {}
@@ -17948,6 +17964,10 @@ snapshots:
       readable-stream: 2.3.8(patch_hash=3045f7adf989b4e668a4a13819b7285b0de186b79bbf22408acaf2a41c6eaa86)
       setimmediate: 1.0.5
 
+  katex@0.17.0:
+    dependencies:
+      commander: 8.3.0
+
   keep-a-changelog@3.0.2:
     dependencies:
       ini: 6.0.0