个人博客实现Markdown格式文件的录入与呈现

  最近在写个人博客，遇到文章的录入与呈现问题，研究了很多种方法，发现Markdown格式的最方便可行，所以记录一下。

  我的博客前端是基于vue框架，后端是基于koa的。我的思路是在服务器上放Markdown文件，数据库中保存文章信息及文章地址，前端post请求，获取完整的Markdown文件，再通过marked插件解析成html格式，直接插入页面中。 首先在前端安装marked和highlight.js(实现代码高亮)

cnpm install marked  highlight.js  --save

具体步骤如下：

1）后端读取Markdown文件

const fs = require('fs')
const path = require('path')
router.post('/articles', async ctx => {
    const article_id=ctx.request.body.id  //前端传过来的文章id
    const pathUrl = await path.join(__dirname, path)  //根据文章id，获取文件地址
    ctx.body = fs.createReadStream(pathUrl)  //返回一个readStream对象
})

2）前端发送请求并解析

import marked from 'marked'
import hljs from 'highlight.js'
//获取md文件
this.$axios({
    method: 'post',
    url: '/test/articles',
    data: {
        id: self.$route.query.id
    }
}).then((res) => {
    console.log(res)
    //建一个空的id为markdown的div,将收到的数据解析并放入div中
    document.getElementById('markdown').innerHTML = marked(res.data)  
    //渲染文档中代码部分
    hljs.initHighlighting()
    //我这里代码高亮未生效，自己手动绑定hljs类
    this.$("code").addClass('hljs')
})
//marked的配置
marked.setOptions({
        renderer: new marked.Renderer(),
        gfm: true,
        tables: true,
        breaks: false,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        smartypants: false,
        highlight: function (code) {
            return hljs.highlightAuto(code).value
        }
      });

  代码的核心就是使用marked插件解析md文件，使用highlight.js高亮代码。

  至此，Markdown文件的解析就完成了。如果有更好的博客文章录入呈现方式，欢迎交流学习。