Support math rendering on MFM (#3260)

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>

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: {

src/mfm/html.ts

@@ -53,6 +53,12 @@ const handlers: { [key: string]: (window: any, token: any, mentionedRemoteUsers:
 		document.body.appendChild(element);
 	},
 
+	math({ document }, { formula }) {
+		const element = document.createElement('code');
+		element.textContent = formula;
+		document.body.appendChild(element);
+	},
+
 	link({ document }, { url, title }) {
 		const a = document.createElement('a');
 		a.href = url;

src/mfm/parse/elements/math.ts

@@ -0,0 +1,20 @@
+/**
+ * Math
+ */
+
+export type TextElementMath = {
+	type: 'math';
+	content: string;
+	formula: string;
+};
+
+export default function(text: string) {
+	const match = text.match(/^\$(.+?)\$/);
+	if (!match) return null;
+	const math = match[0];
+	return {
+		type: 'math',
+		content: math,
+		formula: match[1]
+	} as TextElementMath;
+}

src/mfm/parse/index.ts

@@ -8,6 +8,7 @@ import { TextElementCode } from './elements/code';
 import { TextElementEmoji } from './elements/emoji';
 import { TextElementHashtag } from './elements/hashtag';
 import { TextElementInlineCode } from './elements/inline-code';
+import { TextElementMath } from './elements/math';
 import { TextElementLink } from './elements/link';
 import { TextElementMention } from './elements/mention';
 import { TextElementQuote } from './elements/quote';
@@ -29,6 +30,7 @@ const elements = [
 	require('./elements/hashtag'),
 	require('./elements/code'),
 	require('./elements/inline-code'),
+	require('./elements/math'),
 	require('./elements/quote'),
 	require('./elements/emoji'),
 	require('./elements/search'),
@@ -42,6 +44,7 @@ export type TextElement = { type: 'text', content: string }
 	| TextElementEmoji
 	| TextElementHashtag
 	| TextElementInlineCode
+	| TextElementMath
 	| TextElementLink
 	| TextElementMention
 	| TextElementQuote