From a7ab6f595cf69cd27027cc71afba88207702f47d Mon Sep 17 00:00:00 2001
From: HanasakiNayori <hibariruri@gmail.com>
Date: Thu, 7 Dec 2023 19:45:37 +0900
Subject: [PATCH] =?UTF-8?q?KaTeX=E3=81=AE=E5=86=8D=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/package.json                |  2 ++
 packages/frontend/src/components/MkFomula.vue | 17 +++++++++++
 .../frontend/src/components/MkFormulaCore.vue | 30 +++++++++++++++++++
 .../global/MkMisskeyFlavoredMarkdown.ts       | 12 ++++++--
 pnpm-lock.yaml                                | 17 +++++++++++
 5 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 packages/frontend/src/components/MkFomula.vue
 create mode 100644 packages/frontend/src/components/MkFormulaCore.vue

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 4f3b74649a8d..93fdd9b40ab9 100644
--- a/packages/frontend/package.json
+++ b/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",
diff --git a/packages/frontend/src/components/MkFomula.vue b/packages/frontend/src/components/MkFomula.vue
new file mode 100644
index 000000000000..5a0045d54246
--- /dev/null
+++ b/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>
diff --git a/packages/frontend/src/components/MkFormulaCore.vue b/packages/frontend/src/components/MkFormulaCore.vue
new file mode 100644
index 000000000000..f07177c13381
--- /dev/null
+++ b/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>
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
index fe599dceadb7..7378191e1aec 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
+++ b/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': {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ea1ea6cd18c1..51b691e9c612 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -754,6 +754,9 @@ importers:
       json5:
         specifier: 2.2.3
         version: 2.2.3
+      katex:
+        specifier: 0.16.8
+        version: 0.16.8
       matter-js:
         specifier: 0.19.0
         version: 0.19.0
@@ -893,6 +896,9 @@ importers:
       '@types/estree':
         specifier: 1.0.5
         version: 1.0.5
+      '@types/katex':
+        specifier: 0.16.3
+        version: 0.16.3
       '@types/matter-js':
         specifier: 0.19.5
         version: 0.19.5
@@ -8021,6 +8027,10 @@ packages:
     resolution: {integrity: sha512-sOA+eVnHU+FziThpMhuqs/tjFKe5gHVJKIS7g1BzhXP+e2FS8OvtzM0K3IzFxVksDOr98Gz5FJiZVxZ9uFoHhw==}
     dev: true
 
+  /@types/katex@0.16.3:
+  resolution: {integrity: sha512-CeVMX9EhVUW8MWnei05eIRks4D5Wscw/W9Byz1s3PA+yJvcdvq9SaDjiUKvRvEgjpdTyJMjQA43ae4KTwsvOPg==}
+  dev: true
+
   /@types/keyv@3.1.4:
     resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
     dependencies:
@@ -14493,6 +14503,13 @@ packages:
       safe-buffer: 5.2.1
     dev: false
 
+  /katex@0.16.8:
+    resolution: {integrity: sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==}
+    hasBin: true
+    dependencies:
+      commander: 8.3.0
+    dev: false
+
   /keyv@4.5.2:
     resolution: {integrity: sha512-5MHbFaKn8cNSmVW7BYnijeAVlE4cYA/SVkifVgrh7yotnfhKmjuXpDKjrABLnT0SfHWV21P8ow07OGfRrNDg8g==}
     dependencies: