1. 前言
上一篇：AI 时代架构师的利器：AI + markdown + mermaid + 浏览器插件:Markdown Viewer 中，我们介绍过Markdown Viewer 中的Mermaid包的升级。但在使用中发现一些 markdown 文件转 html 时，仍然存在一些问题。这就需要升级Markdown Viewer中的Markdown转HTML工具。
2. Markdown Viewer 升级
Markdown Viewer 中有三种主要的Markdown转HTML工具：marked、markdown-it 和 remark。
简单来说，你可以这样区分它们：
marked：追求极致的快 和简单。markdown-it：追求性能与扩展性的平衡，功能全面。remark：追求强大 和可定制性，不仅能转 HTML，还能深度分析和修改 Markdown 内容。
2.1. marked、markdown-it 和 remark 对比
| 对比维度 | marked |
markdown-it |
remark |
|---|---|---|---|
| 核心定位 | 轻量、快速的纯解析器 | 高性能、可扩展的全能解析器 | 基于AST（抽象语法树）的生态化处理工具链 |
| 架构设计 | 扁平、直接。直接解析Markdown并拼接HTML字符串。 | 模块化、分层。先将文本解析为Token流，再渲染为HTML。 | 基于unified生态。先解析为mdast（Markdown AST），通过插件处理，最后输出。 |
| 性能 | 极高，解析速度非常快，适合小型文档和实时预览。 | 高 ，性能优秀。完整功能模式比marked慢一些，但切换到CommonMark模式后性能接近。 |
中等，由于AST操作和插件机制会带来额外开销，在简单场景下性能不如前两者。 |
| 扩展性 | 有限 。通过use方法扩展，但生态相对较小，自由度不高。 |
极强。拥有庞大且完善的插件生态，可以轻松添加新语法或修改渲染规则。 | 极强 (生态级)。它的强大不在于自身，而在于由上百个插件组成的生态系统，可以执行语法检查、内容转换、格式优化等复杂任务。 |
| 内存占用 | 小。约30KB，设计轻量。 | 中等。约40KB，启用插件后会更大。 | 较大。核心库按需引入，但整个生态体积可观。 |
| 学习曲线 | 低。API简单直观，配置极少，上手非常快。 | 中等。API清晰，文档完善，但如果要进行深度定制，需要理解其Token流机制。 | 陡峭。需要理解AST、unified生态和插件开发的概念。 |
| XSS安全 | 需注意 。默认不转义，建议配合DOMPurify等库使用。 |
需配置 。默认允许HTML标签，需显式设置html: false来禁止，或自行进行内容清洗。 |
较安全 。可通过rehype-sanitize等插件提供完善的安全防护。 |
2.2. 三种Markdown转HTML工具选择
2.2.1. 当你需要一个简单、快速的Markdown转HTML工具时，选 marked
如果你的需求非常直接，比如渲染用户评论、简单的博客文章，并且希望代码尽可能轻量、不引入复杂的配置，marked 是最佳选择。它专注于"解析"这一件事，并且做到了极致。
javascript
// marked 使用示例
import { marked } from 'marked';
const html = marked.parse('# Hello, marked!');
console.log(html); // 输出: <h1>Hello, marked!</h1>2.2.2. 当你需要一个功能强大、可高度定制的Markdown解析器时，选 markdown-it
如果你正在开发一个富文本编辑器、静态站点生成器，或者需要支持任务列表、脚注、自定义容器等20多种扩展语法，那么 markdown-it 是你的不二之选。它在性能、功能和扩展性之间取得了很好的平衡。
javascript
// markdown-it 使用示例
import markdownit from 'markdown-it';
const md = markdownit({ html: true, linkify: true });
const html = md.render('# Hello, markdown-it!');2.2.3. 当你需要对Markdown进行复杂的处理或转换时，选 remark
如果目的不只是将Markdown转为HTML，而是要对文档进行静态分析 （如检查拼写、统计字数）、格式转换 （如将Markdown转为React组件或PDF），或者构建复杂的文档处理流水线 （如文档自动化工具），remark 及其背后的统一（unified）生态系统是目前最强大的解决方案。
javascript
// remark 使用示例
import { remark } from 'remark';
import html from 'remark-html';
const result = await remark().use(html).process('# Hello, remark!');
console.log(String(result)); // 输出: <h1>Hello, remark!</h1>3. 升级: marked、markdown-it、remark
Markdown Viewer 中集成了：marked、markdown-it、remark 这三种编译器，用于将markdown 文件转成 Html 文件，然后在浏览器中展示。
- 见面上的三个编译器：
- 代码结构
参照下面的方法，依次升级： marked、markdown-it、remark .
3.1. 升级 marked
3.1.1. 更新版本
sh
/markdown-viewer/build/marked# ncu -u
Upgrading /markdown-viewer/build/marked/package.json
[====================] 9/9 100%
@rollup/plugin-commonjs 23.0.4 → 29.0.2
@rollup/plugin-node-resolve 15.2.3 → 16.0.3
marked 12.0.1 → 17.0.4
marked-gfm-heading-id 3.1.3 → 4.1.3
marked-linkify-it 3.1.9 → 3.1.14
marked-smartypants 1.1.6 → 1.1.11
rollup 3.29.4 → 4.59.0
terser 5.30.3 → 5.46.0
Run npm install to install new versions.- 更新后 package.json 变动如下：
3.1.2. 安装升级的版本
shell
/markdown-viewer/build/marked# npm install
added 44 packages in 3s
5 packages are looking for funding
run `npm fund` for details
/markdown-viewer/build/marked# npm fund
markdown-viewer@0.0.0
+-- https://github.com/sponsors/jonschlinkert
| `-- picomatch@4.0.3
`-- https://github.com/sponsors/ljharb
`-- resolve@1.22.11, is-core-module@2.16.1, function-bind@1.1.2, supports-preserve-symlinks-flag@1.0.03.1.3. 构建升级后的版本
shell
/markdown-viewer/build/marked# ./build.sh
added 43 packages, and audited 44 packages in 3s
5 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
marked.mjs → tmp/marked.js...
created tmp/marked.js in 576ms3.1.4. 版本的差异
从package.json 文件的变动差异，可以看到版本从：12.0.1 → 17.0.4。版本的跨度很大。
| 版本 | 发布时间 | 主要变更 |
|---|---|---|
| v17.0.4 | 2025-01 | 修复若干解析边缘情况（如嵌套列表、表格中的链接）；优化 TypeScript 类型定义。 |
| v17.0.0 | 2024-12 | 重大变更：移除对 Node.js 18 的支持，最低要求 Node.js 20；进一步精简构建产物，移除部分已弃用 API。 |
| v16.0.0 | 2024-09 | 重大变更：完全移除 CommonJS 构建，仅提供 ESM 和 UMD 格式；要求 Node.js 18+；重构内部 lexer 提升解析速度。 |
| v15.0.0 | 2024-06 | 引入新的构建工具（esbuild），显著减小包体积；修复多个与 XSS 相关的安全问题；增强自定义渲染器类型支持。 |
| v14.0.0 | 2024-03 | 重大变更：默认不再支持 <script> 等危险标签，需显式配置 mangle 选项；改进对任务列表（task lists）的解析。 |
| v13.0.0 | 2023-12 | 移除大量已弃用 API（如 marked.use() 的某些旧参数）；默认启用 GFM 脚注（footnotes）；优化列表嵌套渲染。 |
| v12.0.1 | 2023-09 | 基线版本，修复了上一版本中的一些正则表达式性能问题。 |
3.2. 升级 markdown-it
3.2.1. 更新版本
sh
/markdown-viewer/build/markdown-it# ncu -u
Upgrading /mnt/d/git/markdown_viewer/markdown-viewer/build/markdown-it/package.json
[====================] 19/19 100%
@rollup/plugin-commonjs 25.0.7 → 29.0.2
@rollup/plugin-node-resolve 15.2.3 → 16.0.3
markdown-it 13.0.1 → 14.1.1
markdown-it-abbr 1.0.4 → 2.0.0
markdown-it-anchor 8.6.7 → 9.2.0
markdown-it-attrs 4.1.6 → 4.3.1
markdown-it-cjk-breaks 1.1.3 → 2.0.0
markdown-it-deflist 2.1.0 → 3.0.0
markdown-it-footnote 3.0.3 → 4.0.0
markdown-it-ins 3.0.1 → 4.0.0
markdown-it-mark 3.0.1 → 4.0.0
markdown-it-sub 1.0.0 → 2.0.0
markdown-it-sup 1.0.0 → 2.0.0
rollup 3.29.4 → 4.60.0
terser 5.30.3 → 5.46.1
Run npm install to install new versions.- 更新后 package.json 变动如下：
3.2.2. 安装升级的版本
sh
/markdown-viewer/build/markdown-it# npm install
added 1 package, removed 2 packages, changed 2 packages, and audited 59 packages in 5s
7 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities3.2.3. 构建升级后的版本
sh
/markdown-viewer/build/markdown-it# ./build.sh
added 59 packages, and audited 60 packages in 4s
7 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
markdown-it.mjs → tmp/markdown-it.js...
created tmp/markdown-it.js in 1.2s3.2.4. 版本的差异
从package.json 文件的变动差异，可以看到版本从：13.0.1 → 14.1.1。
| 版本 | 发布时间 | 主要变更 |
|---|---|---|
| 14.1.1 | 2026-01-11 | 安全修复：修复v13版本linkify行内规则的回归问题，解决特定模式引发的高CPU占用问题 |
| 14.1.0 | 2024-03-19 | 更新CommonMark规范兼容性至0.31.2；修复解析引用的二次复杂度、表格中恶意输入导致输出大小二次增长的问题 |
| 14.0.0 | 2023-12-08 | 移除老旧浏览器支持，使用.fromCodePoint等现代特性；重构为ESM模块，保留CJS兼容（仅markdown-it-emoji插件签名变更）；移除仓库dist/文件夹，包发布时构建；将punicode.js设为外部依赖；修复图片alt内HTML令牌渲染为原始文本、alt内硬换行渲染为换行符的问题 |
| 13.0.2 | 2023-09-26 | 安全修复：修复linkify行内规则导致的崩溃/无限循环问题；修复第三方插件未递增line/pos计数器时陷入无限循环的问题，改为直接抛出错误 |
| 13.0.1 | 2022-05-03 | 升级linkify-it至4.0.1，修复该依赖返回错误数据引发的程序挂起问题 |
3.3. 升级 remark
3.3.1. 更新版本
sh
/markdown-viewer/build/remark# ncu -u
Upgrading /markdown-viewer/build/remark/package.json
[====================] 10/10 100%
@rollup/plugin-commonjs 25.0.7 → 29.0.2
@rollup/plugin-node-resolve 15.2.3 → 16.0.3
remark-gfm 4.0.0 → 4.0.1
remark-slug 7.0.1 → 8.0.0
rollup 3.29.4 → 4.60.0
terser 5.30.3 → 5.46.1
Run npm install to install new versions.- 更新后 package.json 变动如下：
3.3.2. 安装升级的版本
sh
/markdown-viewer/build/remark# npm install
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@8.1.0: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
added 144 packages, and audited 145 packages in 16s
95 packages are looking for funding
run `npm fund` for details
1 high severity vulnerability
To address all issues, run:
npm audit fix --force
Run `npm audit` for details.3.3.3. 构建升级后的版本
sh
/markdown-viewer/build/remark# ./build.sh
added 144 packages, and audited 145 packages in 4s
95 packages are looking for funding
run `npm fund` for details
1 high severity vulnerability
To address all issues, run:
npm audit fix --force
Run `npm audit` for details.
remark.mjs → tmp/remark.js...
created tmp/remark.js in 4.9s3.3.4. 版本的差异
从package.json 文件的看到版本：15.0.1，并没有变动。只更新了依赖包。
版本交付：https://github.com/remarkjs/remark/releases
3.4. 合并编译升级后的版本
将 vendor 新编译出来：marked.min.js、markdown-it.min.js、remark.min.js 复制到 zip 文件中 vendor 的目录下，替换原来的文件。
4. 下载地址
https://gitee.com/shendong70/markdown-viewer/releases/tag/5.3.1