解决方案
<template>
<span ref="latex" class="katex" v-html="rawHTML" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Latex',
})
</script>
<script lang="ts" setup>
import katex from 'katex'
import 'katex/dist/katex.css'
import { computed, useSlots } from 'vue'
const rawHTML = computed(() => {
console.log(useSlots().default?.())
return katex.renderToString(useSlots().default?.()[0].children, {
throwOnError: false,
})
})
</script>
<style scoped></style>
Demo
<latex>\pm\sqrt{a^2 + b^2}</latex>
参考文章
- https://katex.org/docs/api.html
- vue katex_在Vue应用中使用KaTeX的简单指令
- 在Vue脚手架中使用KaTeX渲染公式
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
