Merge pull request misskey-dev#2 from kemomimi-no-sato/KaTeX

KaTeXの再実装

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.8",
 		"matter-js": "0.19.0",
 		"mfm-js": "0.23.3",
 		"misskey-js": "workspace:*",
@@ -100,6 +101,7 @@
 		"@types/escape-regexp": "0.0.3",
 		"@types/estree": "1.0.5",
 		"@types/matter-js": "0.19.5",
+		"@types/katex": "0.16.3",
 		"@types/micromatch": "4.0.6",
 		"@types/node": "20.10.3",
 		"@types/punycode": "2.1.3",

packages/frontend/src/components/MkFomula.vue

@@ -0,0 +1,17 @@
+<template>
+<MkFormulaCore :formula="formula" :block="block"/>
+</template>
+
+<script lang="ts" setup>
+import MkFormulaCore from './MkFormulaCore.vue';
+defineProps({
+	formula: {
+		type: String,
+		required: true,
+	},
+	block: {
+		type: Boolean,
+		required: true,
+	},
+});
+</script>

packages/frontend/src/components/MkFormulaCore.vue

@@ -0,0 +1,30 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+<div v-if="block" v-html="compiledFormula"></div>
+<span v-else v-html="compiledFormula"></span>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import katex from 'katex';
+const props = defineProps({
+	formula: {
+		type: String,
+		required: true,
+	},
+	block: {
+		type: Boolean,
+		required: true,
+	},
+});
+const compiledFormula = computed(() =>
+	katex.renderToString(props.formula, {
+		throwOnError: false,
+		strict: false,
+	}),
+);
+</script>
+
+<style>
+@import "../../node_modules/katex/dist/katex.min.css";
+</style>

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

@@ -395,11 +395,19 @@ export default function(props: MfmProps) {
 			}
 
 			case 'mathInline': {
-				return [h('code', token.props.formula)];
+				return [h(MkFormula, {
+					key: Math.random(),
+					formula: token.props.formula,
+					block: false,
+				})];
 			}
 
 			case 'mathBlock': {
-				return [h('code', token.props.formula)];
+				return [h(MkFormula, {
+					key: Math.random(),
+					formula: token.props.formula,
+					block: true,
+				})];
 			}
 
 			case 'search': {