vue3中使用markdown并且显示公式

vue3中使用markdown并且显示公式

最终效果如图

 

 

下面是代码

1.先安装依赖包

npm  install  markdown-it  mathjax

2.src下面创建文件utils/mathjax.js，文件内容如下

window.MathJax = {
    tex: {
        inlineMath: [
            ["$", "$"],
            ["\\(", "\\)"],
            ["\(", "\)"],
        ], // 行内公式选择符
        displayMath: [
            ["$$", "$$"],
            ["\\[", "\\]"],
        ], // 段内公式选择符
    },
    startup: {
        ready() {
            MathJax.startup.defaultReady();
        },
    },
};

 

3.main.js

import "@/utils/mathjax";
import "mathjax/es5/tex-svg"; 

4.页面代码

<template>
  <div>
    <!-- 输入框，用于实时更新Markdown文本 -->
    <textarea v-model="text" rows="10" cols="50" placeholder="输入Markdown内容"></textarea>

    <!-- 显示渲染的Markdown内容 -->
    <div style="width: 500px; overflow: auto; margin-top: 20px;">
      <div v-html="renderedMarkdown"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import MarkdownIt from 'markdown-it';

// Markdown 内容
const text = ref(``);

const mdi = new MarkdownIt({
  html: false,
  linkify: true,
});

// 处理并渲染Markdown内容
const renderedMarkdown = computed(() => {
  window.MathJax.startup.defaultReady();
  return mdi.render(text.value);
  
});
</script>

<style scoped>
textarea {
  width: 500px;
  height: 200px;
}
</style>