markdown.jpg
MarkDown現在越來越多的網站支持了，因為它的簡單得體而不失漂亮，被越來越多的人使用。
digitcv簡歷網用markdown做出來的簡單深受我的喜愛。
CSDN 博客也越來越多的使用它來編輯文章。
當然還有我們的大簡書。
不過這些網站支持的markdown功能都不是很全，就比如簡書吧，我有的時候想在文章里定義一些章節，并且需要點擊一個鏈接跳到指定的鏈接那，可是簡書就沒有這一功能，有時候寫一些長篇的有段落的文章，就無法通過目錄點到相應地方閱讀。還有挺多功能不存在的。
那么如果你想在自己的站點實現markdown的話，其實很簡單。保證10分鐘之內你就會。
首先，我們必須要明白一點的是，之所以在網站中可以使用markdown是因為markdown可以導出html，所以我們做的就是把markdown轉換成html就ok了。
關于markdown轉換成html，網上已經有開源的js庫了，我們沒有必要再去重復造輪子，這里我們使用開源項目showdown.js：GitHub地址
這個插件使用方法十分簡單，使用方法如下：
var converter = new showdown.Converter(),
text = '#hello, markdown!',
html = converter.makeHtml(text);
最后一行代碼，makeHtml()這個方法會返回導出的html代碼，然后我們將其顯示出來就可以了。
下面我們下載showdownjs，放到本地，寫一個demo來測試一下，我們新建一個html文件，添加js引用，代碼如下：
<head>
<title>測試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的勾選框，默認false
//ep: - [x] This task is done
converter.setOption("tasklists", true);
//支持顯示table，默認false
converter.setOption("tables", true);
//支持圖片大小設置，默認為false
converter.setOption("parseImgDimensions", true);
/**
**更多地請看https://github.com/showdownjs/showdown文檔
**/
var html = converter.makeHtml(text);
document.getElementById("result").innerHTML = html;
}
</script>
</body>
</html>```
演示demo:
趕緊去項目中使用吧。