思考
最近用chatGPT API的时候，涉及到输出数学函数公式这一part。 然后在进行测试的时候，发现 输出数学公式的格式是以下这样子：
//二次方程求根公式
$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$
然后，我测试了一下可以免费使用的星火大模型，它上面输出的数学公式是正常显示的：
既然代码都有"互通性"，而且星火大模型能正常显示的话，说明chatGPT也可以。
我用星火大模型进行提问：
事不宜迟，我在百度上了找到了latex转换器。（）
了解到这里，也差不多该百度一下解决方案了，看了latex转换器，应该是存在一段代码或者一个库能够解决这个问题的。既然在vue，那么我的搜索词自然 也会有 vue latex数学公式转换 类似的字眼。
搜索结果：
上面博主写的vue版本正好与我目前使用的vue版本对应，都是用的vue2，vue3我暂时还未使用（以后再说，正当是活在自己的舒适圈里出不来了都，喜欢追求最新技术的人还是去学习vue3吧，哭了=.=）。
知识点1 - < pre >
< pre > 为 html预定义格式文本。一般来说：
<div>
q
q
</div>
输出：
<pre>
q q
q q
</pre>
输出：
q q q q
对比一下结果，就是说在< pre >包围中，它的换行以及空格是保留的，与原来的代码格式一样。
官方说法：在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。（ ）
在阅读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格式的数学公式。
//官方的例子
delimiters: [
//指的是把 以 $$ 为开头和以 $$ 为结尾的内容转换为数学公式
{left: '$$', right: '$$', display: true},
//指的是把 以 $ 为开头和以 $ 为结尾的内容转换为数学公式
{left: '$', right: '$', display: false},
//指的是把 以 \\( 为开头和以 \\) 为结尾的内容转换为数学公式
{left: '\\(', right: '\\)', display: false},
指的是把 以 \\[ 为开头和以 \\] 为结尾的内容转换为数学公式
{left: '\\[', right: '\\]', display: true}
],
display为true时，会把公式占一整行居中显示（类似块级元素div）；
反之，则还是在与文本同一行（类似行内元素span）。
2 - 其他后续补充 -end
使用
在vue中的使用方式在这个链接中：
安装
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>
输出：
好了，学习此内容就告一段落了，只是学习了冰山一角，还是觉得以后有机会把文档中的使用方式读懂一点吧。
see you ！