Vite Markdown生成文档和演示案例插件

实现基于 Vite 插件机制实现对 markdown 文件内容进行转换。核心通过 marked 结合 hightlight.js 实现代码高亮和美化。并且可让文档中带有如 preview 指定标识的 markdown 代码块替换为组件，体验预览效果。支持 Vue 和 React 框架。

实现功能需求

1.直接在md文档中编写vue/react语法，使用指定标识将md代码块转为vue/react组件；
2.在路由中直接import md文件，如

[
  {
    path: '/',
    name: '/md',
    component: () => import('./views/README.md')
  }
]

最终效果

1.md代码图：

2.最终页面展示图：

安装使用

npm install vite-plugin-doc-preview -D

使用配置

在vue中使用

// vite.config.ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import MarkedPreview from 'vite-plugin-doc-preview'

export default defineConfig({
  plugins: [
    Vue({
      include: [/.vue$/, /.md$/],
    }),
    MarkedPreview()
  ]
})

在react中使用

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react';
import MarkedPreview from 'vite-plugin-doc-preview'

export default defineConfig({
  plugins: [
    react(),
    MarkedPreview({mode:'react'})
  ]
})

引入高亮样式

import "vite-plugin-doc-preview/style/style.css"

完整代码

github:https://github.com/337547038/vite-plugin-doc-preview