vue3内嵌Markdown编辑，并采用showdown展示，支持数学公式展示

vue3内嵌Markdown编辑，并采用showdown展示，支持数学公式展示##

采用vditor Markdown语法编辑器，showdown做语法渲染，showdown-katex展示katex数学公式，废话不多说直接上代码。
官网参考：
showdown
showdown-katex
vditor
KaTeX数学公式语法
所需插件：

yarn add vditor
yarn add showdown
yarn add showdown-katex

Markdown编辑器

<template>
  <div id="vditor"></div>
</template>
<script setup>
import { defineProps, ref, onMounted } from "vue";
import Vditor from "vditor";
import "vditor/dist/index.css";
const contentEditor = ref("");
onMounted(() => {
  contentEditor.value = new Vditor("vditor", {
    height: 360,
    toolbarConfig: {
      pin: true,
    },
    cache: {
      enable: false,
    },
    after: () => {
      contentEditor.value.setValue("hello,Vditor+Vue!");
    },
  });
});
</script>
<style scoped>
a {
  color: #42b983;
}
</style>

showdown展示

<template>
  <div v-html="transformMsg(props.value)" class="markdown-viewer"></div>
</template>
<script lang="ts" setup>
  import showdown from 'showdown';
  import showdownKatex from 'showdown-katex';
  const props = defineProps({
    value: { type: String },
    class: { type: String },
  });

  function transformMsg(msgInfo = '') {
    msgInfo = msgInfo.replaceAll('<br  />', '\n'); // 一些处理
    let converter = new showdown.Converter({
      // 详细配置见：https://github.com/showdownjs/showdown#valid-options
      tables: true, // 支持table语法
      strikethrough: true, // 将~~strikethrough~~ 识别为 <del>strikethrough</del>
      underline: true, // __test__中的下划线不识别为<em> 和 <strong>
      extensions: [
        showdownKatex({
          // 使用方式见：https://obedm503.github.io/showdown-katex
          // 详细配置见：https://katex.org/docs/options.html
          throwOnError: false, // 公式有错时，是否抛出错误
          displayMode: false, // 如果为false，公式以inline方式渲染
          delimiters: [
            { left: '$$', right: '$$', display: true },
            { left: '$', right: '$', display: false },
            { left: '~', right: '~', display: false, asciimath: true },
          ],
        }),
      ],
    });
    return converter.makeHtml(msgInfo);
  }
</script>
<style>
  .katex-html {
    display: none;
  }
  .markdown-viewer {
    width: 100%;
    td {
      border: 1px solid #dfe2e5;
      padding: 5px;
    }
    th {
      border: 1px solid #dfe2e5;
      padding: 5px;
      text-align: center;
    }
    tr:nth-child(2n-1) {
      background-color: #fafbfc;
    }
  }
</style>