引言
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'
对的,就是这么简单,只需要导入这个包即可,就可以实现以下效果:
番外
说了这么多,需要给大家发一波福利🎉✨✨,优秀的你知道如何美化代码格式么?😁😁😁
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。