在前端頁面展現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;
        });
    }