latex

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",

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 } : {}),
 			},

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

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: [],