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