vue2、vite整合vite-plugin-vue-markdown网页展示md文件包含样式

环境介绍

这里是 vite 搭建的 vue2， 路由使用 router，想要在项目里展示一个版本更新记录，这个更新记录是个 readem.md 文件，不想弄两套问题使用 md 直接在页面显示，样式好看。

效果展示：

操作步骤

1. 引入包

npm i vite-plugin-vue-markdown -D

2. 编写配置 vite.config.js

import md from 'vite-plugin-vue-markdown'

export default defineConfig({
  plugins: [
    vue({
      include: [/\.vue$/, /\.md$/],// vue插件默认只处理.vue文件，通过该参数配置让其也处理一下.md文件
    }), // 可编译 path 结尾是 .vue 与 .md 的文件
    md({
      component: true,
      previewId: 'vue'
    }),
  ],
])

3. 配置路由

将路由指向文件，完成后启动项目，就可以访问路径显示啦。

    {
        path: '/docs/readme',
        component: () => import('@/doc/readme.md')
    }

页面样式

如果默认的样式不能满足需求，可以全局注册一个 CodePreview 组件来代替默认组件

CodePreview 需要按约定支持如下 props 和 slot

• props
  • lang string 代码块的 lang
  • meta string // 代码块的 meta 信息
  • code string // 代码块的原始代码
• slot
  • default 代码块生成的 vue 组件将会以 slots.default 传递过来
  • code 代码块经过高亮转换为 html 将会以 slots.code 传递过来

1. 引入 gethub 的 markdown 样式

npm install github-markdown-css

2. 在 vue 配置的 main.js 中配置自定义预览组件

import Vue from 'vue';
import MyCodePreview from "@/doc/MyCodePreview.vue";

// 自定义
Vue.component('CodePreview', MyCodePreview)

const app = new Vue({
  router,
  store,
  el: '#app',
  render: h => h(App),
})

自定义组件文件

<template>

</template>
<script setup>
import {onMounted, defineProps} from "vue"

const props = defineProps({
  lang: {
    type: String,
  },
  meta: {
    type: String,
  },
  code: {
    type: String,
  }
})
</script>
<style>

@import "github-markdown-css"; 
.markdown-body {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;
  margin: 0 auto;
  padding: 45px;
}

@media (max-width: 767px) {
  .markdown-body {
    padding: 15px;
  }
}
</style>

---

参考文档：
【亲测免费】 vite-plugin-md安装与配置完全指南

开发UI组件库第一步，Vite如何把Markdown转换Vue组件

Github样式下载