Vue——整合Katex
Posted Starzkg
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue——整合Katex相关的知识，希望对你有一定的参考价值。
解决方案
<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\\sqrta^2 + b^2</latex>
参考文章
- https://katex.org/docs/api.html
- vue katex_在Vue应用中使用KaTeX的简单指令
- 在Vue脚手架中使用KaTeX渲染公式
以上是关于Vue——整合Katex的主要内容，如果未能解决你的问题，请参考以下文章