最后
资料过多,篇幅有限
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
# 使用 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)]