共计 1694 个字符，预计需要花费 5 分钟才能阅读完成。
引言
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'对的，就是这么简略，只须要导入这个包即可，就能够实现以下成果：
番外
说了这么多，须要给大家发一波福利🎉✨✨，优良的你 晓得如何丑化代码格局么？😁😁😁
