php预览md文件,在前端页面展示Markdown文件

在前端页面展示Markdown文件转载weixin_34124577 最后发布于2017-12-21 20:45:00 阅读数 942 收藏展开常我们都会在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;

});

}

转载于:https://www.cnblogs.com/DM428/p/8082392.html