Vue 团队成员又搞了个 "新玩具"!

Vue 团队成员真的是太卷了,又搞了个新玩具:markdown-exit------markdown-itTypeScript「重构版」来了!

如果你用过 VitePressSlidev、或者任何 Vue 系文档站,你一定对 markdown-it 不陌生:它就是把 Markdown 变成 HTML 的那台"发动机"。

问题是,这台发动机是 2014 年的设计,纯 JavaScript 写成,类型靠社区维护,异步插件更是想都别想。

于是,Vue 团队的核心成员 Anthony Fu 在推特上"许愿":

"我找这东西太久了!缺少异步插件限制了我们太多玩法,真希望 VitePressSlidev 能用上。"

不到两周,SerKo(@serkodev)直接甩出一个新仓库------markdown-exit

它到底干了啥?

把 Markdown 转成 HTML,但换了颗**"TypeScript 心脏"**。

能力 markdown-it markdown-exit
输出 HTML ✅(100% 兼容)
同步插件
异步插件 ✅(官方支持)
类型定义 社区 @types 原生自带
现代构建 Vite + Vitest + pnpm monorepo
代码高亮 靠插件 异步高亮一句话搞定

对 Vue 生态意味着什么?

  • VitePress:以后可以在编译阶段做"异步代码拉取"、"远程片段嵌入"而不用写脏脚本。
  • Slidev:幻灯片里直接引用 GitHub 文件、CodePen、CodeSandbox,实时渲染。
  • 普通 Vue 项目 :服务端渲染(SSR)或边缘函数(Vite SSR / Nuxt)里,再也不用 require('@types/markdown-it') 一把梭。

Anthony Fu 在转发里写:

"等不及想在 VitePress、Slidev 上落地了!"

两分钟上手

bash 复制代码
# 最新特性版(公测中)
npm i markdown-exit

# 求稳用兼容版
npm i markdown-exit@legacy
ts 复制代码
// 命名导入,Tree-shaking 友好
import { createMarkdownExit } from 'markdown-exit'

const md = createMarkdownExit()
console.log(md.render('# Hello markdown-exit'))

异步高亮示例(以前做不到):

ts 复制代码
md.use(asyncPlugin, async (code, lang) => {
  const html = await fetchHighlighter(lang) // 任意异步操作
  return html
})

迁移零成本

旧项目里全局替换即可:

diff 复制代码
- import MarkdownIt from 'markdown-it'
+ import MarkdownExit from 'markdown-exit'

所有插件配置渲染结果一行不改,直接运行。

时间线 & 路线图

  • 现在v1.0.0-beta 公测,功能已齐,API 锁定中。
  • 未来 1 ~ 2 个月 :发布正式版 v1.0.0;VitePressSlidev 官方模板同步切换。
  • 长期 :探索 AST 级别缓存、WebAssembly 加速、流式渲染等高级玩法。

结语

vue/corevite,再到现在的 markdown-exit,Vue 团队及其周边伙伴似乎一直在做同一件事:
把"底层基础设施"重新洗一遍牌,让上层开发者爽到飞起。

所以,下次你要在 Vue 项目里"整点 Markdown"时,不妨试试这颗新心脏------
npm i markdown-exit,然后跟过去的类型报错、异步限制说拜拜吧!

  • markdown-exit Github 地址: https://github.com/serkodev/markdown-exit
相关推荐
musenh7 小时前
javascript学习
开发语言·javascript·学习
一 乐8 小时前
农产品销售系统|农产品电商|基于SprinBoot+vue的农产品销售系统(源码+数据库+文档)
java·javascript·数据库·vue.js·spring boot·后端·农产品销售系统
用户0136087566888 小时前
前端实现文件上传功能
前端
咖啡の猫8 小时前
Vue-github 用户搜索案例
前端·vue.js·github
yong99908 小时前
响应式布局新利器:CSS Grid 的 grid-template-areas 实战
前端·css
咖啡の猫8 小时前
Vue过度与动画
前端·javascript·vue.js
IT_陈寒8 小时前
Python数据处理速度慢?5行代码让你的Pandas提速300% 🚀
前端·人工智能·后端
蒜香拿铁9 小时前
Angular【起步】
前端·javascript·angular.js
护国神蛙9 小时前
HTTP 重定向踩坑实录:307、301、308 问题排查全指南
前端·网络协议