目录
Markdown 转为 html
安装
ejs语法
标签含义
1. 纯文本标签
2. 输出经过 HTML 转义的内容
3. 输出非转义的内容(原始内容)
marked
browserSync
zlib
gzip
deflate
gzip 和 deflate 区别
http请求压缩
Markdown 转为 html
什么是markdown？
Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。
实现该功能需要的三个库：
1. ejs 一款强大的JavaScript模板引擎，它可以帮助我们在HTML中嵌入动态内容。使用EJS，您可以轻松地将Markdown转换为美观的HTML页面。
2. marked 一个流行的Markdown解析器和编译器，它可以将Markdown语法转换为HTML标记。Marked是一个功能强大且易于使用的库，它为您提供了丰富的选项和扩展功能，以满足各种转换需求。
3. browserSync 一个强大的开发工具，它可以帮助您实时预览和同步您的网页更改。当您对Markdown文件进行编辑并将其转换为HTML时，BrowserSync可以自动刷新您的浏览器，使您能够即时查看转换后的结果。
安装
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字符
const text = '<p>你好你好</p>'
<h2><%= text %></h2> // 输出 <p>你好你好</p> 插入 <h2> 标签中
3. 输出非转义的内容(原始内容)
<%- 富文本数据 %> 通常用于输出富文本，即 HTML内容
上面说到<%=会转义HTML字符，那如果我们就是想输出一段HTML怎么办呢？
<%-不会解析HTML标签，也不会将字符转义后输出。像下例，就会直接把 <p>我来啦</p> 插入
const content = '<p>标签</p>'
<h2><%- content %></h2>
以上三个就是我们这次案例需要用的内容，如果想学习更对api，请浏览官方文档
template.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %>></title>
</head>
<body>
<%- content %>
</body>
</html>marked
将md转换为html
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
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 模块的主要作用
1. 数据的压缩解压缩
2. 流压缩：zlib 模块支持使用流（Stream）的方式进行数据的压缩和解压缩。这种方式使得可以对大型文件或网络数据流进行逐步处理，而不需要将整个数据加载到内存中
3. 压缩格式支持：zlib 模块支持多种常见的压缩格式，如 Gzip 和 Deflate。这些格式在各种应用场景中广泛使用，例如 HTTP 响应的内容编码、文件压缩和解压缩等
案例：
gzip
使用gzip压缩文件
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的方式解压文件
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压缩文件
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解压文件
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请求压缩
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');
})压缩前
压缩后
