本文已参与「新人创作礼」活动，一起开启掘金创作之路。
背景
opencv文档中有很多公式，是用MathJax渲染的。因此将这个渲染功能集成到我的开源项目RxImg中。集成过程中趟了一些坑，记录一下。
vue-mathjax库
已经有Vue版本的mathjax库，其中Vue2版本的是vue-mathjax，Vue3版本的是vue-mathjax-next。
集成的步骤主要是这些：
npm安装
npm i vue-mathjax-next
main.js中导入
import { createApp } from 'vue'
import VueMathjax from 'vue-mathjax-next';
import App from './App.vue'
const app = createApp(App)
app.use(VueMathjax)
app.mount('#app')
CDN引用
这里还有个非常重要的是还需要引用mathjax的CDN。
在index.html中添加
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js" type="text/javascript"></script>
看了看看vue-mathjax的源码，其实做的事情不复杂，主要就是将mathjax挂载到上下文变量window上了。挂载时候配置MathJax.Hub.Config。用MathJax.Hub.Queue更新dom。
OpenCV中的tex宏
OpenCV的文档里除了Tex里常用的语法，还定义了一些宏，比如vecthreethree这样的，可以通过TexCommands查看到。
这些宏本身在OpencvDoc的html源码里也看得到。
有这么一些：
matTT: [ "\[ \left|\begin{array}{ccc} #1 & #2 & #3\\ #4 & #5 & #6\\ #7 & #8 & #9 \end{array}\right| \]", 9],
fork: ["\left\{ \begin{array}{l l} #1 & \mbox{#2}\\ #3 & \mbox{#4}\\ \end{array} \right.", 4],
forkthree: ["\left\{ \begin{array}{l l} #1 & \mbox{#2}\\ #3 & \mbox{#4}\\ #5 & \mbox{#6}\\ \end{array} \right.", 6],
forkfour: ["\left\{ \begin{array}{l l} #1 & \mbox{#2}\\ #3 & \mbox{#4}\\ #5 & \mbox{#6}\\ #7 & \mbox{#8}\\ \end{array} \right.", 8],
vecthree: ["\begin{bmatrix} #1\\ #2\\ #3 \end{bmatrix}", 3],
vecthreethree: ["\begin{bmatrix} #1 & #2 & #3\\ #4 & #5 & #6\\ #7 & #8 & #9 \end{bmatrix}", 9],
cameramatrix: ["#1 = \begin{bmatrix} f_x & 0 & c_x\\ 0 & f_y & c_y\\ 0 & 0 & 1 \end{bmatrix}", 1],
distcoeffs: ["(k_1, k_2, p_1, p_2[, k_3[, k_4, k_5, k_6 [, s_1, s_2, s_3, s_4[, \tau_x, \tau_y]]]]) \text{ of 4, 5, 8, 12 or 14 elements}"],
distcoeffsfisheye: ["(k_1, k_2, k_3, k_4)"],
hdotsfor: ["\dots", 1],
mathbbm: ["\mathbb{#1}", 1],
bordermatrix: ["\matrix{#1}", 1]
将这些宏在index.js的script里添加到MathJax.Hub.Config中。
最后的效果
可以看到行内的公式和独占一行的公式都能正常渲染。
