vue - 解决 ai输出 latex格式公式 问题

思考

最近用chatGPT API的时候，涉及到输出数学函数公式这一part。 然后在进行测试的时候，发现 输出数学公式的格式是以下这样子：

//二次方程求根公式
$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$

然后，我测试了一下可以免费使用的星火大模型，它上面输出的数学公式是正常显示的：

既然代码都有"互通性"，而且星火大模型能正常显示的话，说明chatGPT也可以。

我用星火大模型进行提问：

事不宜迟，我在百度上了找到了latex转换器。（在线LaTeX公式编辑器-编辑器 (latexlive.com)）

了解到这里，也差不多该百度一下解决方案了，看了latex转换器，应该是存在一段代码或者一个库能够解决这个问题的。既然在vue，那么我的搜索词自然 也会有 vue latex数学公式转换 类似的字眼。

搜索结果：vue使用Katex渲染数学公式 - 简书 (jianshu.com)

上面博主写的vue版本正好与我目前使用的vue版本对应，都是用的vue2，vue3我暂时还未使用（以后再说，正当是活在自己的舒适圈里出不来了都，喜欢追求最新技术的人还是去学习vue3吧，哭了=.=）。

KaTeX – The fastest math typesetting library for the web

知识点1 - < pre >

< pre > 为 html预定义格式文本。一般来说：

<div> 
q
q
</div>

输出：

<pre>
q      q
q  q     
</pre>

输出：

q      q
q  q     

对比一下结果，就是说在< pre >包围中，它的换行以及空格是保留的，与原来的代码格式一样。

官方说法：在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。（ < pre > - HTML（超文本标记语言） | MDN (mozilla.org) ）

在阅读katex文档的时候，我一眼就相中了auto-render extension字眼（自动渲染扩展）,看了它的官方说明，很符合我现在遇到的问题。

知识点2 - Auto-render Extension 自动渲染扩展 API

它主要是能够在一段文本中自动识别 latex格式 的公式并且渲染出它，再把它放到原位中。（它还说明除了< pre > 这样的标签之外（其实还有其他标签，官方有说明："script", "noscript", "style", "textarea", "pre", "code", "option"）==破案了把，这就是为什么我先学知识点1）

它把自动渲染公式的扩展封装成一个函数：

function renderMathInElement(elem, options)

elem：你想要自动渲染的html元素块。

options：传递给katex.render函数的可选对象参数，其中有五个特定的对象：

1 - delimiters 界定符

$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$

在我用ai输出数学公式中，它输出的数学公式就是以$开头，再以它结束的。因此，定义界定符也是这个意思，就是希望能通过该delimiters，找到文本中匹配项来进行渲染成非latex格式的数学公式。

x=−b±b2−4ac2ax=\frac{-b\pm\sqrt{b^2-4ac}}{2a}x=2a−b±b2−4ac​​

//官方的例子
delimiters: [
//指的是把 以 $$ 为开头和以 $$ 为结尾的内容转换为数学公式
{left: '$$', right: '$$', display: true},
//指的是把 以 $ 为开头和以 $ 为结尾的内容转换为数学公式
{left: '$', right: '$', display: false},
//指的是把 以 \\( 为开头和以 \\) 为结尾的内容转换为数学公式
{left: '\\(', right: '\\)', display: false},
指的是把 以 \\[ 为开头和以 \\] 为结尾的内容转换为数学公式
{left: '\\[', right: '\\]', display: true} 
],

display为true时，会把公式占一整行居中显示（类似块级元素div）；

反之，则还是在与文本同一行（类似行内元素span）。

2 - 其他后续补充 -end

使用

在vue中的使用方式在这个链接中： Auto-render Extension · KaTeX

安装

npm i vue-katex katex -P

在main.js配置

import Vue from 'vue'
import App from './App.vue'
//记得把样式也一起引入进来
import VueKatex from 'vue-katex'
import 'katex/dist/katex.min.css';


Vue.config.productionTip = false

Vue.use(ElementUI);
//因为我生成的是以 $ 开头结束的，所以在里面定义了界定符；注意一点：如果不在里面定义好，可能不会渲染，因为我就是这样。
Vue.use(VueKatex, {
  globalOptions: {
         //定义好界定符，好让它能够找到渲染的latex公式块
	  delimiters: [
	                {left: '$$', right: '$$', display: true},
	                {left: '$', right: '$', display: false},
	                {left: '\\(', right: '\\)', display: false},
	                {left: '\\[', right: '\\]', display: true}
	            ],
    //... Define globally applied KaTeX options here
  }
});


new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

在component中使用它

<template>
<div>
//定义自动渲染
<div v-katex:auto>
  (\frac{a_i}{1+x})
  $x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$
</div>
</div>
<template>

输出：

ai1+x\frac{a_i}{1+x}1+xai​​ x=−b±b2−4ac2ax=\frac{-b\pm\sqrt{b^2-4ac}}{2a}x=2a−b±b2−4ac​​

好了，学习此内容就告一段落了，只是学习了冰山一角，还是觉得以后有机会把lucpotage/vue-katex: Vue plugin for KaTeX (github.com)文档中的使用方式读懂一点吧。

see you ！