学习 node.js 六 Markdown 转为 html,zlib

[Markdown 转为 html](#Markdown 转为 html)

安装

ejs语法

标签含义

[1. 纯文本标签](#1. 纯文本标签)

[2. 输出经过 HTML 转义的内容](#2. 输出经过 HTML 转义的内容)

[3. 输出非转义的内容(原始内容)](#3. 输出非转义的内容(原始内容))

[gzip 和 deflate 区别](#gzip 和 deflate 区别)

http请求压缩

Markdown 转为 html

什么是markdown？

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。

实现该功能需要的三个库：

ejs 一款强大的JavaScript模板引擎，它可以帮助我们在HTML中嵌入动态内容。使用EJS，您可以轻松地将Markdown转换为美观的HTML页面。
marked 一个流行的Markdown解析器和编译器，它可以将Markdown语法转换为HTML标记。Marked是一个功能强大且易于使用的库，它为您提供了丰富的选项和扩展功能，以满足各种转换需求。
browserSync 一个强大的开发工具，它可以帮助您实时预览和同步您的网页更改。当您对Markdown文件进行编辑并将其转换为HTML时，BrowserSync可以自动刷新您的浏览器，使您能够即时查看转换后的结果。

安装

javascript 复制代码

npm i ejs marked browser-sync

ejs语法

详情请参照官方文档：EJS -- 嵌入式 JavaScript 模板引擎 | EJS 中文文档 (bootcss.com)

标签含义

<% '脚本' 标签，用于流程控制，无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板（输出是转义 HTML 标签）
<%- 输出非转义的数据到模板
<%# 注释标签，不执行、不输出内容
<%% 输出字符串 '<%'
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

1. 纯文本标签

<% code %>

里面可以写任意的 js，用于流程控制，无任何输出。（在页面上没有内容）

例如：

<% alert('hello world') %> // 会执行弹框

2. 输出经过 HTML 转义的内容

<%= value %> 可以是变量
<%= a ? b : c %> 也可以是表达式

什么是输出经过 HTML 转义的内容呢？即变量如果包含 '<'、'>'、'&'等HTML字符，会被转义成字符实体，像< > &因此用<%=，最好保证里面内容不要有HTML字符

html 复制代码

const text = '<p>你好你好</p>'
<h2><%= text %></h2> // 输出 &lt;p&gt;你好你好&lt;/p&gt; 插入 <h2> 标签中

3. 输出非转义的内容(原始内容)

<%- 富文本数据 %> 通常用于输出富文本，即 HTML内容

上面说到<%=会转义HTML字符，那如果我们就是想输出一段HTML怎么办呢？

<%-不会解析HTML标签，也不会将字符转义后输出。像下例，就会直接把 <p>我来啦</p> 插入

javascript 复制代码

const content = '<p>标签</p>'
<h2><%- content %></h2>

以上三个就是我们这次案例需要用的内容，如果想学习更对api，请浏览官方文档

template.ejs

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %>></title>
</head>
<body>
    <%- content %>
</body>
</html>

marked

将md转换为html

javascript 复制代码

const marked = require('marked');
const fs = require('fs');
const ejs = require('ejs');
const mdFile = fs.readFileSync("./typescript.md",{
    encoding: "utf8",
    flag: "r"
});
const htmlMd = marked.parse(mdFile)
function init() {
    ejs.renderFile("./template.ejs",{
        title: "md to html",
        content: htmlMd
    },(err, data) => {
        if(err) throw err;
        fs.writeFileSync("./typescript.html", data, {
            encoding: "utf8",
            flag: "w"
        })
    })
}
init()

这样就基本实现了md文件转为html

但是，还是需要手动打开，且不能热加载更新需要使用browserSync

browserSync

javascript 复制代码

const marked = require('marked');
const fs = require('fs');
const ejs = require('ejs');
const browserSync = require('browser-sync');
function openBrowser() {
    const bs = browserSync.create();
    bs.init({
      server: {
          baseDir: "./",
          index: "typescript.html"
      }
    })
    return bs
}
function init() {
    const mdFile = fs.readFileSync("./typescript.md",{
        encoding: "utf8",
        flag: "r"
    });
    const htmlMd = marked.parse(mdFile)
    ejs.renderFile("./template.ejs",{
        title: "md to html",
        content: htmlMd
    },(err, data) => {
        if(err) throw err;
        let writeStream = fs.createWriteStream("./typescript.html");
        writeStream.write(data);
        writeStream.end();
        writeStream.on('finish', () => {
            openBrowser()
        })
    })
}
init()

采用写入流的方式，是因为写入流可以监听写入完成的事件

zlib

在 Node.js 中，zlib 模块提供了对数据压缩和解压缩的功能，以便在应用程序中减少数据的传输大小和提高性能。该模块支持多种压缩算法，包括 Deflate、Gzip 和 Raw Deflate。

zlib 模块的主要作用

数据的压缩解压缩
流压缩：zlib 模块支持使用流（Stream）的方式进行数据的压缩和解压缩。这种方式使得可以对大型文件或网络数据流进行逐步处理，而不需要将整个数据加载到内存中
压缩格式支持：zlib 模块支持多种常见的压缩格式，如 Gzip 和 Deflate。这些格式在各种应用场景中广泛使用，例如 HTTP 响应的内容编码、文件压缩和解压缩等

案例：

gzip

使用gzip压缩文件

javascript 复制代码

const zlib  = require('zlib');
const fs = require('fs');

// 使用gzip压缩
const readStream = fs.createReadStream('index.txt');
const writeStream = fs.createWriteStream('index.txt.gz');
readStream.pipe(zlib.createGzip()).pipe(writeStream);

使用gizp的方式解压文件

javascript 复制代码

const zlib  = require('zlib');
const fs = require('fs');

// 使用gzip解压缩
const readStream = fs.createReadStream('index.txt.gz');
const writeStream = fs.createWriteStream('index2.txt');
readStream.pipe(zlib.createGunzip()).pipe(writeStream);

deflate

使用deflate压缩文件

javascript 复制代码

const zlib  = require('zlib');
const fs = require('fs');

// 采用default压缩文件
const readStream = fs.createReadStream('index.txt');
const writeStream = fs.createWriteStream('index.txt.default');
readStream.pipe(zlib.createDeflate()).pipe(writeStream);

使用deflate解压文件

javascript 复制代码

const zlib  = require('zlib');
const fs = require('fs');

// 采用default压缩文件
const readStream = fs.createReadStream('index.txt.default');
const writeStream = fs.createWriteStream('index2.txt');
readStream.pipe(zlib.createInflate()).pipe(writeStream);

gzip 和 deflate 区别

压缩算法：Gzip 使用的是 Deflate 压缩算法，该算法结合了 LZ77 算法和哈夫曼编码。LZ77 算法用于数据的重复字符串的替换和引用，而哈夫曼编码用于进一步压缩数据。
压缩效率：Gzip 压缩通常具有更高的压缩率，因为它使用了哈夫曼编码来进一步压缩数据。哈夫曼编码根据字符的出现频率，将较常见的字符用较短的编码表示，从而减小数据的大小。
压缩速度：相比于仅使用 Deflate 的方式，Gzip 压缩需要更多的计算和处理时间，因为它还要进行哈夫曼编码的步骤。因此，在压缩速度方面，Deflate 可能比 Gzip 更快。
应用场景：Gzip 压缩常用于文件压缩、网络传输和 HTTP 响应的内容编码。它广泛应用于 Web 服务器和浏览器之间的数据传输，以减小文件大小和提高网络传输效率。

http请求压缩

javascript 复制代码

const zlib  = require('zlib');
const http = require('http');

const server = http.createServer((req, res) => {
    let str = 'hello world'.repeat(1000);
    res.setHeader('Content-Encoding', 'gzip');
    res.setHeader('Content-Type', 'text/plain;charset=utf8');
    str = zlib.gzipSync(str);
    res.end(str);
})

server.listen(3000, () => {
    console.log('server is running on port 3000');
})

压缩前

压缩后