您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“前端怎么實(shí)現(xiàn).md文件轉(zhuǎn)換成.html文件”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“前端怎么實(shí)現(xiàn).md文件轉(zhuǎn)換成.html文件”這篇文章吧。
.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"> <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('數(shù)據(jù)獲取成功'); article.innerHTML = JSON.parse(result).body; }, error: function (err) { console.log(err); article.innerHTML = '<p>獲取數(shù)據(jù)失敗</p>'; } });</script>
以上是“前端怎么實(shí)現(xiàn).md文件轉(zhuǎn)換成.html文件”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。