在前端页面展现Markdown文件

常咱们都会在GitHub上浏览不少的readme文件，这些都是Markdown语法写成的Markdown文件，HTML中并无用于展现Markdown文件的元素，那么为何能够在前端展现呢？

有别于GitHub官方给提供的API（有访问频率限制），我使用了一个npm 模块。这个模块能够很是方便的将Markdown语法的字符串直接转化为HTML 代码字符串。而后咱们让某个div

元素的innerHTML属性为这个字符串便可显示。

这个npm模块叫作showdown，它的源码能够在GitHub找到：源码，GitHub能够一并找到使用教程。

这里把使用方法简单介绍一下：

1.安装

npm install showdown

　　

2.引入

ES6 import：

import showdown from ‘showdown’;

　　

3.初始化转换器：

let converter = new showdown.Converter();

　　

4.将markdown语法的字符串转换为HTML字符串：

//html变量是HTML代码字符串
//text是Markdown语法的字符串
let html = converter.makeHtml(text);

　　

5.在前端页面显示：

document.getElementById('id').innerHTML = html;

　　

若是对显示样式不满意，能够经过CSS自定义，很是方便。

 

另外，若是获取后端的.md文件做为字符串呢？

答案是直接经过ajax的get方法请求.md 文件，获取到的就是Markdown字符串了。

 

具体实例：

renderMD(param){
        let path = Params[0].file;
        if(param !== null && param !== undefined && param !== ' '){
            path = Params[param].file;
        }
        let tmp =  Ajax({
            url:path,
            headers:{
                'content-type':'text/plain'
            },
            method:'get'
        });
        tmp.then(res => {
            // console.log(res);
            let Convertor = new showdown.Converter();
            let html = Convertor.makeHtml(res);
            document.getElementsByClassName('DetailDisplay')[0].innerHTML = html;
        });
    }