最后

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

# 使用 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 Vueicon-default.png?t=N7T8https://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: `# 标题一

这是一个段落，可以在这里写一些文字。



### 最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![大厂面试题](https://img-blog.csdnimg.cn/img_convert/3961cbc4f9efffcb42487efd8b0664f3.webp?x-oss-process=image/format,png)

![面试题目录](https://img-blog.csdnimg.cn/img_convert/a587da612da78ff2c4dcc9ef6af38389.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/a5c029e4e76a0dfbccfc668c897983fb.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/cbd0a23a8bfb932d217d8c40ad66abd2.webp?x-oss-process=image/format,png)





..(img-x9CyT6Sh-1715507187236)]

[外链图片转存中...(img-orTIQQvj-1715507187237)]

[外链图片转存中...(img-nICanJW3-1715507187237)]