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

這篇文章主要為大家展示了“前端怎么實現.md文件轉換成.html文件”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“前端怎么實現.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">    <h2 class="title">md-to-HTML web app</h2>    <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>

以上是“前端怎么實現.md文件轉換成.html文件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！