实现方式
- 安装:
yarn add @kangc/v-md-editor
- 版本:
2.3.18
以上,之前安装的1.7
版本就会报莫名其妙的错! main.ts
全局注册,且main.ts
中import { createApp} from 'vue'
一定要放在第一行- 官方文档:v-md-editor插件官方文档
- 文本显示
v-md-editor
既可以显示markdown文本,也可以编辑markdown文本v-md-preview
只显示,不可编辑。
- 主题
github
:浅色主题,在main.ts
中配置import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'; import '@kangc/v-md-editor/lib/theme/style/github.css'; // highlightjs import hljs from 'highlight.js'; VMdPreview.use(githubTheme, { Hljs: hljs, });
vitepress
:深色主题,在main.ts
中配置,且在vite.config.ts
中导入,完整代码在下面的示例。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'; //github:浅色主题;vuepress:深色主题 VMdPreview.use(vuepressTheme, { Prism, })
下面代码以v-md-preiview
显示文本,vitepress
深色主题为例
main.ts
导入
import { createApp, provide, ref, reactive } from 'vue' //第一行
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
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';
//github:浅色主题;vuepress:深色主题
VMdPreview.use(vuepressTheme, {
Prism,
})
//代码复制
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());
const app = createApp(App)
app.use(VMdPreview);
vite.config.ts
页面配置:plugins
配置prismjs
import { defineConfig } from 'vite'
import prismjs from 'vite-plugin-prismjs';
plugins: [
vue(),
prismjs({
languages: 'all',
})
],
markdown.vue
页面使用
<template>
<v-md-preview :text="outputContent" @copy-code-success="handleCopyCodeSuccess"></v-md-preview>
</template>
代码复制功能说明: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());
官网给出的是VMdPreviewHtml.use(createCopyCodePreview())
或者VueMarkdownEditor.use(createCopyCodePlugin())
,但是由于我显示文本使用的是v-md-preview
,所以导入功能应使用VMdPreview.use(createCopyCodePlugin())