3種前端實(shí)現(xiàn).md文件轉(zhuǎn)換成.html文件的方式

來(lái)源 | http://www.fly63.com/article/detial/9641

.md文件是markdown的一種標(biāo)記語(yǔ)言，和html比較起來(lái)，更簡(jiǎn)單快捷，主要體現(xiàn)在：標(biāo)記符的數(shù)量和書(shū)寫(xiě)上。

標(biāo)記符的數(shù)量：html文檔需要用到數(shù)量繁多的標(biāo)記符，再輔以css來(lái)控制樣式和排版，而markdown文檔只需要四個(gè)基本的標(biāo)記符號(hào)就能完成同樣的事。
標(biāo)記符的書(shū)寫(xiě)：HTML文檔內(nèi)容需要同時(shí)標(biāo)記開(kāi)始和結(jié)束這是一個(gè)網(wǎng)頁(yè)，而markdown文檔則只要在開(kāi)始位置標(biāo)記即可# 這是一個(gè)md文檔。

下面介紹如何實(shí)現(xiàn)將.md文件轉(zhuǎn)換成.html文件。

方式一：使用i5ting_toc插件

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

npm install i5ting_toc -g

執(zhí)行命令行生成html文件，在輸入前要進(jìn)入到對(duì)應(yīng)根目錄下：

i5ting_toc -f **.md

需要注意的是：寫(xiě)md文檔的特殊符號(hào)時(shí)記得添加空格。

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

方式二：使用gitbook

同樣先需要安裝node，然后運(yùn)行

npm i gitbook gitbook-cli -g

生成md文件,這個(gè)命令會(huì)生成相應(yīng)的md的文件，然后在相應(yīng)的文件里寫(xiě)你的內(nèi)容即可:

gitbook init

md轉(zhuǎn)html,生成一個(gè)_doc目錄，打開(kāi)就可以看到你html文件了。

gitbook build

方式三：利用前端代碼

實(shí)現(xiàn)原理是采用node.js搭建服務(wù)器，讀取md文件轉(zhuǎn)化為html片斷。瀏覽器發(fā)送ajax請(qǐng)求獲取片段后再渲染生成html網(wǎng)頁(yè)。  

node代碼

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í)例，訪問(wèn)地址為 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('數(shù)據(jù)獲取成功');            article.innerHTML = JSON.parse(result).body;        }, error: function (err) {            console.log(err);            article.innerHTML = '<p>獲取數(shù)據(jù)失敗</p>';        }    });</script>