前端實現.md文件轉換成.html文件

 方式一：使用i5ting_toc插件

需要先安裝npm（安裝node.js后會自帶npm），然后才能安裝i5ting插件：

npm install i5ting_toc -g

執行命令行生成html文件，在輸入前要進入到對應根目錄下：

i5ting_toc -f **.md

需要注意的是：寫md文檔的特殊符號時記得添加空格。

小技巧：如何快速在當前目錄打開cmd？選擇當前目錄，按住shift，然后鼠標右鍵在此處打開命令窗口(在此處打開powerShell窗口)。

 

方式二：使用gitbook

同樣先需要安裝node，然后運行

npm i gitbook gitbook-cli -g

生成md文件,這個命令會生成相應的md的文件，然后在相應的文件里寫你的內容即可:

gitbook init 

md轉html,生成一個_doc目錄，打開就可以看到你html文件了。

gitbook build 

http://www.ssnd.com.cn 化妝品OEM代加工

方式三：利用前端代碼

實現原理是采用node.js搭建服務器，讀取md文件轉化為html片斷。瀏覽器發送ajax請求獲取片段后再渲染生成html網頁。  

node代碼

var express = require('express');
var http = require('http');
var fs = require('fs');
var bodyParser = require('body-parser');
var marked = require('marked'); // 將md轉化為html的js包
var app = express();

app.use(express.static('src')); //加載靜態文件
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)
 }));
} );

//啟動端口監聽
var server = app.listen(8088, function () {
 var host = server.address().address;
 var port = server.address().port;
 console.log("應用實例，訪問地址為 http://%s:%s", host, port)
});

前端html：

<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('數據獲取成功');
 article.innerHTML = JSON.parse(result).body;
 }, error: function (err) {
 console.log(err);
 article.innerHTML = '<p>獲取數據失敗</p>';
 }
 });
</script>