Add multiline math syntax

Co-authored-by: syuilo <syuilotan@yahoo.co.jp>

3 files changed, 25 insertions, 4 deletions

diff --git a/src/client/app/common/views/components/formula-core.vue b/src/client/app/common/views/components/formula-core.vue
index 254e0df308..69697d6df0 100644
--- a/src/client/app/common/views/components/formula-core.vue
+++ b/src/client/app/common/views/components/formula-core.vue
@@ -1,5 +1,6 @@
 <template>
-<span v-html="compiledFormula"></span>
+<div v-if="block" v-html="compiledFormula"></div>
+<span v-else v-html="compiledFormula"></span>
 </template>
 
 <script lang="ts">
@@ -11,6 +12,10 @@ export default Vue.extend({
 		formula: {
 			type: String,
 			required: true
+		},
+		block: {
+			type: Boolean,
+			required: true
 		}
 	},
 	computed: {
diff --git a/src/client/app/common/views/components/formula.vue b/src/client/app/common/views/components/formula.vue
index 02ed96daac..73572b72c6 100644
--- a/src/client/app/common/views/components/formula.vue
+++ b/src/client/app/common/views/components/formula.vue
@@ -1,5 +1,5 @@
 <template>
-<x-formula :formula="formula"/>
+<x-formula :formula="formula" :block="block" />
 </template>
 
 <script lang="ts">
@@ -14,6 +14,10 @@ export default Vue.extend({
 		formula: {
 			type: String,
 			required: true
+		},
+		block: {
+			type: Boolean,
+			required: true
 		}
 	}
 });
diff --git a/src/client/app/common/views/components/mfm.ts b/src/client/app/common/views/components/mfm.ts
index ad3d8204cc..7a875dc2b0 100644
--- a/src/client/app/common/views/components/mfm.ts
+++ b/src/client/app/common/views/components/mfm.ts
@@ -228,12 +228,24 @@ export default Vue.component('misskey-flavored-markdown', {
 					})];
 				}
 
-				case 'math': {
+				case 'mathInline': {
 					//const MkFormula = () => import('./formula.vue').then(m => m.default);
 					return [createElement(MkFormula, {
 						key: Math.random(),
 						props: {
-							formula: token.node.props.formula
+							formula: token.node.props.formula,
+							block: false
+						}
+					})];
+				}
+
+				case 'mathBlock': {
+					//const MkFormula = () => import('./formula.vue').then(m => m.default);
+					return [createElement(MkFormula, {
+						key: Math.random(),
+						props: {
+							formula: token.node.props.formula,
+							block: true
 						}
 					})];
 				}