关于前端: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'

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

番外

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