关于前端:vue3-解析markdwon生成文章

引言

markdown是啥，置信大家都曾经分明了，一种程序员必备的文档格局。能够反对代码高亮，表格，图片，视频等一种文档格局😀😀

然而在vue3中如何来解析markdown文件呢？🤔🤔🤗

成果

在效果图中，通过申请获取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) {
            // 获取失败的异样捕捉
        })

成果如图

解析成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内容就渲染进去了，然而这样的成果，有读者违心看么？

接下来咱们来丑化一下咱们的代码，丑化代码的形式有以下几种：

1. 援用现场的css

2. 本人手动来实现css

   丑化就是短少css嘛🤣🤣🤣

在这里，咱们就来实现一个github的markdown的款式吧

github的markdown css文件曾经有现成的库了，咱们只须要依照一下即可：

npm install github-markdown-css

有了这个，咱们就好办了，革新一下代码：

import 'github-markdown-css'

对的，就是这么简略，只须要导入这个包即可，就能够实现以下成果：

番外

说了这么多，须要给大家发一波福利🎉✨✨，优良的你晓得如何丑化代码格局么？😁😁😁