当前位置：首页 > news >正文

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

news 来源：原创 2025/6/22 10:25:59

一、安装

# 使用 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>