6cfb83660f
Similar to `inlineCode` and `blockCode`, MFM provides two types of formula syntax, `mathInline` and `mathBlock` (I'm curious why these aren't called `inlineMath`/`blockMath`, but oh well) Other platforms, like GitHub, **Math**todon, my blog, etc., also support these two types of formula representation, and math blocks are centered on (maybe) all such platforms.  But Calckey (Misskey v12) don't center math blocks. I'd say this is a bug, and this makes `blockMath` useless (it's just `inlineMath` in a new line).  So I fixed this.  Co-authored-by: naskya <m@naskya.net> Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9946 Co-authored-by: naskya <naskya@noreply.codeberg.org> Co-committed-by: naskya <naskya@noreply.codeberg.org>
36 lines
697 B
Vue
36 lines
697 B
Vue
<template>
|
|
<div v-if="block" v-html="compiledFormula"></div>
|
|
<span v-else v-html="compiledFormula"></span>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import katex from "katex";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
formula: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
block: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
compiledFormula(): any {
|
|
const katexString = katex.renderToString(this.formula, {
|
|
throwOnError: false,
|
|
} as any);
|
|
return this.block
|
|
? `<div style="text-align:center">${katexString}</div>`
|
|
: katexString;
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
@import "../../node_modules/katex/dist/katex.min.css";
|
|
</style>
|