hippofish/packages/client/src/components/MkFormulaCore.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>