1. 安装相关插件

npm i unplugin-vue-markdown markdown-it-prism prism @unhead/vue

2. 添加配置

src/main.ts

// 给 md 文件创建头部
import { createHead } from '@unhead/vue'
// md 文件中代码高亮的样式
import 'prismjs/themes/prism.css'
// 自定义 md 文件的样式
import '@/assets/css/md.css'
app.use(createHead())

vite.config.ts

import Markdown from 'unplugin-vue-markdown/vite'
import prism from 'markdown-it-prism'
import { unheadVueComposablesImports } from '@unhead/vue'

Components 添加配置，包含 .md 文件和 .vue 文件

Components({
      directoryAsNamespace: true,
      collapseSamePrefixes: true,
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/]
    }),

VueRouter 添加配置，支持 .md 文件和 .vue 文件

VueRouter({
      extensions: ['.vue', '.md']
    }),

AutoImport 添加配置 unheadVueComposablesImports

AutoImport({
      // 解析的文件类型
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/ // .md
      ],
      // 需自动导入方法的库
      imports: [
        'pinia',
        'vue',
        '@vueuse/core',
        // '@vueuse/components',
        // 项目中集成了 unplugin-vue-router 时，此处需用 VueRouterAutoImports 替换掉 'vue-router'
        VueRouterAutoImports,
        // 新增为 md 文件创建头部
        unheadVueComposablesImports
      ]
    }),

vue 添加配置，包含 .md 文件和 .vue 文件

vue({
      include: [/\.vue$/, /\.md$/]
    }),

plugins 新增 Markdown 配置

Markdown({ headEnabled: true, markdownItUses: [prism] }),

3. 添加 md 文件

比如 src/pages/notes/vue.md

---
title: 编程笔记- vue 实战笔记
meta:
  - name: vue
    content: vue实战笔记
test: 测试
---

<Page>

# vue 实战笔记

## 图片

图片放在 public/imgs/ 中

> 注意事项：是与 index.html 同级的 public 文件夹

```html
<img src="/imgs/朝阳的微信二维码.jpg" alt="" />
```.

</Page>

上文中，html 代码末尾的 . 因编辑需要添加，实际使用时，需去掉！

4. 创建 md 文件容器组件

src/components/Page.vue

<template>
  <div style="padding: 20px">
    <slot></slot>
  </div>
</template>

5. 自定义 md 文件样式

md 文件渲染后，会按 md 语法，渲染成 h1,p,blockquote 等 html 标签，可根据个人喜欢，自定义样式

新建文件 src/assets/css/md.css

h1 {
    font-weight: bold;
    font-size: 24px;
}

h2 {
    font-weight: bold;
    font-size: 20px;
    line-height: 2
}

blockquote {
    border-left: 3px red solid;
    padding-left: 6px;
    margin: 6px 0;
    font-size: 12px;
}

6. 预览效果

启动项目，访问 http://localhost:5173/notes/vue，效果如下

vue3【实战】 渲染 md 文件（markdown语法 .md后缀的文件）_Markdown


可见自动生成了页面路由，修改了网页标题，按自定义样式渲染了 md 文件，vue 组件生效，md 文件中的代码高亮。