让你的站点也支持MarkDown（10分钟就会的干货版）
2015-10-17 本文已影响1338人
蹲厕所的熊
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:
赶紧去项目中使用吧。
