KaTeX support

packages/frontend/package.json

@@ -51,6 +51,7 @@
 		"insert-text-at-cursor": "0.3.0",
 		"is-file-animated": "1.0.2",
 		"json5": "2.2.3",
+		"katex": "^0.16.9",
 		"matter-js": "0.19.0",
 		"mfm-js": "0.23.3",
 		"misskey-js": "workspace:*",

packages/frontend/src/components/MkFormula.vue

@@ -0,0 +1,25 @@
+<template>
+	<XFormula :formula="formula" :block="block" />
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent } from "vue";
+
+export default defineComponent({
+	components: {
+		XFormula: defineAsyncComponent(
+			() => import("@/components/MkFormulaCore.vue"),
+		),
+	},
+	props: {
+		formula: {
+			type: String,
+			required: true,
+		},
+		block: {
+			type: Boolean,
+			required: true,
+		},
+	},
+});
+</script>

packages/frontend/src/components/MkFormulaCore.vue

@@ -0,0 +1,36 @@
+<template>
+	<div v-if="block" v-html="compiledFormula"></div>
+	<span v-else v-html="compiledFormula"></span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import katex from "katex";
+
+export default defineComponent({
+	props: {
+		formula: {
+			type: String,
+			required: true,
+		},
+		block: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	computed: {
+		compiledFormula(): any {
+			const katexString = katex.renderToString(this.formula, {
+				throwOnError: false,
+			} as any);
+			return this.block
+				? `<div style="text-align:center">${katexString}</div>`
+				: katexString;
+		},
+	},
+});
+</script>
+
+<style>
+@import "../../node_modules/katex/dist/katex.min.css";
+</style>

packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts

@@ -12,6 +12,7 @@ import MkLink from '@/components/MkLink.vue';
 import MkMention from '@/components/MkMention.vue';
 import MkEmoji from '@/components/global/MkEmoji.vue';
 import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
+import MkFormula from "@/components/MkFormula.vue";
 import MkCode from '@/components/MkCode.vue';
 import MkGoogle from '@/components/MkGoogle.vue';
 import MkSparkle from '@/components/MkSparkle.vue';
@@ -389,12 +390,24 @@ export default function(props: MfmProps) {
 				})];
 			}
 
-			case 'mathInline': {
+			case "mathInline": {
-				return [h('code', token.props.formula)];
+				return [
+					h(MkFormula, {
+						key: Math.random(),
+						formula: token.props.formula,
+						block: false,
+					}),
+				];
 			}
 
-			case 'mathBlock': {
+			case "mathBlock": {
-				return [h('code', token.props.formula)];
+				return [
+					h(MkFormula, {
+						key: Math.random(),
+						formula: token.props.formula,
+						block: true,
+					}),
+				];
 			}
 
 			case 'search': {

pnpm-lock.yaml

@@ -753,6 +753,9 @@ importers:
       json5:
         specifier: 2.2.3
         version: 2.2.3
+      katex:
+        specifier: ^0.16.9
+        version: 0.16.9
       matter-js:
         specifier: 0.19.0
         version: 0.19.0