Node.js 學習筆記：構建 Web 服務

例3. 構建 Web 服務器

這部分示例將致力于用 Node.js 模擬一個類似于 Apache 的 Web 服務器，處理瀏覽器端的請求，將相關的頁面響應給瀏覽器。首先，我們要在code目錄下執行mkdir 03_webSever命令來創建用于存放這一組示例的目錄。然后執行以下步驟：

在code/03_webSever目錄下執行mkdir www命令，創建網站目錄，然后在其中創建index.htm和login.htm兩個 HTML 文件以及一個名為style.css的 CSS 文件：

1、index.htm:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>首頁</title>
</head>
<body>
<h1>你好,nodejs！</h1>
<p> <a href="login.htm">請登錄！</a> </p>
</body>
</html>

2、login.htm:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>登錄頁面</title>
</head>
<body>
<h1>你已經登錄。。。</h1>
<p> <a href="index.htm">回首頁！</a> </p>
</body>
</html>

3、style.css:

body { 
background: gray; 
}

2、在code/03_webSever目錄下執行touch 03-webServer.js命令，創建腳本文件，并輸入如下代碼：

const http = require('http')
const fs = require('fs')
const server = http.createServer()

server.on('request', function(req, res) {
const webRoot = './www'
const url = req.url
if ( url === '/' ) {
url = '/index.htm'
}

fs.readFile(webRoot+url, function(err, data) {
if ( err !== null ) {
console.error('錯誤信息：' + err.message)
return res.end('<h1>404 頁面沒找到！</h1>')
}
res.end(data)
})
})

server.listen(8080, function(){
console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

3、保存所有文件后，在code/03_webSever目錄下執行node 03-webServer.js命令，然后打開瀏覽器并訪問http://localhost:8080/，就會看到如下頁面：

示例4. 使用art-template模版引擎生成網頁

這一部分本示例將以生成個人信息頁面為例，演示在服務器端基于 Node.js 使用art-template模板引擎來生成網頁。為此，我們需要在code目錄下執行mkdir 04_templatingEngine命令來創建用于存放這一組示例的目錄。

1. 單模版渲染

首先來示范一下如何使用art-template模版引擎的渲染單一模版文件，請跟著以下步驟來構建示例：

在code/04_templatingEngine目錄下執行npm install art-template --save命令，安裝將art-template包安裝到當前示例項目中。
在code/04_templatingEngine目錄下執行touch singleTpl.htm命令，創建一個模版文件，并在其中輸入以下代碼：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>{{ name }}的個人信息</title>
</head>
<body>
<h1>{{ name }}的個人信息</h1>
<table>
<tr><td>姓名：</td><td>{{ name }}</td></tr>
<tr><td>年齡：</td><td>{{ age }}</td></tr>
<tr><td>性別：</td><td>{{ sex }}</td></tr>
<tr>
<td>愛好：</td>
<td>{{ each items }} {{ $value }} {{ /each }}</td>
</tr>
</table>
</body>
</html>

3、在code/04_templatingEngine目錄下執行touch 04-useTemplating_engine.js命令，創建一個腳本文件，具體如下：

const http = require('http')
const fs = require('fs')
const template = require('art-template')

class human {
constructor(name, age, sex, items=[])
{
this.name = name
this.age = age
this.sex = sex
this.items = items
}
}

const server = http.createServer()

server.on('request', function(req, res){
const url = req.url
let boy = null
if ( url === '/' ) {
boy = new human('凌杰', '37', '男', ['看書', '看電影','旅游'])
} else if ( url === '/wang' ) {
boy = new human('蔓兒', '25', '女', ['看書', '看電影','寫作'])
}

if ( boy === null ) {
return res.end('<h1>404 頁面沒找到！</h1>')
}

fs.readFile('./singleTpl.htm', function(err, data){
if ( err !== null ) {
return res.end('<h1>404 沒找到模版文件！</h1>')
}

const strHtml = template.render(data.toString(), {
name : boy.name,
age : boy.age,
sex : boy.sex,
items: boy.items
})

res.end(strHtml)
})
})

server.listen(8080, function(){
console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

4、保存所有文件后，在code/04_templatingEngine目錄下執行node 04-useTemplating_engine.js命令，然后打開瀏覽器并訪問http://localhost:8080/wang，就會看到如下頁面：

2. 多模版組合渲染

在同一 Web 應用中，所有的頁面通常都由相同的頭部和底部元素，所以為了減少代碼的冗余，提高重用率，開發者們通常會考慮將重復的部分獨立成一個單獨的模版文件，然后用相互包含的方式組合成頁面。下面就繼續以art-template模板引擎為例來演示一下如何將多個模版組合渲染成單一的 HTML 頁面，其具體步驟如下：

在code/04_templatingEngine目錄下執行touch tpl1.art tpl2.art命令，創建兩個模版文件，然后在這兩個文件中分別輸入以下代碼：

1、tpl1.art :

<header>
<h1>查看個人信息</h1>
<br>
</header>

2、tpl2.art ：

<footer>
<div>
<p>? 2016 owlman.org；本站系純HTML5站點。</p>
</div>
</footer>

2、在code/04_templatingEngine目錄下執行touch multiTpl.htm命令創建用于組合的 HTML 頁面文件，并在其中輸入以下代碼：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>查看個人信息</title>
</head>
<body>
{{ include './tpl1.art' }}
<h2>{{ name }}的個人信息</h2>
<table>
<tr><td>姓名：</td><td>{{ name }}</td></tr>
<tr><td>年齡：</td><td>{{ age }}</td></tr>
<tr><td>性別：</td><td>{{ sex }}</td></tr>
<tr>
<td>愛好：</td>
<td>{{ each items }} {{ $value }} {{ /each }}</td>
</tr>
</table>
{{ include './tpl2.art' }}
</body>
</html>

3、在code/04_templatingEngine目錄下執行

cp 04-useTemplating_engine.js 04-useTemplating_engine2.js命令，將之前的代碼復制一份，并修改如下：

const http = require('http')
const fs = require('fs')
const template = require('art-template')

template.defaults.root = __dirname // 配置模版的查找根目錄

class human {
constructor(name, age, sex, items=[])
{
this.name = name
this.age = age
this.sex = sex
this.items = items
}
}

const server = http.createServer()

server.on('request', function(req, res){
const url = req.url
let boy = null
if ( url === '/' ) {
boy = new human('凌杰', '37', '男', ['看書', '看電影','旅游'])
} else if ( url === '/wang' ) {
boy = new human('蔓兒', '25', '女', ['看書', '看電影','寫作'])
}

if ( boy === null ) {
return res.end('<h1>404 頁面沒找到！</h1>')
}

fs.readFile('./multiTpl.htm', function(err, data){ // 修改了要讀取的模版文件
if ( err !== null ) {
return res.end('<h1>404 沒找到模版文件！</h1>')
}

const strHtml = template.render(data.toString(), {
name : boy.name,
age : boy.age,
sex : boy.sex,
items: boy.items
})

res.end(strHtml)
})
})

server.listen(8080, function(){
console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

4、保存所有文件后，在code/04_templatingEngine目錄下執行node 04-useTemplating_engine2.js命令，然后打開瀏覽器并訪問http://localhost:8080，就會看到如下頁面：

3. 多模版繼承渲染

當然，如果重復的元素只有頭部和尾部的話，有時候使用模版繼承語法來渲染頁面會是一個更好的選擇，下面就來繼續演示一下art-template模板引擎的繼承語法來渲染 HTML 頁面，其具體步驟如下：

在code/04_templatingEngine目錄下執行touch baseTpl.art命令，創建父模版文件，然后在該文件中輸入以下代碼：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>{{ name }}的個人信息</title>
</head>
<body>
<header>
<h1>查看個人信息</h1>
<br>
</header>

{{ block 'message' }}
{{ /block }}

<footer>
<div>
<p>? 2016 owlman.org；本站系純HTML5站點。</p>
</div>
</footer>
</body>
</html>

2、在code/04_templatingEngine目錄下執行touch extendTpl.htm命令，創建子模版文件，然后在該文件中輸入以下代碼：

{{ extend 'baseTpl.art' }}

{{ block 'message' }}
<h1>{{ name }}的個人信息</h1>
<table>
<tr><td>姓名：</td><td>{{ name }}</td></tr>
<tr><td>年齡：</td><td>{{ age }}</td></tr>
<tr><td>性別：</td><td>{{ sex }}</td></tr>
<tr>
<td>愛好：</td>
<td>{{ each items }} {{ $value }} {{ /each }}</td>
</tr>
</table>
{{ /block }}

3、在code/04_templatingEngine目錄下執行cp 04-useTemplating_engine.js 04-useTemplating_engine3.js命令，將之前的代碼復制一份，并修改如下：

// 用Node.js生成動態頁面
// 作者：owlman
// 時間：2019年07月12日

const http = require('http')
const fs = require('fs')
const template = require('art-template')

template.defaults.root = __dirname

class human {
constructor(name, age, sex, items=[])
{
this.name = name
this.age = age
this.sex = sex
this.items = items
}
}

const server = http.createServer()

server.on('request', function(req, res) {
const url = req.url
let boy = null
if (url === '/') {
boy = new human('凌杰', '37', '男', ['看書', '看電影','旅游'])
} else if (url === '/wang') {
boy = new human('蔓兒', '25', '女', ['看書', '看電影','寫作'])
}

if (boy === null) {
return res.end('<h1>404 頁面沒找到！</h1>')
}

fs.readFile('./extendTpl.htm', function(err, data) {
if ( err !== null ) {
return res.end('<h1>404 沒找到模版文件！</h1>')
}

const strHtml = template.render(data.toString(), {
name : boy.name,
age : boy.age,
sex : boy.sex,
items: boy.items
})

res.end(strHtml)
})
})

server.listen(8080, function(){
console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

4、保存所有文件后，在code/04_templatingEngine目錄下執行node 04-useTemplating_engine3.js命令，然后打開瀏覽器并訪問http://localhost:8080，就會看到與之前相同的頁面。

示例5. Web 表單處理

這一部分示例將致力于演示用 Node.js 處理 Web 表單，我們將會分別示范如何用get和post兩種方法來處理表單的請求。首先，我們要在code目錄下執行mkdir 05_webForm命令來創建用于存放這一組示例的目錄。

1. get 方法

先用一個信息查詢程序來演示一下如何處理使用get方法來發送請求的表單。首先，在code/05_webForm目錄下執行mkdir get_form命令，并執行以下步驟：

在code/05_webForm/get_form目錄下執行npm install art-template命令，將art-template安裝到當前示例項目中。
在code/05_webForm/get_form目錄下執行touch index.htm，創建一個模版文件，具體如下： <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>個人信息查詢</title>
</head>
<body>
<h1>個人信息查詢</h1>
<form action="/query" method="GET">
<label for="message">請輸入要查詢的姓名：</label>
<input type="text" name="qname" />
<input type="submit" value="查詢" />
</form>
<br />
{{ if name }}
<table>
<caption>{{ name }}的個人信息</caption>
<tr><td>姓名：</td><td>{{ name }}</td></tr>
<tr><td>年齡：</td><td>{{ age }}</td></tr>
<tr><td>性別：</td><td>{{ sex }}</td></tr>
<tr>
<td>愛好：</td>
<td>{{ each items }} {{ $value }} {{ /each }}</td>
</tr>
</table>
{{ else if query_error }}
<h2>沒有找到相關信息！</h2>
{{ /if }}
</body>
</html>

3、在code/05_webForm/get_form目錄下執行touch app.js，創建一個腳本文件，具體如下： const http = require('http')

const fs = require('fs')
const url = require('url')
const template = require('art-template')

class human {
constructor(name, age, sex, items=[])
{
this.name = name
this.age = age
this.sex = sex
this.items = items
}
}

const db = [
new human('凌杰', '37', '男', ['看書', '看電影','旅游']),
new human('蔓兒', '25', '女', ['看書', '看電影','寫作']),
new human('張語', '32', '女', ['看書', '旅游','繪畫'])
]

const server = http.createServer(function(req, res){
const query = url.parse(req.url, true)
let obj = null
let query_error = false
if ( query.pathname === '/' ) {
query_error = false
}
else if (query.pathname === '/query') {
for(let i = 0; i < db.length; ++i) {
if (db[i].name == query.query["qname"]) {
obj = db[i]
}
}
if ( obj === null ) {
query_error = true
}
} else {
return res.end('<h1>404 頁面沒找到！</h1>')
}

fs.readFile('./index.htm', function(err, data){
if ( err !== null ) {
return res.end('<h1>404 沒找到模版文件！</h1>')
}

let strHtml = null
if ( obj !== null ) {
strHtml = template.render(data.toString(), {
name : obj.name,
age : obj.age,
sex : obj.sex,
items: obj.items,
query_error: query_error
})
} else {
strHtml = template.render(data.toString(), {
name : false,
query_error: query_error
})
}
res.end(strHtml)
})
})

server.listen(8080, function() {
console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

4、保存所有文件后，在code/05_webForm/get_form目錄下執行node app.js命令，結果如下：

2. post 方法

先來演示如何處理使用post方法來發送請求的表單。首先，在code/05_webForm目錄下執行mkdir post_form命令，并執行以下步驟：

在code/05_webForm/get_form目錄下執行npm install art-template命令，將art-template安裝到當前示例項目中。
在code/05_webForm/post_form目錄下執行touch index.htm，創建一個模版文件，具體如下：

 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>個人信息管理</title>
</head>
<body>
<h1>個人信息管理</h1>
<table>
<caption>個人數據表</caption>
<tr><th>姓名</th><th>年齡</th><th>性別</th><th>愛好</th></tr>
{{ each db }}
<tr>
<td>{{ $value.name }} </td>
<td>{{ $value.age }} </td>
<td>{{ $value.sex }} </td>
<td>{{ each $value.items }} {{ $value }} {{ /each }}</td>
</tr>
{{ /each }}
</table>

<form action="/add" method="POST">
<table>
<caption>錄入新人員</caption>
<tr><td>姓名：</td><td><input type="text" name="uname" /></td></tr>
<tr><td>年齡：</td><td><input type="text" name="age"></td></tr>
<tr><td>性別：</td><td><input type="text" name="sex"></td></tr>
<tr><td>愛好：</td><td><input type="text" name="items"></td></tr>
</table>
<input type="submit" value="添加" />
</form>
</body>
</html>

3、在code/05_webForm/post_form目錄下執行touch app.js，創建一個腳本文件，具體如下：

const http = require('http')
const fs = require('fs')
const url = require('url')
const querystring = require('querystring')
const template = require('art-template')

class human {
constructor(name, age, sex, items=[])
{
this.name = name
this.age = age
this.sex = sex
this.items = items
}
}

const db = [
new human('凌杰', '37', '男', ['看書', '看電影','旅游']),
new human('蔓兒', '25', '女', ['看書', '看電影','寫作']),
new human('張語', '32', '女', ['看書', '旅游','繪畫'])
]

const server = http.createServer(function(req, res){
const query = url.parse(req.url, true)
if ( query.pathname === '/' ) {
fs.readFile('./index.htm', function(err, data) {
if ( err !== null ) {
return res.end('<h1>404 沒找到模版文件！</h1>')
}

const strHtml = template.render(data.toString(), {
"db": db
})

res.end(strHtml)
})
}
else if ( query.pathname === '/add' ) {
req.on('data', function(chunk) {
const obj = querystring.parse(chunk.toString())
db.push(new human(
obj['uname'],
obj['age'],
obj['sex'],
obj['items'].split('，'),
))
})

res.writeHead(302, {
'location': `/`
})

res.end()
} else {
return res.end('<h1>404 頁面沒找到！</h1>')
}
})

server.listen(8080, function(){
console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

4、保存所有文件后，在code/05_webForm/post_form目錄下執行node app.js命令，結果如下：

、什么是 node.js?

① Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環境。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型。

② Node 是一個讓 JavaScript 運行在服務端的開發平臺，它讓 JavaScript 成為與PHP、Python、Perl、Ruby 等服務端語言平起平坐的腳本語言。

2、安裝 node.js

官網鏈接：

https://nodejs.org/zh-cn/

安裝完成在終端里輸入 node -v

當出現對應的 node 版本號，即安裝成功。

下面執行 js 方法就是一貫通用的用 node 名字.js

3、全局函數

全局函數：簡單理解就是放在 js 中任何地方都能執行。像 setTimeout 和 console 就是全局函數。

箭頭函數：又叫匿名函數，簡化函數的寫法。箭頭函數的好處：解決了this在function為undefined的問題。

4、回調函數

有個比方說的很形象，有一家旅館提供叫醒服務，但是要求旅客自己決定叫醒的方法?？梢允谴蚩头侩娫?，也可以是派服務員去敲門，睡得死怕耽誤事的，還可以要求往自己頭上澆盆水。這里，“叫醒”這個行為是旅館提供的，相當于庫函數，但是叫醒的方式是由旅客決定并告訴旅館的，也就是回調函數。而旅客告訴旅館怎么叫醒自己的動作，也就是把回調函數傳入庫函數的動作，稱為登記回調函數。

5、導出和導入模塊

① 導入單個函數

為了讓Node.js的文件可以相互調用，Node.js提供了一個簡單的模塊系統。

app.js

以上實例中，代碼 require('./count_module') 引入了當前目錄下的 count_module.js 文件（./ 為當前目錄，node.js 默認后綴為 js）。

Node.js 提供了 exports 和 require 兩個對象，其中 exports 是模塊公開的接口，require 用于從外部獲取一個模塊的接口，即所獲取模塊的 exports 對象。

count_module.js

在以上示例中，count_module.js 通過 exports 對象把 counter 作為模塊的訪問接口，在 app.js 中通過 require('./count_module') 加載這個模塊，然后就可以直接訪問 count_module.js 中 exports 對象的成員函數了。

在終端執行 node app.js 輸出：

② 導入多個函數

app.js

count_module.js

6、事件

7、文件讀寫

8、刪除文件和創建文件夾

9、web 服務器

app.js

輸出：

網頁：

10、路由

① 入口文件

app.js

② server_路由.js

11、路由重構代碼

app.js

server_重構路由.js

router.js

handler.js

過一個階段測試，終于找到兩個 markdown 轉 html 并實現代碼高亮的工具，并以最簡代碼（幾十行）實現了炫酷的展示效果。步驟很少，也很簡單，零基礎也應該一看就會。往下看吧......，需要安裝有Node環境哦！

1 緣起

因為markdown 文檔編輯器具有語法簡單、文件簡潔、標準化、使用廣泛等特點，所以一直習慣采用 markdown 編輯器寫文章，但仍有一些網站不支持 markdown 編輯器，想嘗試將 markdown 轉成 html 再發布，采用 Javascript 來實現，尤其想達到 CSDN 博客、簡書這樣的展示效果。

圖1 CSDN 博客 markdown 文章及代碼塊高亮效果

圖2 簡書 markdown 文章及代碼高亮效果

2 插件選擇及應用模式

2.1 插件選擇

2.1.1 markdown 轉 html 插件

比較常用的 M2H 插件有：

Markdown-it 中文：https://markdown-it.docschina.org/ github：https://github.com/markdown-it/markdown-it
Marked 官網：https://marked.js.org/ github：https://github.com/markedjs/marked

從網上獲得的 markdown-it 和 marked 的比較，主要表現在：在性能、使用簡單程度、正則解析（中文支持）方面，marked 比較好；在擴展性上，markdown-it 表現則更好一些。由于 markdown 應用比較成熟，而且一般使用也不會太復雜，所以選擇性能好、中文支持好的 marked，至于 marked 的擴展性，也嘗試了一下，滿足常見的應用是沒問題的。

2.1.2 代碼塊高亮模塊

代碼塊高亮插件有：

heiglightjs 官網：https://highlightjs.org/ github：https://github.com/highlightjs/highlight.js
prismjs 官網：https://prismjs.com/ github：https://github.com/PrismJS/prism

對 heiglightjs 和 prismjs 分別做了簡單測試，發現 prismjs 使用非常簡單，易于上手，且代碼精簡，效率高，而 heiglightjs 相對比較復雜，使用起來不習慣，也許是各人喜好不同吧。所以選擇使用 prismjs 插件。

2.2 插件應用模式

M2H 一般有兩種應用模式：一種是前端渲染，如在 vue 中使用；另一種是在后端生成 html 文件，在瀏覽器展示，如在 node 中使用。此處我選擇在 node 中生產靜態 html 文件的應用模式，用戶可以在電腦端當作 markdown 轉 node 的工具使用；至于前端渲染，vue 頁面打包時總會包含一個 chunk-vendors.js 文件，會引起頁面加載變慢，有很多辦法壓縮該文件，但這已經超出了 M2H 的范疇了，在此不再贅述。

3 計劃實現的功能

讀取指定 mardown 文件（test.md），生成目標 html 文件（test.html）——測試 marked 插件解析及渲染功能
html 文件根據代碼塊對應的語言進行高亮顯示——測試 prismjs 插件的 language 語言包功能
html 文件實現顯示語言名稱、“復制”按鈕、行號——測試 prismjs 插件的 Plugins 功能
自定義代碼塊的顯示樣式修改——測試拓展功能
最終實現的界面如下圖：

圖3 最終實現的markdown 轉化及代碼塊渲染效果

4 編碼實現

4.1 準備工作

4.1.1 創建項目

創建目錄：marked-prismjs，使用 vsCode 打開該目錄。

4.1.2 安裝插件

在 vsCode 里的終端輸入相關命令進行插件安裝 1）安裝 marked 插件

npm install marked --save

2）安裝 prismjs

npm install prismjs --save

4.1.3 下載 prismjs 的 css 和 js 文件

訪問官網下載頁：https://prismjs.com/download.html

按下圖選擇 themes，我比較喜歡“Tomorrow Night” 這個主題，您可以根據自己的喜好選擇

圖4 themes 選項

Languages 選項，默認即可，如下圖，其中包含 CSS、Javascript 語言

圖5 編程語言包選項

Plugins 選項，可以根據功能需要選擇，此處選擇4個選項，依次為：行號、顯示語言名稱、工具條、復制到剪貼板的按鈕，如下圖：

圖6 插件選項

分別點擊下圖的“DOWNLOAD JS”和“DOWNLOAD CSS”按鈕下載 prism.js 和 prism.css 到項目根目錄下。

4.1.4 編寫 markdown 測試文件

編寫 markdown 測試文件：test.md，內容如下：

# 這是H1標簽

## 下面是 javascript 代碼：

```javascript let a = 1; console.log(a); ```

4.2 編寫實現轉換功能的 js 文件

創建 m2h.js 文件，內容為：

const { marked } = require('marked') // 引入 marked 模塊
const prism = require('prismjs') // 引入 prism 模塊
const fs = require('fs') // 引入文件處理模塊
const mdContent = fs.readFileSync('test.md', 'utf-8') // 讀取 markdown 文件內容
// 下面是 marked 擴展功能，當節點（token）類型是代碼（code）時，自定義渲染節點功能，及使用自定義的 renderer 函數來代替默認 renderer 函數，達到改寫當前節點生成的 html 代碼的樣式
marked.use({
    extensions: [{
        name: 'code',   
        renderer(token) {
            if (token.type === 'code') {
                let codeHtml = `<pre class="language- round"><code class="language-`+token.lang+` line-numbers">`
                codeHtml+=Prism.highlight(token.text, Prism.languages.javascript, 'javascript')
                codeHtml+=`</code></pre>`
                return codeHtml
            }
        }
    }]
})
// 定義 html 文件頭部代碼
var htmlContent=`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="prism.css">
    <script src="prism.js"></script>
</head>
<style>
  .round {
    box-shadow: 10px 10px 5px #888888;
    border-radius: 10px;
  }
</style>
<body>
`
htmlContent += marked.parse(mdContent) // 疊加上 marked 生成的 html 代碼
htmlContent+=`</body> // 疊加底部代碼（補齊）
</html>`
fs.writeFileSync('test.html', htmlContent) // 將最終的 html 內容寫入到文件 test.html

測試運行：

node m2h.js

每運行一次，就會重新生成新的 test.html 文件。

在 vsCode 里鼠標右鍵點擊 test.html 文件，選擇“Open with Live Server”，

圖7 Open with LiveServer

會在瀏覽器里打開 test.html 頁面，test.md 已經成功生成了 test.html，實現了代碼塊高亮、語言顯示及拷貝按鈕及行號。得到的最終結果如下圖：

圖8 效果展示

達到了當初計劃實現的功能需求。

5 總結

以上通過簡單的幾十行代碼就實現了如此炫酷的功能展示，體現了插件的強大功能，同時通過自定義擴展節點渲染函數，也展現了插件的靈活性和可擴展性。此次測試僅僅是個引子，后續會繼續進行研究和測試，感興趣請收藏、關注，方便共同學習、進步。

在線咨詢

上一篇：PDF轉HTML格式如何轉？看完這篇你就會了
下一篇：「CSS」將多個div元素并列為一行的方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Node.js 學習筆記：構建 Web 服務

例3. 構建 Web 服務器

示例4. 使用art-template模版引擎生成網頁

1. 單模版渲染

2. 多模版組合渲染

3. 多模版繼承渲染

示例5. Web 表單處理

1. get 方法

2. post 方法

1 緣起

2 插件選擇及應用模式

2.1 插件選擇

2.1.1 markdown 轉 html 插件

2.1.2 代碼塊高亮模塊

2.2 插件應用模式

3 計劃實現的功能

4 編碼實現

4.1 準備工作

4.1.1 創建項目

4.1.2 安裝插件

4.1.3 下載 prismjs 的 css 和 js 文件

4.1.4 編寫 markdown 測試文件

4.2 編寫實現轉換功能的 js 文件

5 總結

您的項目需求