兴起开发博客，硬控两天两夜，做了个LaTeX的Vue3渲染小组件

契机

正在丰富我自己的博客的时候忽然灵机一动。

哎，你说我要是向博客里加入 $LaTeX \LaTeX$ LATEX 功能的支持会不会很酷

然后搜了搜 Vue 的 LaTeX 插件，却不是很尽如人意

MathJax 虽然有 Vue3 版本，但其不支持 ES6 且页面动态重渲染的调度我认为不太满足我博客的需求，而 KaTeX 原生的用法是比较复杂的

于是我寻找一些 KaTeX 的非官方插件

找到了两个：vue-katex、VaTex

其中 vue-katex 是 Vue2 版本的，直接放弃，VaTex 的作者在知乎发表过文章，看了看文章，看了看源码，还是放弃了

先说说优点：完美符合我的想法，开箱即用

html 复制代码

<vue-latex :expression="'\frac{a_i}{1+x}'" display-mode />

但是我认为的不足也有很多

不支持很多 KaTeX 官方支持的选项，比如 leqno 模式
没有做渲染上面的优化
不支持组件功能的全局调节

故下决心自己开发一个插件

成果

于是花费不到两天时间，我的 KaTeX Vue3 插件诞生了 ── Katex Vue

完全响应式，完全开箱即用，完全支持 KaTeX 原有选项配置

用法

1. 安装

bash 复制代码

pnpm add -D katex katex-vue

或使用 npm、yarn、bun 替换 pnpm 以适配您项目的包管理器

2. 使用

html 复制代码

<script setup>
  import { KatexVue } from 'katex-vue'
  const expression = "\\int_0^\\infty x^2 \\mathrm{d} x"
</script>

<template>
  <katex-vue :expression="expression" displayMode />
</template>

同样开箱即用

3. 配置

配置项

Prop	Type	Default
`expression`	String (必须值)	-
`displayMode`	Boolean	`false`
`output`	`'mathml'` / `'html'` / `'htmlAndMathml'`	`'htmlAndMathml'`
`leqno`	Boolean	`false`
`fleqn`	Boolean	`false`
`throwOnError`	Boolean	`false`
`errorColor`	String	`'#cc0000'`
`macros`	Object	-
`minRuleThickness`	Number	-
`colorIsTextColor`	Boolean	`false`
`maxSize`	Number	`Infinity`
`maxExpand`	Number	`1000`
`strict`	Boolean / `'warn'` / `'error'` / `'ignore'` / Function	`'warn'`
`trust`	Boolean	`false`
`globalGroup`	Boolean	`false`

详细请见 KaTeX 文档

可在 main.ts 中设置全局配置

ts 复制代码

import {createApp} from 'vue'
import KatexVue from 'katex-vue'

const app = createApp()
app.use(KatexVue, {
    // 在此处设置您的全局配置
    displayMode: true,
    errorColor: '#ff5500'
})
app.mount('#app')

设置组件配置

html 复制代码

<template>
  <katex-vue
      expression="\int_0^1x^2\mathrm{d}x"
      displayMode
      output="mathml"
      ...
  />
</template>

自我批评

这个插件还有很多未完成（或者说我想要完成的内容），比如：

防抖处理
渲染缓存
等等......

但是毕竟学业为主，精力不够还望谅解

最近会在周末等空闲时间对其进行进一步的开发的 QwQ

尾声

我还是一个大二在校学生，这也是第一次对前端开源社区做了自己的一点微不足道的贡献，同时不懂的地方也有很多，如果有任何问题欢迎来讨论，有什么使用起来不爽的随意喷我

github issue pr 尽管提

以及可以来看一下个人博客捏~