vue3支持markdown显示格式

背景

公司内部文档大模型体验，需要一个demo做展示（做了好多demo了......），文档大模型的场景后台配置实体库、同义词、文档库等，其中文档库中有各种格式的文档，体验者让大模型写个脚本、以表格数据输出。页面乱了。。。

尝试

markdown

支持vue2的表格、简单的文本能识别\n
其他貌似不支持
v3不支持

v-md-editor

安装

# 使用 npm
npm i @kangc/v-md-editor@next -S

# 使用 yarn
yarn add @kangc/v-md-editor@next

安装

yarn add prismjs

先在html中引入

<!--index.html-->
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>

在main.js中配置

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import createMermaidPlugin from '@kangc/v-md-editor/lib/plugins/mermaid/cdn';
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index';
import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css';// Prism
import Prism from 'prismjs';
// highlight code
import 'prismjs/components/prism-json';VMdPreview.use(vuepressTheme, {Prism,
});
// markdown支持流程图
VMdPreview.use(createMermaidPlugin())
// markdown支持显示代码行数
VMdPreview.use(createLineNumbertPlugin())
// markdown支持代码快速复制
VMdPreview.use(createCopyCodePlugin());
// markdown支持emoji
VMdPreview.use(createEmojiPlugin());const app = createApp(App)
app.use(VMdPreview);app.mount('#app')

用这两个测试。一测试表格二测试脚本形式

            markdownContent:'当然，这是一个简单的Hive SQL查询示例，用于从名为"tabl eName"的表中选择所有的记录：\n\n```sql\nSELECT * FROM tableName;\n```\n\n这个语句将返回"tabl eName"表中的所有字段和对应的数据。',markdownContent1:"| 股东名称 | 持股比例 | 描述 |\n| --- | --- | --- |\n| 重庆百货大楼股份有限公司 | 31.06% | 重庆国资委控股的上市公司，西南地区百货零售龙头企业 |\n| 北京中关村科金技术有限公司 | 29.506% | 国内领先的智能科技公司，提供AI科技驱动的解决方案 |\n| 重庆银行股份有限公司 | 15.53% | 西部和长江上游地区的地方性股份制商业银行，A+H上市 |\n| 物美集团 | 持股未具体说明 | 提供线下场景支持，与马上消费形成资源协同 |\n| 阳光财险 | 持股未具体说明 | 优秀社会资本，与马上消费形成资源协同 |\n| 中金公司下属子公司 | 持股未具体说明 | 通过业务合作提供支持，如ABS承销和投资 |\n| 中信建投下属子公司 | 持股未具体说明 | 通过业务合作提供支持，如ABS承销和投资 |\n\n请注意，物美集团的持股比例和阳光财险的持股比例在提供的信息中没有具体说明。",