Vue3展示Markdown内容

起因

想要搭建一个个人网站，然后在网站上展示个人信息以及平时学习或者使用框架的一些内容。所以需要一个能够将markdown内容转化到页面上展示（就类似于github或者各大博客网站）。个人网站是vue3，vite构建。首先是在

npm上搜索markdown去找寻对应框架，试过其中几个，例如：

• markdown-loader
• vue-markdown
• markdown-it
• markdown-it-vue
• v-md-editor

markdown-loader

搜索markdown首先出来的就是这个，然后打开看了下webpack2+，个人就没有去试用。

vue-markdown

这个框架单单看首页支持的东西比较全，但是上个版本在四年前，我怕它不支持vue3，所以也没有试用。

markdown-it

这个框架相较于前两个首先有个

live demo好评👍，但是看了下live demo，个人不是很喜欢这个风格，就列入备选框架中，然后接着看下一个。

markdown-it-vue

这个框架其实跟之前那个框架差不多，上来也首先是一个

Demo online，但是实际展现风格跟之前那个差不多。

v-md-editor

这个框架打开看到则是最舒服的一个，上来不仅有个线上demo，还有中文文档，好评。其次是文档中明确描写了支持vue3，那就决定是他了。

开始

要在Vue3中使用，首先安装Vue3的依赖包。

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

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

然后官方给出的默认例子是编辑器，但是我们这边作为一个展现数据的页面，并不需要编辑功能，所以我们需要在main.js/main.ts中做一些更改

// Vue3必备
import {
    createApp } from 'vue'
// 预览组件以及样式
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// VuePress主题以及样式（这里也可以选择github主题）
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

// Prism
import Prism from 'prismjs';
// 代码高亮
import 'prismjs/components/prism-json'