Support math rendering on MFM (#3260)

2 files changed, 35 insertions, 0 deletions

diff --git a/src/client/app/common/views/components/formula.vue b/src/client/app/common/views/components/formula.vue
new file mode 100644
index 0000000000..930f16b471
--- /dev/null
+++ b/src/client/app/common/views/components/formula.vue
@@ -0,0 +1,26 @@
+<template>
+<span v-html="compiledFormula"></span>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as katex from 'katex';
+
+export default Vue.extend({
+	props: {
+		formula: {
+			type: String,
+			required: true
+		}
+	},
+	computed: {
+		compiledFormula(): any {
+			return katex.renderToString(this.formula);
+		}
+	}
+});
+</script>
+
+<style>
+@import "../../../../../../node_modules/katex/dist/katex.min.css";
+</style>
diff --git a/src/client/app/common/views/components/misskey-flavored-markdown.ts b/src/client/app/common/views/components/misskey-flavored-markdown.ts
index a985a80ecf..cbc938cf51 100644
--- a/src/client/app/common/views/components/misskey-flavored-markdown.ts
+++ b/src/client/app/common/views/components/misskey-flavored-markdown.ts
@@ -1,5 +1,6 @@
 import Vue, { VNode } from 'vue';
 import { length } from 'stringz';
+import MkFormula from './formula.vue';
 import parse from '../../../../../mfm/parse';
 import getAcct from '../../../../../misc/acct/render';
 import MkUrl from './url.vue';
@@ -199,6 +200,14 @@ export default Vue.component('misskey-flavored-markdown', {
 					})];
 				}
 
+				case 'math': {
+					return [createElement(MkFormula, {
+						props: {
+							formula: token.formula
+						}
+					})];
+				}
+
 				case 'search': {
 					return [createElement(MkGoogle, {
 						props: {