簡(jiǎn)書(shū)md文檔在線(xiàn)轉(zhuǎn)化成html文檔的能力一直是簡(jiǎn)書(shū)的一大特色莱睁，我也來(lái)試試如何制作一個(gè)只有核心功能（md轉(zhuǎn)化為HTML）的“簡(jiǎn)書(shū)”
效果圖
img_1.png
標(biāo)題沒(méi)有認(rèn)真調(diào)整格式加勤，但是其他部分看起來(lái)是不是和簡(jiǎn)書(shū)超級(jí)像呢牺蹄？感興趣的話(huà)就一起來(lái)和我完成屬于自己的“簡(jiǎn)書(shū)吧”愧捕。
實(shí)現(xiàn)
實(shí)現(xiàn)原理是采用node.js搭建服務(wù)器由捎，讀取md文件轉(zhuǎn)化為html片斷捆愁。瀏覽器發(fā)送ajax請(qǐng)求獲取片段后再渲染生成html網(wǎng)頁(yè)穆趴。原理其實(shí)很簡(jiǎn)單呢脸爱，對(duì)不？準(zhǔn)備好就開(kāi)始動(dòng)手吧未妹。
搭建node.js服務(wù)器
var express = require('express');
var http = require('http');
var fs = require('fs');
var bodyParser = require('body-parser');
var marked = require('marked'); // 將md轉(zhuǎn)化為html的js包
var app = express();
app.use(express.static('src')); //加載靜態(tài)文件
var urlencodedParser = bodyParser.urlencoded({ extended: false });
app.get('/getMdFile',urlencodedParser, function(req, res) {
var data = fs.readFileSync('src/test.md', 'utf-8'); //讀取本地的md文件
res.end(JSON.stringify({
body : marked(data)
}));
} );
//啟動(dòng)端口監(jiān)聽(tīng)
var server = app.listen(8088, function () {
var host = server.address().address;
var port = server.address().port;
console.log("應(yīng)用實(shí)例簿废，訪(fǎng)問(wèn)地址為 http://%s:%s", host, port)
});
安裝好依賴(lài)包，服務(wù)器就可以愉快地跑起來(lái)了~
HTML結(jié)構(gòu)
重要的就是發(fā)送請(qǐng)求獲取數(shù)據(jù)啦络它，把取到的數(shù)據(jù)填充到div中即可族檬。
<div id="content">
<h1 class="title">md-to-HTML web app</h1>
<div id="article">
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script>
var article = document.getElementById('article');
$.ajax({
url: "/getMdFile", success: function(result) {
console.log('數(shù)據(jù)獲取成功');
article.innerHTML = JSON.parse(result).body;
}, error: function (err) {
console.log(err);
article.innerHTML = '<p>獲取數(shù)據(jù)失敗</p>';
}
});
</script>
再根據(jù)簡(jiǎn)書(shū)的樣式添加上CSS樣式，一個(gè)小小的“簡(jiǎn)書(shū)”就實(shí)現(xiàn)了酪耕。
有興趣的童鞋可以去github上下載源碼导梆，飛機(jī)票。
