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

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中引入,参考中文文档示例：预览组件预览组件A lightweight markdown editor built on Vuehttps://ckang1229.gitee.io/vue-markdown-editor/zh/examples/preview-demo.html#%E9%A2%84%E8%A7%88%E7%BB%84%E4%BB%B6（这里只引入了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、使用

<template>
  <v-md-preview v-model="text" height="400px"></v-md-preview >
</template>
 
<script>
export default {
  data() {
    return {
      text: `# 标题一
这是一个段落，可以在这里写一些文字。
## 标题二
这是另一个段落。
### 标题三
这是一个列表：
- 项目一
- 项目二
- 项目三
### 标题四
这是一个表格：
| 列1 | 列2 | 列3 |
| --- | --- | --- |
| 1   | 2   | 3   |
| 4   | 5   | 6   |
##### 标题五
这是一个链接：[Google](https://www.google.com/)`,
    };
  },
};
</script>

5、可以按照自己的需求修改v-ma-preview容器的背景色、padding、文字大小等样式 

:deep(.vuepress-markdown-body) {
  background-color: transparent;
}
:deep(.vuepress-markdown-body:not(.custom)) {
  padding: 0;
  font-size: 14px;
}

6、效果图：

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