v-md-editor是vue3框架最常用的markdown编辑器组件，通过v-md-editor编辑器可以轻松编辑或展示markdown内容。

在各类博客网站中关于markdown语法的文章可以说极为常见，而博客又以技术类型博客居多。这也就说明中，大部分博客站都有着关于代码的展示效果。

那么在v-md-editor展示博客内容时，我们可以如何实现针对性的对于代码部分进行高亮突出展示呢？效果如图所示。

关于代码高亮的展示，在前端开发中就不得不提prismjs。本篇文章就来介绍在v-md-editor中如何实现prismjs实现代码高亮效果。

一、安装prismjs

npm install prismjs -S

二、main.js中进行v-md-editor的代码高亮配置

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';
import Prism from 'prismjs';
VMdPreview.use(vuepressTheme, {
    Prism
});

const app = createApp(App)
app.use(VMdPreview);

三、页面中v-md-editor纯展示效果使用

<v-md-preview :text="item.content"></v-md-preview>

注意点：v-md-preview只是预览组件，如果你是需要编辑器那么需要修改对应的引入配置。