2018-11-16 09:31:25 +00:00
|
|
|
<template>
|
2023-04-08 00:01:42 +00:00
|
|
|
<div v-if="block" v-html="compiledFormula"></div>
|
|
|
|
<span v-else v-html="compiledFormula"></span>
|
2018-11-16 09:31:25 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2023-04-08 00:01:42 +00:00
|
|
|
import { defineComponent } from "vue";
|
|
|
|
import katex from "katex";
|
2020-10-17 11:12:00 +00:00
|
|
|
|
|
|
|
export default defineComponent({
|
2018-11-16 09:31:25 +00:00
|
|
|
props: {
|
|
|
|
formula: {
|
|
|
|
type: String,
|
2023-04-08 00:01:42 +00:00
|
|
|
required: true,
|
2019-01-25 14:08:06 +00:00
|
|
|
},
|
|
|
|
block: {
|
|
|
|
type: Boolean,
|
2023-04-08 00:01:42 +00:00
|
|
|
required: true,
|
|
|
|
},
|
2018-11-16 09:31:25 +00:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
compiledFormula(): any {
|
2018-12-27 12:07:44 +00:00
|
|
|
return katex.renderToString(this.formula, {
|
2023-04-08 00:01:42 +00:00
|
|
|
throwOnError: false,
|
2018-12-27 12:07:44 +00:00
|
|
|
} as any);
|
2023-04-08 00:01:42 +00:00
|
|
|
},
|
|
|
|
},
|
2018-11-16 09:31:25 +00:00
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
2021-11-11 17:02:25 +00:00
|
|
|
@import "../../node_modules/katex/dist/katex.min.css";
|
2018-11-16 09:31:25 +00:00
|
|
|
</style>
|