2018-11-16 17:03:52 +09:00
|
|
|
<template>
|
|
|
|
<span v-html="compiledFormula"></span>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import Vue from 'vue';
|
|
|
|
|
|
|
|
export default Vue.extend({
|
|
|
|
props: {
|
|
|
|
formula: {
|
|
|
|
type: String,
|
|
|
|
required: true
|
|
|
|
}
|
|
|
|
},
|
2018-11-16 18:22:44 +09:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
compiledFormula: null
|
|
|
|
};
|
|
|
|
},
|
|
|
|
async created() {
|
|
|
|
const katex = await import('katex').then(m => m.default);
|
|
|
|
this.compiledFormula = katex.renderToString(this.formula);
|
2018-11-16 17:03:52 +09:00
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
@import "../../../../../../node_modules/katex/dist/katex.min.css";
|
|
|
|
</style>
|