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