vue3中展示markdown格式文章的三种形式

一、安装

# 使用 npm
npm i @kangc/v-md-editor -S# 使用yarn
yarn add @kangc/v-md-editor

二、三种实现形式

1、编辑器的只读模式

main.ts文件中配置：

import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';const app = createApp(/*...*/);app.use(VMdEditor);

 使用的组件中：

<template><v-md-editor v-model="text" mode="preview"></v-md-editor>
</template>、
//text为要传入的markdown格式的内容

2、预览组件

main.ts中配置：

import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';const app = createApp(/*...*/);app.use(VMdPreview);

使用的组件中：

<template><v-md-preview :text="text"></v-md-preview>
</template>
//text为要传入的markdown格式的内容

3、html预览组件

main.ts中配置：

import VMdPreviewHtml from '@kangc/v-md-editor/lib/preview-html';
import '@kangc/v-md-editor/lib/style/preview-html.css';// 引入使用主题的样式
import '@kangc/v-md-editor/lib/theme/style/vuepress';const app = createApp(/*...*/);app.use(VMdPreviewHtml);

使用的组件中：

<template><!-- preview-class 为主题的样式类名，例如vuepress就是vuepress-markdown-body --><v-md-preview-html :html="html" preview-class="vuepress-markdown-body"></v-md-preview-html>
</template>

三、实现其他功能

1、设置外观

import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';import '@kangc/v-md-editor/lib/theme/style/vuepress.css';    
//这个css文件，它与 vuepressTheme 主题相关，定义了主题的颜色、字体、间距等样式。// 使用 vuepress 主题
VueMarkdownEditor.use(vuepressTheme);

2、对代码进行语法高亮并显示代码语言

import Prism from 'prismjs';VueMarkdownEditor.use({Prism,
});

3、代码块显示行号

//main.ts中import VueMarkdownEditor from '@kangc/v-md-editor';
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';VueMarkdownEditor.use(createLineNumbertPlugin());

4、高亮代码行 

import VueMarkdownEditor from '@kangc/v-md-editor';
import createHighlightLinesPlugin from '@kangc/v-md-editor/lib/plugins/highlight-lines/index';
import '@kangc/v-md-editor/lib/plugins/highlight-lines/highlight-lines.css';VueMarkdownEditor.use(createHighlightLinesPlugin());

5、快捷复制代码

main.ts中配置：

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';VueMarkdownEditor.use(createCopyCodePlugin());

组件中使用：

<template><v-md-editor v-model="text" height="500px" @copy-code-success="handleCopyCodeSuccess" />
</template>//使用@copy-code-success
<script>
export default {methods: {handleCopyCodeSuccess(code) {console.log(code);},},
};
</script>

四、注意 

如果按正常流程配置后，内容出不来，可以选择自己新开一个项目再操作一遍，如果这个时候是正常的，那可能就是原来的项目配置的版本过低，可以选择更新一下项目中的各项配置