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

简介: 【8月更文挑战第19天】

目录

Markdown 转为 html

安装

ejs语法

标签含义

  1. 纯文本标签
  1. 输出经过 HTML 转义的内容

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

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') %> // 会执行弹框

  1. 输出经过 HTML 转义的内容
    <%= value %> 可以是变量
    <%= a ? b : c %> 也可以是表达式

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

const text = '

你好你好

'

<%= text %>

// 输出 <p>你好你好</p> 插入

标签中

  1. 输出非转义的内容(原始内容)
    <%- 富文本数据 %> 通常用于输出富文本,即 HTML内容
    上面说到<%=会转义HTML字符,那如果我们就是想输出一段HTML怎么办呢?

<%-不会解析HTML标签,也不会将字符转义后输出。像下例,就会直接把

我来啦

插入

const content = '

标签

'

<%- content %>


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

template.ejs

<!DOCTYPE html>





<%- content %>


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');

相关文章
|
6天前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
7天前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
8天前
|
JavaScript 前端开发 API
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
该文章跟随月影老师的指导,探讨了编写优质JavaScript代码的三大原则:各司其职、组件封装与过程抽象,通过具体示例讲解了如何在实际开发中应用这些原则以提高代码质量和可维护性。
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
|
9天前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
25 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
9天前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
14 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
9天前
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板,通过动态调整分割条来改变面板的大小,支持水平和垂直分割。
16 2
Twaver-HTML5基础学习(38)劈分面板SplitPane
|
6天前
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
26 9
|
7天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
12 5
|
7天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
8 4
|
9天前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
14 5
下一篇
无影云桌面