vue3使用v-md-editor预览markdown内容

1、安装适用于vue3的v-md-editor的版本

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

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

2、在main.ts中引入,参考中文文档示例：预览组件（这里只引入了VMdPreview ，因为仅仅只是预览makdown内容，如果需要编辑器，需要引入完整的v-md-editor）

//1 预览组件以及样式
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// VuePress主题以及样式（这里也可以选择github主题）--VuePress主题代码呈黑色背景，github呈白色背景
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

3、可以使用的一些配置（更多参考文档--这里使用的是VMdPreview预览组件，所以是VMdPreview.use(),如果是VMdEditor编辑器，则是VMdEditor.use()     ）

// Prism 代码块关键字高亮
import Prism from 'prismjs';
// 代码高亮
import 'prismjs/components/prism-json';
// 选择使用主题
VMdPreview.use(vuepressTheme, {
  Prism,
});



// /* 2、v-md-editor 代码块关键字高亮  */
// 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'
// VMdPreview.use(githubTheme, {
//   Hljs: hljs
// })

// 表情包
// import VueMarkdownEditor from '@kangc/v-md-editor';
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index';
import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css';

VMdPreview.use(createEmojiPlugin());


// 快速复制代码
// import VueMarkdownEditor from '@kangc/v-md-editor';
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';

VMdPreview.use(createCopyCodePlugin());

//use
const app = createApp(App)


app.use(VMdPreview)


app.mount('#app')

4、使用

中文文档：介绍 | v-md-editor