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

茵符草
599 阅读2分钟

契机

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

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

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

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

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

找到了两个：vue-katex、VaTex

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

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

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

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

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

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

成果

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

image.png

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

用法

1. 安装

pnpm add -D katex katex-vue

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

2. 使用

<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. 配置

配置项

PropTypeDefault
expressionString (必须值)-
displayModeBooleanfalse
output'mathml' / 'html' / 'htmlAndMathml''htmlAndMathml'
leqnoBooleanfalse
fleqnBooleanfalse
throwOnErrorBooleanfalse
errorColorString'#cc0000'
macrosObject-
minRuleThicknessNumber-
colorIsTextColorBooleanfalse
maxSizeNumberInfinity
maxExpandNumber1000
strictBoolean / 'warn' / 'error' / 'ignore' / Function'warn'
trustBooleanfalse
globalGroupBooleanfalse

详细请见 KaTeX 文档

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

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

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

设置组件配置

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

自我批评

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

  • 防抖处理
  • 渲染缓存
  • 等等……

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

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

尾声

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

github issue pr 尽管提

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

avatar
文章
阅读
粉丝