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\sqrt{a^2 + b^2}</latex>

参考文章

https://katex.org/docs/api.html
vue katex_在Vue应用中使用KaTeX的简单指令
在Vue脚手架中使用KaTeX渲染公式

Vue——整合Katex相关推荐

【小项目】Vue 整合 Axios
Vue 整合 Axios 文章目录 Vue 整合 Axios 一.需求说明二.数据库三.前端四.后端 1.StudentTableService.java 2.StudentTableContr ...
Vue整合nginx：（1）开发环境npm run dev下，通过nginx解决前后端分离造成的跨域问题
Vue整合nginx:(1)开发环境npm run dev下,通过nginx解决前后端分离造成的跨域问题参考文章: (1)Vue整合nginx:(1)开发环境npm run dev下,通过nginx ...
springboot+Vue整合Luckysheet，实现在线编辑Excel表格
springboot+Vue整合Luckysheet,实现在线编辑Excel表格功能:页面嵌入Luckysheet表格组件,能够在线编辑Excel表格,实现表格的读取,保存功能(不支持导出为xls文 ...
Vue整合ElementUI
文章目录 Vue整合ElementUI 下载喝配置ElementUI 使用ElementUI 美化我们的ElementUI 实现路由跳转 Vue整合ElementUI 下载喝配置ElementUI 首 ...
vue整合百度地图（关键字检索）
百度地图文章目录百度地图一.申请百度地图的密钥二.官方示例三.使用vue整合百度地图步骤说明 3.1 效果图: 3.2 方式一 vue脚手架2.0版本引用(不推荐): 3.3 方式二封装成 ...
视频教程-springboot+Vue整合前后端分离权限后台管理系统-Java
springboot+Vue整合前后端分离权限后台管理系统拥有八年的Java项目开发经验,擅长Java.vue.SpringBoot.springCloud.spring.springmvc.myb ...
SpringBoot+Vue整合支付宝沙箱支付
SpringBoot+Vue2整合实现支付宝沙箱支付原创不易,转载请注明!!原创不易,转载请注明!!原创不易,转载请注明!!原创不易,转载请注明!!原创不易,转载请注明!! 在进行电脑网站开发时我们 ...
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目源码(欢迎star): 前端项目代码后端项目代码系列文章: Vue整合SpringBoot项目实战之后端业务处理 ...
Vue整合ElementUI，组件使用教程，适合新手
官网:Element 文章目录 Vue整合ElementUI 一. 按钮组件二. Link 文件链接组件三. Layout(栅格) 布局组件的使用四. Container 布局容器五. Rad ...

Vue——整合Katex

解决方案

Demo

参考文章

Vue——整合Katex相关推荐

最新文章

热门文章