vue3 markdown插件库 v-md-editor与md-editor-v3

虽然代码测试与生成的功能通过vscode插件实现了需求，但是web端的会话无法控制用户对话不让ai给写代码，所以除了普通文档的渲染需要带格式，代码的渲染更加需要带格式，且市场上的免费产品都实现了对代码部分进行操作，比如:显示语言类型，可以一键复制代码，一键伸缩代码块。那我们的产品自然也不能太弱鸡。

搜索一下vue3能用的插件其实并不多，其实我看了三款，第一款已经忘记了~
说说下面这两款吧，最好用的就是 md-editor-v3

1. v-md-editor
   https://code-farmer-i.github.io/vue-markdown-editor/zh/

2. md-editor-v3@4.17.0
   https://imzbf.github.io/md-editor-v3/en-US/demo

下载之后，其实我们的渲染需要格式，而不是需要这种编辑器，所以我们其实两款，使用的都是preview的功能，

第一款
<template>
  <v-md-preview :text="text"></v-md-preview>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>

第二款
<template>
  <MdPreview :editorId="id" :modelValue="text" />
</template>

<script setup>
import { ref } from 'vue';
import { MdPreview} from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';

const id = 'preview-only';
const text = ref('# Hello Editor');
const scrollElement = document.documentElement;
</script>

第一个editor的缺点就是没有自带的显示语言和复制的功能，vue3操作dom捕捉pre,code元素有点麻烦，也没搞成功，这种捕捉元素然后插入结构是我从vscode插件的研究发现的方案。
鉴于我找到了第二款即MdPreview，那自然是使用现成的啦~
这是第二款自带的渲染效果：

然后改改样式咯，变成这样

项目中不想要使用展开，收起的功能，直接官方文档仔细看，找到 codeFoldable :codeFoldable="false"
配置一下就行啦~
第二款还可以自定义css主题样式包，官网仔细看！