目录
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');
})
压缩前
压缩后