在網頁中可以通過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>
實現效果
