vue3中使用mathjax、markdown-it解析ai大模型返回

‌当前AI的火爆程度极高，尤其在某些新兴应用领域，如DeepSeek模型的爆火，展示了AI技术的广泛影响力和用户的高度关注‌。

使用vue3解析ai大模型返回变得尤为重要，尤其是涉及到解析数学题目之类的，最出名的无疑是mathjax,同时还需要解析markdown格式，碰到一些情况，特此写一个组件，方便使用：

1. 解析前页面RT 
2. 
3. 解析后页面RT  
4. 
5. 上代码

   1. npm install mathjax@3 markdown-it

   2. 将node_modules\mathjax\es5\tex-svg-full.js 文件复制到/public目录下，不建议CDN

   3. 在index.html文件加入以下内容，在<script type="module" src="/src/main.ts"></script>之前

      <script>
            window.MathJax = {
          tex: {
              inlineMath: [
                  ["$", "$"],
                  ["\\(", "\\)"],
              ], // 行内公式选择符
              displayMath: [
                  ["$$", "$$"],
                  ["\\[", "\\]"],
              ] // 段内公式选择符
          },
          startup: {
              ready() {
                  window.MathJax.startup.defaultReady() ;
              }
          }
      } ;
          </script>
          <script id="MathJax-script" async src="./tex-svg-full.js"></script>

   4. 新建组件 MyMarkMath.vue，如下：

      <template>
      
        <div>
      
          <br/>
      
          <div ref="mathjaxContainer" style="white-space: pre-wrap;
      
              word-break: break-all" v-html="myHtml"  :class="lineClamp==4?'myline4':''">
      
          </div>
      
          <el-button style="float: right;" type="info" @click="lineClamp=lineClamp==4?'':4" plain>{
            
            { lineClamp==4?"显示全文":"显示4行" }}</el-button><br/>
      
        </div>
      
      
      
        </template>
      
      <script lang="ts" setup>
      
      //@ts-ignore
      
      import MarkdownIt from 'markdown-it';
      
      import { nextTick, onMounted, ref } from 'vue';
      
      const props = defineProps({
      
      text: {
      
          type: String,
      
          default: '',
      
          require: true
      
      }
      
      })
      
      const myHtml=ref(props.text)
      
      const mathjaxContainer = ref();
      
      const lineClamp=ref(4)
      
      const mdi = new MarkdownIt({
      
          html: true,
      
          linkify: true,
      
          });
      
      
      
      const TypeSet = async function (elements:any=undefined) {
      
            if (!('MathJax' in window)) {
      
                return
      
            }
      
            const myMathJax:any=window.MathJax;
      
            myMathJax.startup.promise = myMathJax.startup.promise
      
                .then(() => {
      
                    return myMathJax.typesetPromise(elements)
      
                })
      
                .catch((err:any) => console.log('Typeset failed: ' + err.message))
      
            return myMathJax.startup.promise
      
        }
      
      // 处理并渲染Markdown内容
      
         
      
        onMounted(() => {
      
          nextTick(async () => {
      
             await TypeSet()
      
              myHtml.value=  mdi.render(mathjaxContainer.value.innerHTML);
      
          });
      
        });
      
        </script>
      
      
      
        <style scoped>
      
       .myline4 {
      
          display: -webkit-box;
      
          -webkit-box-orient: vertical;
      
          -webkit-line-clamp: 4;
      
          line-clamp: 4;
      
          overflow: hidden;
      
          text-overflow: ellipsis;
      
          }
      
        </style>

6. 使用方法

   
           <MyMarkMath text="这里是ai智能体返回内容"></MyMarkMath>