目录01 先看数字画像一个老得离谱的库02 它凭什么活了 16 年03 内部流水线它到底怎么把 Markdown 变成 HTML04 五分钟上手从安装到第一次渲染05 选型对照marked、markdown-it、remark到底用谁06 安全红线marked 不管输出坑在这里07 判断框架你的项目该不该用 marked这篇文章写给前端和后端都在写 Markdown 的开发者——尤其是想搞清楚「Markdown 到底是怎么变成 HTML」的人。读完你会知道四件事marked 凭什么活了 16 年、它内部怎么工作、怎么五分钟上手、以及一个很多人踩过的安全坑。你写完一篇 Markdown点了保存网页上立刻出现排版好的文章。中间发生了什么浏览器只认识 HTML不认识# 标题和**加粗**。总得有个东西把 Markdown 翻译成 HTML——这个翻译官很可能是marked。它不是今年冒出来的新玩具项目从2011 年就在写了到现在 16 年GitHub 上3.7 万 Starnpm 官方数据显示过去一周它被下载了 8166 万次——这个数字比很多爆款前端框架还夸张。今天我们不看官方那句为速度而生的广告词用数据和代码把这个 16 岁的老库拆开看一遍它靠什么活到今天、内部怎么工作、怎么上手、和同类库比该怎么选以及一个很多人踩过的安全坑。01 先看数字画像一个老得离谱的库先看仓库实拍上面这张图就是 github.com/markedjs/marked 首页37.2k Star、3.8k Fork、225 个 Tag、3881 次提交——一个 16 岁的项目维护节奏到现在还是每周都有提交。再把 npm 官方数据摆出来2026 年 10 月抓取指标数值npm 周下载量约 8166 万次81,654,018GitHub Star3.7 万37.2k依赖项0零依赖被多少包依赖14,957 个历史版本225 个最新版本18.0.14npm/ v18.1.0GitHub tag语言TypeScript许可证MIT创建时间2011 年Christopher Jeffrey两个数字值得停下来看第一0 依赖在 npm 生态里是稀有物种。装一个包拖进来几百个依赖是常态而 marked 一个依赖都没有——体积小、安装快、不污染你的依赖树。这对体量敏感的前端项目本身就是卖点。第二8166 万次/周是什么概念对比一下同赛道的 markdown-it周下载约 2100 万次。marked 差不多是它的4 倍。博客、文档站、在线编辑器、Markdown 预览插件……大量你叫不出名字的产品背后都在用同一个翻译官。02 它凭什么活了 16 年开源项目死掉的原因通常是同一个没人维护了。marked 能活 16 年我把它归结为三个没变没变的是定位只做一件事且做到底。它的仓库简介一句话A markdown parser and compiler. Built for speed.——只把 Markdown 变成 HTML不为别的分心。低层编译器low-level compiler不做缓存、不长时间阻塞主线程渲染完就走。没变的是对规范的较真。官方文档给出了合规测试数据Markdown 1.0 通过率 100%CommonMark 0.31 通过率 100%仅 Links 一项 99%GFMGitHub 风格0.29 通过率 99%其中表格、任务列表、删除线这三个 GitHub 常用扩展全部 100%。意味着你平时写的语法它基本都接得住不用为这个语法它支不支持操心。没变的是吃自己的狗粮。下面这张图是 marked 的官方文档首页marked.js.org——这个文档站本身就是用 marked 渲染的。文档团队天天用自己写的解析器这比任何宣传都有说服力。类似的还有 zero-md、TeXMe、StrapDown.js、HomebreweryDD 跑团内容制作工具等一批工具都建立在它之上——生态粘性就是这么攒下来的。顺带一个冷知识官方在首页很诚实地标注了一句——“仍在完善性能对比基准的度量Still working on metrics”。也就是说最快至今没有官方基准背书。网上那些速度极快的说法更多来自社区口碑和它的轻量设计这一点我们后面选型时再展开。03 内部流水线它到底怎么把 Markdown 变成 HTML你不用把源码读一遍记住这条流水线就够了输入 → Lexer词法分析→ Token 树 → Parser语法分析→ HTMLLexer把 Markdown 字符串按规则切成一块块token组成一棵嵌套的 token 树——# 标题变成{type: heading, depth: 1}列表、代码块、引用同理walkTokens可选按需对每个 token 做后处理Parser遍历 token 树把每个 token 喂给对应的renderer拼出 HTML 字符串。关键在设计中间那层 token 树是可插拔的。你想改标题的输出样式不用重写整个解析器override 一个 renderer 就行import{marked}frommarked;constrenderer{heading({tokens,depth}){if(depth1){returnh1${this.parser.parseInline(tokens)}/h1;}returnfalse;// 其他级别走默认逻辑}};marked.use({renderer});console.log(marked.parse(# 我的博客标题));// h1我的博客标题/h1想加一种全新的语法就注册一个自定义扩展tokenizer renderer 成对出现想在解析前后插手还有hookspreprocess / postprocess想要异步处理比如渲染前请求某个链接打开async模式即可。官方还提供了扩展模板仓库直接起新项目。一句话总结它的设计哲学解析与渲染分离扩展点开放核心保持轻量。这也是它能被塞进各种千奇百怪场景还不崩的原因。04 五分钟上手从安装到第一次渲染前面讲了半天是什么现在讲怎么用——其实简单到超出你的预期。第一步安装Node 项目里npminstallmarked第二步三行代码跑起来import{marked}frommarked;consthtmlmarked.parse(# 你好marked\n\n这是**加粗**的测试。);console.log(html);// h1你好marked/h1// p这是strong加粗/strong的测试。/p浏览器里直接用 CDN——想做个本地 Markdown 预览页这是最快的方式scriptsrchttps://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js/scriptscriptdocument.getElementById(content).innerHTMLmarked.parse(# 在浏览器里也能渲染);/script命令行一键转换——装全局命令后文件进、HTML 出npminstall-gmarked marked-ireadme.md-oreadme.html常用配置——用marked.use()全局设置不需要每次都传参数import{marked}frommarked;marked.use({gfm:true,// GitHub 风格表格/任务列表/删除线默认就是 truebreaks:true,// 单个换行也变成 br更像聊天框async:false// 开启后 walkTokens 可异步parse 返回 Promise});consthtmlmarked.parse(第一行\n第二行);只想解析一段内联内容不包p标签用parseInlinemarked.parse(**加粗** _斜体_);// pstrong加粗/strong em斜体/em/pmarked.parseInline(**加粗** _斜体_);// strong加粗/strong em斜体/em一句话总结上手成本装一个包调一个函数完事。剩下所有进阶玩法自定义渲染、扩展语法、异步处理都在marked.use()这一个入口里做文章——这也是它 16 年没被淘汰的设计红利。05 选型对照marked、markdown-it、remark到底用谁写 Markdown 渲染JavaScript 生态里绕不开四兄弟marked、markdown-it、remarkunified 生态、showdown。很多人纠结怎么选一张表说清楚维度markedmarkdown-itremark / unifiedshowdown定位快、轻、零依赖严格 CommonMark 插件生态AST 内容处理管线老牌全能型周下载量约 8166 万约 2100 万百万级百万级核心模型Token 树Token 流 插件AST 树可编程变换正则为主GFM 表格内置需插件需插件支持插件生态中等官方扩展模板 30 已知扩展大footnotes/math/container 等极大lint、转换、格式化小适用场景博客渲染、实时预览、CLI、批量转换、体积敏感需要严格规范 丰富插件的站点需要对内容做加工目录生成、格式检查、格式转换老项目兼容选型就三句话渲染、预览、转换——默认 marked。快、零依赖、够用要严格规范 大量现成插件脚注、数学公式、自定义容器——选 markdown-it要对内容动手术自动生成目录、检查格式、把 Markdown 转成别的格式——上 remark/unified它的 AST 让你能编程式地处理文档showdown只在老项目里见到新项目没必要从它开始。06 安全红线marked 不管输出坑在这里这是参考文章绝不会告诉你的部分但官网首页写得明明白白⚠️ Marked does not sanitize the output HTML.如果你处理的是不可信输入必须对输出的 HTML 做过滤sanitize否则有 XSS 风险。更值得玩味的是marked以前是有内置 sanitize 选项的在 v8.0.0 里主动删掉了官方 Options 文档明确写着 “Removed in v8.0.0, use a sanitize library like DOMPurify”。为什么删因为官方认为消毒和翻译是两件事解析器做好解析安全交给专业的消毒库——职责分离。什么意思marked 的哲学是我只负责翻译不负责消毒。你给它)或一段带script的文本它原样输出。如果你把用户输入评论区、自定义文档、在线编辑器内容直接喂给 marked 再塞进页面就存在被注入脚本的风险。正确姿势是组合使用marked 负责翻译DOMPurify 负责消毒importDOMPurifyfromdompurify;consthtmlDOMPurify.sanitize(marked.parse(userInput));更优雅的玩法是用 marked 的 hooks把消毒直接挂进渲染管线一劳永逸import{marked}frommarked;importDOMPurifyfromisomorphic-dompurify;marked.use({hooks:{postprocess(html){returnDOMPurify.sanitize(html);}}});再补一个进阶提醒如果处理的内容可能被恶意构造防止 ReDoS 正则攻击官方还建议把解析放到worker 线程/Web Worker里跑超时直接终止进程别让一个恶意字符串卡死你的主线程。判断标准只有你自己写、或内部可信的内容才可以直接渲染任何来自用户的内容必须过一道 sanitize。这个坑官方首页就写了但很多教程不提值得单独拎出来。07 判断框架你的项目该不该用 marked最后给个能直接用的清单该用 marked 的场景博客 / 文档站渲染 Markdown八成场景就是它编辑器里的实时预览快不卡主线程命令行批量转换marked -i readme.md -o readme.html项目对体积敏感、不想被依赖树污染。别用 marked 的场景需要对内容做结构化加工自动目录、代码统计、格式 lint——上 remark需要大量开箱即用的语法插件——上 markdown-it处理用户输入却不想配 sanitize——这不是 marked 的问题是没读官网的问题。回到开头那个问题你写的 Markdown 是怎么变成网页的大概率是一个 2011 年出生、每周被下载 8166 万次、却只有几 KB、零依赖的老库完成的。它没有炫酷的发布会也没有天天刷屏的更新日志但 16 年如一日地干好翻译这一件事。这种项目在开源世界里反而是最稀缺的那类。作者蜗牛工具箱Java 开发/培训目前全职独立开发者。专注 AI 工具实战与技术事件拆解欢迎关注同名公众号也欢迎评论区聊聊。