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>