merge: KaTeX support (#261)

Closes #174

4 files changed, 55 insertions, 3 deletions

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 275a6ad025..b46663aca1 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.9",
 		"matter-js": "0.19.0",
 		"misskey-js": "workspace:*",
 		"photoswipe": "5.4.3",
diff --git a/packages/frontend/src/components/MkFormula.vue b/packages/frontend/src/components/MkFormula.vue
new file mode 100644
index 0000000000..039cef8da8
--- /dev/null
+++ b/packages/frontend/src/components/MkFormula.vue
@@ -0,0 +1,33 @@
+<!--
+SPDX-FileCopyrightText: dakkar, MoshiBar, and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+	<div v-if="block" :class="$style.block" v-html="renderedFormula"></div>
+	<span v-else v-html="renderedFormula"></span>
+</template>
+
+<script lang="ts" setup>
+	import { computed } from 'vue';
+	import katex from 'katex';
+	import 'katex/dist/katex.min.css';
+
+	const props = defineProps<{
+		formula: string;
+		block: boolean;
+	}>();
+
+	const renderedFormula = computed(() =>
+		katex.renderToString(props.formula, {
+			throwOnError: false,
+			trust: false,
+			displayMode: props.block,
+		} as any));
+</script>
+
+<style lang="scss" module>
+	.block {
+		text-align: center;
+	}
+</style>
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
index 60d12fdcde..83b7ef2e78 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { VNode, h } from 'vue';
+import { VNode, h, defineAsyncComponent } from 'vue';
 import * as mfm from '@sharkey/sfm-js';
 import * as Misskey from 'misskey-js';
 import MkUrl from '@/components/global/MkUrl.vue';
@@ -61,6 +61,8 @@ export default function(props: MfmProps) {
 
 	const useAnim = defaultStore.state.advancedMfm && defaultStore.state.animatedMfm ? true : props.isAnim ? true : false;
 
+	const MkFormula = defineAsyncComponent(() => import('@/components/MkFormula.vue'));
+
 	/**
 	 * Gen Vue Elements from MFM AST
 	 * @param ast MFM AST
@@ -410,11 +412,17 @@ export default function(props: MfmProps) {
 			}
 
 			case 'mathInline': {
-				return [h('code', token.props.formula)];
+				return [h(MkFormula, {
+					formula: token.props.formula,
+					block: false,
+				})];
 			}
 
 			case 'mathBlock': {
-				return [h('code', token.props.formula)];
+				return [h(MkFormula, {
+					formula: token.props.formula,
+					block: true,
+				})];
 			}
 
 			case 'search': {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ec05ad3485..c4c51bca2a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -756,6 +756,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
@@ -14554,6 +14557,13 @@ packages:
       safe-buffer: 5.2.1
     dev: false
 
+  /katex@0.16.9:
+    resolution: {integrity: sha512-fsSYjWS0EEOwvy81j3vRA8TEAhQhKiqO+FQaKWp0m39qwOzHVBgAUBIXWj1pB+O2W3fIpNa6Y9KSKCVbfPhyAQ==}
+    hasBin: true
+    dependencies:
+      commander: 9.5.0
+    dev: false
+
   /keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
     dependencies: