在网页中可以通过textarea这个控件进行文本编辑，但是这个方式有点呆，而且不好看。现在记录文章用得比较多的是markdown，那么在自己的网站中集成一个markdown进行文章的记录是一件比较爽的事，而且可以不需要搞很多添加效果的按钮，比如像分段、分行、插入代码这些功能通过markdown语法就可以进行实现了
第一步
下载开源库：
showdown.js
第二步
将showdown.js这个文件导入文件的根目录中
第三步
在要使用markdown的页面中引入showdown.js文件中的showdown.min.js文件
<script type="text/javascript" src="showdown-master/dist/showdown.min.js"></script>
第四步
定义一个方法：获取markdown中的内容，将内容进行转化，将转化后的内容显示在指定位置
function compile() {
// 获取想要转换的文字
var text = document.getElementById("content").value;
// 创建实例
var converter = new showdown.Converter();
// 进行转换
var html = converter.makeHtml(text);
// 将内容显示到指定的地方
document.getElementById("result").innerHTML = html;
}
全部实现代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="showdown-master/dist/showdown.min.js"></script>
<script type="text/javascript">
function compile() {
// 获取想要转换的文字
var text = document.getElementById("content").value;
// 创建实例
var converter = new showdown.Converter();
// 进行转换
var html = converter.makeHtml(text);
// 将内容显示到指定的地方
document.getElementById("result").innerHTML = html;
}
</script>
<style type="text/css">
/*自定义代码显示效果*/
code {
color: #D34B62;
background: #fdffbd;
}
#wrap{
margin: auto;
overflow: hidden;
}
#mark{
width: 40%;
height: 800px;
float: left;
}
#result{
width: 40%;
height: 800px;
float: left;
background-color: #27bbff;
}
</style>
<div id="wrap">
<div id="mark">
<!--通过onkeyup方法实现实时显示-->
<textarea id="content" onkeyup="compile()" style="width: 100%;height: 100%;"></textarea>
</div>
<div id="result"></div>
</div>
</body>
</html>
实现效果
