前端如何實現.md文件轉換成.html文件
.md文件是markdown的一種標記語言,和html比較起來,更簡單快捷,主要體現在:標記符的數量和書寫上。
- 標記符的數量:html文檔需要用到數量繁多的標記符,再輔以css來控制樣式和排版,而markdown文檔只需要四個基本的標記符號就能完成同樣的事。
- 標記符的書寫:HTML文檔內容需要同時標記開始和結束這是一個網頁,而markdown文檔則只要在開始位置標記即可# 這是一個md文檔。下面介紹如何實現將.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
方式三:利用前端代碼
實現原理是采用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>