头图

引言

markdown是啥,相信大家都已经清楚了,一种程序员必备的文档格式。可以支持代码高亮表格图片视频等一种文档格式😀😀

但是在vue3中如何来解析markdown文件呢?🤔🤔🤗

效果

image.png

在效果图中,通过请求获取markdown源文件,然后解析成正常的html展示在页面上

当前效果可以查看在线文档

实现方式

咱们可以将整个解析markdwon文件到html的整个过程拆分成以下几个步骤:

  1. 获取markdown源文件
  2. markdown转换成html
  3. 美化样式

获取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) {
            // 获取失败的异常捕获
        })
效果如图

image.png

解析成html

拿到markdown的内容后,那就需要进行解析成正常的html了,那么这一步怎么做呢?

安装解析markdown语法的包:

npm install marked -S

有关marked的介绍如下:

image.png
简单点的说是:

  • 为速度而生
  • 低级编译器,用于解析无缓存或长时间阻塞的标记
  • 轻量级,同时实现所有的降价功能从支持的口味和规格
  • 在浏览器、服务器或命令行界面(CLI)中工作

当然,该包也提供了在线demo:demo page

image.png
使用方式如下:

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就出来了,可以看到如下的效果:

image.png

美化代码

经过上面两步,初步的html内容就渲染出来了,但是这样的效果,有读者愿意看么?

接下来咱们来美化一下咱们的代码,美化代码的方式有以下几种:

  1. 引用现场的css
  2. 自己手动来实现css

    美化就是缺少css嘛🤣🤣🤣

在这里,咱们就来实现一个githubmarkdown的样式吧

github的markdown css文件已经有现成的库了,咱们只需要按照一下即可:

npm install github-markdown-css

有了这个,咱们就好办了,改造一下代码:

import 'github-markdown-css'

对的,就是这么简单,只需要导入这个包即可,就可以实现以下效果:

image.png

番外

说了这么多,需要给大家发一波福利🎉✨✨,优秀的你知道如何美化代码格式么?😁😁😁


万象工作室
7 声望9 粉丝

穷举数字孪生的每一个经典应用场景!开源地址:gbim.vip