vue3 解析markdwon生成文章

时间：2022-10-16 19:57:30

引言

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

但是在vue3中如何来解析​​markdown​​文件呢？????????????

效果

vue3 解析markdwon生成文章

在效果图中，通过请求获取​​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) {
            // 获取失败的异常捕获
        })
复制代码
效果如图

vue3 解析markdwon生成文章

解析成html

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

安装解析markdown语法的包：

npm install marked -S
复制代码

有关marked的介绍如下：

vue3 解析markdwon生成文章

简单点的说是：

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

当然，该包也提供了在线demo：​​demo page​​

vue3 解析markdwon生成文章

使用方式如下：

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

vue3 解析markdwon生成文章

美化代码

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

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

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

美化就是缺少css嘛????????????

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

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

npm install github-markdown-css
复制代码

有了这个，咱们就好办了，改造一下代码：

import 'github-markdown-css'
复制代码

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

vue3 解析markdwon生成文章

番外

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

标签：

相关文章