markdown.jpg
MarkDown現(xiàn)在越來越多的網(wǎng)站支持了虚吟，因?yàn)樗暮?jiǎn)單得體而不失漂亮邀摆，被越來越多的人使用。
digitcv簡(jiǎn)歷網(wǎng)用markdown做出來的簡(jiǎn)單深受我的喜愛洁奈。
CSDN 博客也越來越多的使用它來編輯文章间唉。
當(dāng)然還有我們的大簡(jiǎn)書。
不過這些網(wǎng)站支持的markdown功能都不是很全睬魂，就比如簡(jiǎn)書吧终吼，我有的時(shí)候想在文章里定義一些章節(jié)，并且需要點(diǎn)擊一個(gè)鏈接跳到指定的鏈接那氯哮，可是簡(jiǎn)書就沒有這一功能际跪，有時(shí)候?qū)懸恍╅L(zhǎng)篇的有段落的文章，就無法通過目錄點(diǎn)到相應(yīng)地方閱讀喉钢。還有挺多功能不存在的姆打。
那么如果你想在自己的站點(diǎn)實(shí)現(xiàn)markdown的話，其實(shí)很簡(jiǎn)單肠虽。保證10分鐘之內(nèi)你就會(huì)幔戏。
首先，我們必須要明白一點(diǎn)的是税课，之所以在網(wǎng)站中可以使用markdown是因?yàn)閙arkdown可以導(dǎo)出html闲延，所以我們做的就是把markdown轉(zhuǎn)換成html就ok了。
關(guān)于markdown轉(zhuǎn)換成html韩玩，網(wǎng)上已經(jīng)有開源的js庫了垒玲，我們沒有必要再去重復(fù)造輪子，這里我們使用開源項(xiàng)目showdown.js：GitHub地址
這個(gè)插件使用方法十分簡(jiǎn)單找颓，使用方法如下：
var converter = new showdown.Converter(),
text = '#hello, markdown!',
html = converter.makeHtml(text);
最后一行代碼合愈，makeHtml()這個(gè)方法會(huì)返回導(dǎo)出的html代碼，然后我們將其顯示出來就可以了。
下面我們下載showdownjs佛析，放到本地益老，寫一個(gè)demo來測(cè)試一下，我們新建一個(gè)html文件寸莫，添加js引用捺萌，代碼如下：
<head>
<title>測(cè)試MarkDown生成</title>
<script type="text/javascript" src="showdown.js"></script>
</head>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
font-size: 16px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
ul li {
line-height: 24px;
}
blockquote {
border-left:#eee solid 5px;
padding-left:20px;
}
code {
color:#D34B62;
background: #F9F2F4;
}
</style>
<body>
<div>
<textarea id="content" style="height:300px;width:500px;" onkeyup="compile()"></textarea>
<div id="result"></div>
</div>
<script type="text/javascript">
function compile () {
var text = document.getElementById("content").value;
var converter = new showdown.Converter();
//支持顯示如同github的勾選框，默認(rèn)false
//ep: - [x] This task is done
converter.setOption("tasklists", true);
//支持顯示table储狭，默認(rèn)false
converter.setOption("tables", true);
//支持圖片大小設(shè)置互婿，默認(rèn)為false
converter.setOption("parseImgDimensions", true);
/**
**更多地請(qǐng)看https://github.com/showdownjs/showdown文檔
**/
var html = converter.makeHtml(text);
document.getElementById("result").innerHTML = html;
}
</script>
</body>
</html>```
演示demo:
趕緊去項(xiàng)目中使用吧。