前端解析Markdown
目录
前端解析Markdown
1.使用strapdown
1.1、下载
点击下载
1.2.使用
1.2.1、引入CSS文件strapdown.css
<link rel="stylesheet" type="text/css" href="strapdown.css">
1.2.2、HTML结构
<xmp class="html" theme="united" style="display:none;">
...markdown文档代码
</xmp>
theme
属性内容是主题代码,具体取值可以查看theme文件夹下的文件
1.2.3、在保证文档加载完成后引入strapdown.js
<script type="text/javascript" src="strapdown.js"></script>
一定要保证html加载完整,否则无效
2.使用marked(配合highlightjs)
2.1、下载
点击下载Marked
2.2、使用
2.2.1、引入JS文件
<script src="jquery.min.js"></script>
<script src="marked.min.js"></script>
2.2.2、HTML结构
无固定结构
2.2.3、执行js
//获取md文件的实际内容
var html = $('xml').html();
//marked解析生成
$('xml').html(marked(html));
3.使用mdjs(配合highlightjs)
3.1、下载
点击下载mdjs
3.2、使用
3.2.1、引入JS文件
<script src="jquery.min.js"></script>
<script src="mdjs.min.js"></script>
3.2.2、HTML结构
无固定结构
3.3.3、执行js
//获取md文件的实际内容
var html = $('xml').html();
//marked解析生成
$('xml').html(Mdjs.md2html(html));
//或者
var mdjs = new Mdjs();
$('xml').html(mdjs.md2html(html));
4.使用HyperDown(配合highlightjs)
4.1、下载
点击下载
4.2、使用
4.2.1、引入JS文件
<script src="jquery.min.js"></script>
<script src="Parser.js.js"></script>
4.2.2、HTML结构
无固定结构
4.3.3、执行js
//获取md文件的实际内容
var html = $('xml').html();
//marked解析生成
var parser = new HyperDown;
$('xml').html(parser.makeHtml(html));