引言
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'对的，就是这么简略，只须要导入这个包即可，就能够实现以下成果：
番外
说了这么多，须要给大家发一波福利✨✨，优良的你晓得如何丑化代码格局么？