vue2 + md渲染

功能：用户和ai对话，ai回复有打字机效果，一个字一个字加载（查看如何加载流式数据），并相对应的标签根据md格式渲染
接口：使用流式数据，返回
开源库：有很多开源库，这里我选择了v-md-editor

v-md-editor官网

引入（可以直接在main.js文件中引入）

import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from "@kangc/v-md-editor/lib/theme/github.js"; //主题
import "@kangc/v-md-editor/lib/theme/style/github.css";
import hljs from "highlight.js"; //高亮代码


VMdEditor.use(githubTheme, {
  Hljs: hljs,
  codeHighlightExtensionMap: {
    js: 'javascript', // 将 'js' 扩展名映射到 'javascript' 高亮模式
    html: 'html',    // 将 'html' 扩展名映射到 'html' 高亮模式
    vue: 'xml',
    css: 'css',
    java: 'java',
    python: 'python',
    sql: 'sql',
    // 添加其他你需要的映射
  },
});
VMdEditor.use(createCopyCodePlugin());//代码复制
VMdEditor.use(createMermaidPlugin()); //mermaid格式渲染，但是这个功能一直没实现
Vue.use(VMdEditor);

使用（因为md格式大部分都是左右分栏，左边编辑，右边是预览模式，我这里的需求是只需要渲染，所以mode格式为preview）

<v-md-editor
   v-model="item.answer"
   mode="preview"
   @copy-code-success="handleCopyCodeSuccess"
/>