Support math rendering on MFM (#3260)

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