使用 v-md-editor 显示 Markdown 文本并支持复制代码功能

欢脱的小猴子

已于 2024-08-12 14:48:49 修改

阅读量253

点赞数 2

文章标签： vue typescript

于 2024-07-15 13:55:50 首次发布

本文链接：https://blog.csdn.net/m0_50666077/article/details/140436833

版权

实现方式

安装：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())