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

vue3使用v-md-editor完成Markdown内容展示

news 2025/4/2 16:30:13

安装

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

引入文件

在main.js中引入，并初始化VMdPreview

import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'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';// highlightjs
import hljs from 'highlight.js';
// 高亮语法
import Prism from "prismjs";VMdPreview.use(vuepressTheme, {Hljs: hljs,Prism: Prism,config: {toc: {includeLevel: [3, 4],},},
});const app = createApp(App)app.use(createPinia())
app.use(router)
app.use(VMdPreview);app.mount('#app')

注册代码语法高亮

官方文档上用的是github风格样式，不好看。换成vuepress风格。先安装语言包

# yarn
yarn add vite-plugin-prismjs --dev# npm
npm install vite-plugin-prismjs# npm
npm install prismjs  --sava# yarn
yarn install prismjs  --sava# highlight两个都要安装
npm install highlight.js
npm install @highlightjs/vue-plugin

vite方式

在vite.config.js中注册vuepress 主题 | v-md-editor

// vite.config.js
import { defineConfig } from 'vite';
import prismjs from 'vite-plugin-prismjs';export default defineConfig({plugins: [prismjs({languages: 'all',}),],
});

页面使用

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from "vue";let scriptUrl = ref('/public/md/font.md');
let text = ref('');
let init = function(){fetch(scriptUrl.value).then(function (data) {let tempText = data.text();return tempText;}).then(function (data) {let tempText = data;text.value = tempText;});
};onMounted(() => {init();
});</script>
<template><v-md-preview :text="text"></v-md-preview>
</template><style></style>