strapdownify是我个人修改后的strapdown框架，用来渲染markdown。 作者github: https://github.com/arturadib 原代码库github：https://github.com/arturadib/strapdown 代码版本：v2
- 如何手动调用
strapdown.js的渲染方法 - html下如何将markdown 转换为html
- 如何拓展strapdown.js的功能
- 有哪些好用的markdown渲染库
作者修改后的strapdown.js代码库的github地址如下： https://github.com/sixtrees/strapdownify
项目中，附有三个demo，详情见文末，demo的启动请使用tomcat等web容器进行启动或者使用webstorm等IDE进行预览。
strapdown是一个很棒的markdown解析库（当然是基于javascript）的了，但是作者的目的可能是尽可能的适用于所有的场景。 所以，作者在官网给出了如下的使用说明
<!DOCTYPE html><html><title>Hello Strapdown</title><xmptheme="united" style="display:none;">
# Markdown text goes in here
## Chapter 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
## Chapter 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</xmp><scriptsrc="http://strapdownjs.com/v/0.2/strapdown.js"></script></html>从上面的代码可以看出，我们需要在html中定义一个xmp或者textarea的html元素（当然，如果你不看源码的话，是不会发现也可以用textarea来替代xmp元素的）。然后，根据源码中的描述，strapdown会获取我们的xmp中的markdown代码，然后利用document来解析我们页面中的link、script、meta信息，然后将利用document.createElement方法动态的对我们的当前页重新进行渲染。
从上一节的描述中，我们可以了解到，原来的解析方式会替换我们的原始页面，也就是渲染过后的页面只会保留最基本的内容（渲染出来的markdown）。因此，我们想有一种方式可以按需进行渲染。
因此，我们对原始的strapdown.js进行了如下的修改(替换了原始文件的最后一个自执行函数)：
/** * 根据传入的$src来获取markdown的内容并转为html显示在$desc元素下 * 如果$desc元素为undefine，则显示$src元素中 * @param $src markdown内容的载体 * @param $desc 渲染过后markdown内容的载体 */varmarkdown=function($src,$desc){if($desc==undefined){$desc=$src;}document.body.style.display='none';varmarkdownEl=document.getElementById($src);//markdown载体varhtmlEl=document.getElementById($desc);//html载体varmarkdown=markdownEl.innerHTML;// Generate Markdownvarhtml=marked(markdown);htmlEl.innerHTML=html;// PrettifyvarcodeEls=document.getElementsByTagName('code');for(vari=0,ii=codeEls.length;i<ii;i++){varcodeEl=codeEls[i];varlang=codeEl.className;codeEl.className='prettyprint lang-'+lang;}prettyPrint();// Style tablesvartableEls=document.getElementsByTagName('table');for(vari=0,ii=tableEls.length;i<ii;i++){vartableEl=tableEls[i];tableEl.className='table table-striped table-bordered';}// All done - show bodydocument.body.style.display='';};/** * 根据传入的$data作为markdown的内容并转为html显示在$desc元素下 * @param $data markdown内容 * @param $desc 渲染过后markdown内容的载体 */varmarkdownFromText=function($data,$desc){// Generate Markdownvarhtml=marked($data);document.getElementById($desc).innerHTML=html;// PrettifyvarcodeEls=document.getElementsByTagName('code');for(vari=0,ii=codeEls.length;i<ii;i++){varcodeEl=codeEls[i];varlang=codeEl.className;codeEl.className='prettyprint lang-'+lang;}prettyPrint();// Style tablesvartableEls=document.getElementsByTagName('table');for(vari=0,ii=tableEls.length;i<ii;i++){vartableEl=tableEls[i];tableEl.className='table table-striped table-bordered';}};由于我们对作者的原始库进行了大量的代码精简，因此，样式的选择，我们需要手动的加载themes文件夹下的样式主题。
下面给出两个实际的使用案例
调用markdown传递1个参数，可以原始的markdown载体元素作为渲染后的html的载体
<!doctypehtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="renderer"content="webkit"><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>strapdown渲染markdown的demo</title><linkhref="./static/bootstrap-3.3.5/css/bootstrap.min.css"rel="stylesheet"><linkhref="./static/css/reset.css"rel="stylesheet"><linkhref="./static/css/site.css"rel="stylesheet"><linkhref="./static/css/lib.css"rel="stylesheet">
<!--加载样式-->
<linkhref="../strapdown/strapdown.css"rel="stylesheet"><linkhref="../strapdown/themes/readable.min.css"rel="stylesheet"></head><body><divclass="bt-warp bge6"><divid="container"class="container-fluid"><divclass="sidebar-scroll"><divclass="sidebar-auto"><divid="task"class="task cw"onclick="task()"></div><h3class="mypcip"><spanclass="f14 cw"id="serverip">localhost</span></h3><ulclass="menu"><li><aclass="menu_home"href="index.html">demo1</a></li><li><aclass="menu_folder"href="index2.html">demo2</a></li><li><aclass="menu_fork"href="http://github.com/sixtrees/strapdownify">fork</a></li></ul></div></div><divclass="main-content"><divclass="container-fluid"style="padding-bottom:50px"><divid="mdcontent"></div></div></div></div><divclass="footer bgw">
markdown内容渲染框架 ©2017-2017
<astyle="margin-left:20px;color:#20a53a;"href="http://github.com/sixtrees/strapdownify"target="_blank">strapdownify on github</a></div></div><scriptsrc="./static/js/jquery-1.10.2.min.js"></script><scriptsrc="./static/js/bootstrap.min.js"></script><scriptsrc="./static/layer/layer.js"></script><scriptsrc="../strapdown/strapdown.js"></script><script>
var loadT = layer.msg('正在加载...', {icon: 16,time: 0,shade: [0.3,'#000']});
$.ajax({url: 'readme.md',type: "POST",dataType: "text",success: function(data){markdownFromText(data,"mdcontent");layer.close(loadT);}});
</script></body></html>调用markdown传递两个参数，可以原始的markdown载体元素需要手动设置为隐藏
<!doctypehtml><htmllang="zh"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1"><linkrel="icon"href="favicon.ico"type="image/x-icon"/><linkrel="shortcut icon"href="favicon.ico"type="image/x-icon"/><title>文件管理</title><linkrel="stylesheet"type="text/css"href="/static/css/reset.css"><linkrel="stylesheet"type="text/css"href="/static/css/login.css"></head><body><divclass="main"><divclass="login"><formclass="loginform"method="post"action="/login"onsubmit="return false;"><divclass="rlogo">系统登录</div><divclass="line"><inputclass="inputtxt"value=""name="userName"datatype="*"nullmsg="请填写账号"errormsg="格式不对"placeholder="账号"type="text"><divclass="Validform_checktip"></div></div><divclass="line"><inputclass="inputtxt"name="password"value=""datatype="*"nullmsg="请填写密码"errormsg="请填写密码"placeholder="密码"type="password"><divclass="Validform_checktip"></div></div><divclass="line yzm"><inputtype="text"class="inputtxt"name="code"nullmsg="请填写验证码"errormsg="验证码不对"datatype="*"placeholder="请填写验证码"><divclass="Validform_checktip"></div><imgwidth="100"height="40"class="passcode"onClick="this.src=this.src.split('?')[0] + '?'+new Date().getTime()"src="/code"style="border: 1px solid #ccc; float: right;"title="点击换一张"></div><divclass="login_btn"><inputid="login-button"value="登录"type="submit"></div><divclass="line"><pclass="pwinfo">3次以上登录错误将会出现验证码</p><aclass="resetpw"href="javascript:void(0);"target="_blank">忘记密码>></a></div></form></div></div><scripttype="text/javascript"src="/static/js/jquery-1.10.2.min.js"></script><scripttype="text/javascript"src="/static/layer/layer.js"></script><scripttype="text/javascript"src="/static/js/Validform_v5.3.2_min.js"></script><scripttype="text/javascript">
$(function () {$(".loginform").Validform({tiptype: function(msg,o,cssctl){if(!o.obj.is("form")){varobjtip=o.obj.siblings(".Validform_checktip");cssctl(objtip,o.type);objtip.text(msg);}}});});
$('#login-button').click(function () {varuserName=$("input[name='userName']").val();varpassword=$("input[name='password']").val();varcode=$("input[name='code']").val();if(userName==''||password==''){layer.msg('表单错误,请重新输入!',{icon: 2});return;}
var data = 'userName=' + userName + '&password=' +password+ '&code=' +code;varloadT=layer.msg('正在登陆...',{icon: 16,time: 0,shade: [0.3,'#000']});
$.post('/login', data, function (rdata) {layer.close(loadT);if(rdata.code!="1"){$("#errorStr").html(rdata.msg);$("input[name='password']").val('');num=rdata.remainTimes;if(num<5){$(".yzm").show();$(".login").css("height","332px");$("input[name='code']").val('');$(".passcode").click();}
layer.msg(rdata.msg, {icon: 2});
return;
}layer.msg(rdata.msg,{icon: 6,time: 0,shade: [0.3,'#000']});
window.location.href = '/';
});});</script></body></html>调用markdownFromText
<!doctypehtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="renderer"content="webkit"><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>strapdown渲染markdown的demo</title><linkhref="./static/bootstrap-3.3.5/css/bootstrap.min.css"rel="stylesheet"><linkhref="./static/css/reset.css"rel="stylesheet"><linkhref="./static/css/site.css"rel="stylesheet"><linkhref="./static/css/lib.css"rel="stylesheet">
<!--加载样式-->
<linkhref="../strapdown/strapdown.css"rel="stylesheet"><linkhref="../strapdown/themes/readable.min.css"rel="stylesheet"></head><body><divclass="bt-warp bge6"><divid="container"class="container-fluid"><divclass="sidebar-scroll"><divclass="sidebar-auto"><divid="task"class="task cw"onclick="task()"></div><h3class="mypcip"><spanclass="f14 cw"id="serverip">localhost</span></h3><ulclass="menu"><li><aclass="menu_home"href="index.html">demo1</a></li><li><aclass="menu_folder"href="index2.html">demo2</a></li><li><aclass="menu_fork"href="http://github.com/sixtrees/strapdownify">fork</a></li></ul></div></div><divclass="main-content"><divclass="container-fluid"style="padding-bottom:50px"><divid="mdcontent"></div></div></div></div><divclass="footer bgw">
markdown内容渲染框架 ©2017-2017
<astyle="margin-left:20px;color:#20a53a;"href="http://github.com/sixtrees/strapdownify"target="_blank">strapdownify on github</a></div></div><scriptsrc="./static/js/jquery-1.10.2.min.js"></script><scriptsrc="./static/js/bootstrap.min.js"></script><scriptsrc="./static/layer/layer.js"></script><scriptsrc="../strapdown/strapdown.js"></script><script>
var loadT = layer.msg('正在加载...', {icon: 16,time: 0,shade: [0.3,'#000']});
$.ajax({url: 'readme.md',type: "POST",dataType: "text",success: function(data){markdownFromText(data,"mdcontent");layer.close(loadT);}});
</script></body></html>