MathJax

--- theme: qklhk-chocolate --- # 前言最近遇到一个需求,需要在网页上展示如下数学公式 ![597. LaTeX技巧60：如何改变数学公式字体的颜色 - LaTeX工作室](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/06c73283eeaf4002b7ec187305eb6787~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR5b-D55qu6JuL:q75.awebp?rk3s=f64ab15b&x-expires=1772913066&x-signature=CfoIsgKNKyyO2%2BsrEgoM09nEBSo%3D) 经过一番查阅,思路如下: 1. 通过`ocr`将对应的公式图片识别成`latex`公式 2. 使用`MathJax`去渲染对应的`latex`公式思路明确,直接开干 ![开干开干的图像结果](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/246248427f8e4cdba456ffb301c1bbda~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR5b-D55qu6JuL:q75.awebp?rk3s=f64ab15b&x-expires=1772913066&x-signature=rEFAlh2tND8xOKRA5rHFuIcw57k%3D) # 相关概念 ## 什么是Latex? `latex`是一种标记语言,我们不需要了解太多,只需要知道,它可以排版数学公式,可以把数学公式转化为`latex`语法. 通过一些开源的`js`库,就可以将复杂数学公式渲染到前端页面上 ## MathJax `MathJax `是一个开源的 `JavaScript `库,可以解析`LaTeX`、`MathML `和 `AsciiMath `格式的数学表达式有了上面两大神器,我们的需求就很好做了 ## OCR工具因为我的公式需求不多,所以直接手动用OCR工具去转换了 * 公式识别工具:[公式识别 (simpletex.cn)](https://simpletex.cn/ai/latex_ocr) # 相关依赖库 * `MathJax` 这个库用`npm`去直接安装会有一些奇奇怪怪的问题,最终还是采用`cdn`引入的方式. * `cdn地址`: 直接引入到`index.html`里面就可以如果怕`cdn`不稳定,也可以直接下载下来,保存到`public`文件夹里面再引入 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d153fe63f0504b72aba6d69b25c44953~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR5b-D55qu6JuL:q75.awebp?rk3s=f64ab15b&x-expires=1772913066&x-signature=U2C5%2FbrL870v72IaFE1VfjLsWOU%3D) 想要判断是否引入成功的话,只需要在控制台打印`window.MathJax`有挂载上去就是引入了 # 使用方式 ## 初始化配置在使用之前需要初始化`MathJax`的配置 ```js window.MathJax.Hub.Config({ extensions: ['tex2jax.js'], jax: ['input/TeX', 'output/HTML-CSS'], showMathMenu: false, tex2jax: { inlineMath: [ ['$', '$'], ['\$', '\$'], ], displayMath: [ ['$$', '$$'], ['\\[', '\\]'], ], processEscapes: true, }, 'HTML-CSS': { availableFonts: ['TeX'] }, }) ``` 1. `extensions`: 数组，指定MathJax需要加载的扩展文件。这里加载的是`tex2jax.js`，这是一个将TeX格式转换为MathJax能够识别的格式的扩展。 2. `jax`: 数组，指定MathJax处理数学公式的输入和输出格式。`input/TeX`表示输入格式是TeX，`output/HTML-CSS`表示输出格式是HTML-CSS，即MathJax将使用CSS来渲染数学公式。 3. `showMathMenu`: 布尔值，设置是否显示数学公式的上下文菜单。这里设置为`false`，即不显示。 4. `tex2jax`: 对象，包含了`tex2jax`扩展的配置项： * `inlineMath`: 数组，定义了行内数学公式的界定符。这里定义了两种界定符：美元符号`$...$`和反斜杠加括号`$... $`。 * `displayMath`: 数组，定义了显示数学公式（即独占一行的数学公式）的界定符。这里定义了两种界定符：双美元符号`$$...$$`和反斜杠加双括号`\[...\]`。 * `processEscapes`: 布尔值，设置是否处理转义字符。如果为`true`，MathJax会处理如`\`和`$`等特殊字符的转义。 5. `'HTML-CSS'`: 对象，配置HTML-CSS输出的一些选项。`availableFonts`数组指定了可用的字体。这里指定为`['TeX']`，即使用TeX字体。更详细的配置可以去官网上面看:[配置 MathJax — MathJax 3.2 文档](https://docs.mathjax.org/en/latest/options/index.html) 或者官方的`github`也会有一些例子 ## 渲染公式在一开始加载这个`mathjax`的时候他就会对网页上的公式进行一次渲染.但是我们在大多数情况下是需要动态渲染的,比如我只需要某一块内容渲染,或者某一时刻渲染. 这时候就需要用到他的`api` * `window.MathJax.Hub.Queue` 这个方法可以排队执行一些操作,比如`排版`、`加载JS文件`、`动态配置`,我们只需要第一个排版. ### 全局渲染 ```js window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub]) ``` * **Typeset**: 重新排版文档或指定的元素中的数学公式。 * `window.MathJax.Hub` :传不传都可以,默认会用这个作为上下文 ![渲染全部.webp](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e4844d826a0046cfa14fd34c61a565a2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR5b-D55qu6JuL:q75.awebp?rk3s=f64ab15b&x-expires=1772913066&x-signature=f7cyOLlHm56k3wIHfwEnAB53sSU%3D) ### 局部渲染 ```vue window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, leftLatex.value]) ``` 前面的参数不变,最后第三个参数传要渲染的那个`DOM`的参数 ![只渲染左边.webp](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/50ec6a2a81ca4f68884ff73461f036f1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR5b-D55qu6JuL:q75.awebp?rk3s=f64ab15b&x-expires=1772913066&x-signature=YeV3IiT9sEyV4pb1%2BVqN9T87BuM%3D) # 完整代码 ## 依赖引入 ```html MathJax

``` ## 实现代码 ```vue ``` # 遇到的问题如果出现,有些符号无法渲染,需要检查一下是不是需要转义 ```js const latexStr2 = ref('$$\\int_a^bf(x)dx=c$$') ``` 比如这个公式,如果上面的公式变成 ```js const latexStr2 = ref('$$\int_a^bf(x)dx=c$$') ``` 就会导致 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/faa4daf6a840427e9860525c544f8e5b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR5b-D55qu6JuL:q75.awebp?rk3s=f64ab15b&x-expires=1772913066&x-signature=bSLo%2BOy3MXg%2FtYDZ0c4YdlZvGUk%3D)这个符号渲染不出来