引言
markdown是啥，相信大家都已经清楚了，一种程序员必备的文档格式。可以支持代码高亮，表格，图片，视频等一种文档格式
但是在vue3中如何来解析markdown文件呢？
效果
在效果图中，通过请求获取markdown源文件，然后解析成正常的html展示在页面上
实现方式
咱们可以将整个解析markdwon文件到html的整个过程拆分成以下几个步骤：
- 获取markdown源文件
markdown转换成html- 美化样式
获取markdown内容
markdown.md是一个文件，那么如何获取markdonw里面的内容呢？
在进行第一步的时候，我想提出一个问题，请问你是如何获取本地json文件内容的？ 通过问题转换，大家肯定就知道如何获取本地json内容了——通过fetch来获取嘛
那么咱们可以写出这样的代码：
fetch('./xxxx.json', {
method: 'GET',
mode: 'cors' // 允许发送跨域请求
}).then(function (response) {
//打印返回的json数据
response.json().then(function (data) {
// 获取到json文件的内容
})
})
.catch(function (e) {
// 失败后的异常处理
})既然获取json可以这么来，那么获取markdown.md是不是也可以这么来呢？
同理，咱们也可以这么来试一试，但是这里肯定有一个地方需要进行修改，那就是response.json()，markdown文件里面返回的肯定不是一个json文件，而是一个正常的文本，那么可以写出以下代码：
fetch(route.query.path as string, {
method: 'GET',
mode: 'cors', // 允许发送跨域请求
credentials: 'include',
headers: {
'Content-Type': 'text/plain'
}
})
.then(async function (response) {
//打印返回的json数据
response.text().then((data) => {
// 获取到markdown内容
})
})
.catch(function (e) {
// 获取失败的异常捕获
})效果如图
解析成html
拿到markdown的内容后，那就需要进行解析成正常的html了,那么这一步怎么做呢？
安装解析markdown语法的包：
npm install marked -S有关marked的介绍如下：
简单点的说是：
- 为速度而生
- 低级编译器，用于解析无缓存或长时间阻塞的标记
- 轻量级，同时实现所有的降价功能从支持的口味和规格
- 在浏览器、服务器或命令行界面(CLI)中工作
当然，该包也提供了在线demo：demo page
使用方式如下：
import { marked } from 'marked'
// marked 选项
marked.setOptions({
pedantic: false,
gfm: true,
breaks: false,
sanitize: false,
smartLists: true,
smartypants: false,
xhtml: false,
})
const htmlStr = marked('markdown 内容')有了这一步，页面的html就出来了，可以看到如下的效果：
美化代码
经过上面两步，初步的html内容就渲染出来了，但是这样的效果，有读者愿意看么？
接下来咱们来美化一下咱们的代码，美化代码的方式有以下几种：
- 引用现场的
css 自己手动来实现
css美化就是缺少css嘛
在这里，咱们就来实现一个github的markdown的样式吧
github的markdown css文件已经有现成的库了，咱们只需要按照一下即可：
npm install github-markdown-css有了这个，咱们就好办了，改造一下代码：
import 'github-markdown-css'对的，就是这么简单，只需要导入这个包即可，就可以实现以下效果：
番外
说了这么多，需要给大家发一波福利✨✨，优秀的你知道如何美化代码格式么？