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

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

news 来源：原创 2025/5/24 0:13:42

安装

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

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>