常我们都会在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;
});
}