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
相关推荐
PHP武器库2 分钟前
ULUI:不止于按钮和菜单,一个专注于“业务组件”的纯 CSS 框架
前端·css
方也_arkling8 分钟前
Element Plus主题色定制
javascript·sass
电商API_1800790524710 分钟前
第三方淘宝商品详情 API 全维度调用指南:从技术对接到生产落地
java·大数据·前端·数据库·人工智能·网络爬虫
晓晓莺歌12 分钟前
vue3某一个路由切换,导致所有路由页面均变成空白页
前端·vue.js
2601_9498095930 分钟前
flutter_for_openharmony家庭相册app实战+我的Tab实现
java·javascript·flutter
Up九五小庞41 分钟前
开源埋点分析平台 ClkLog 本地部署 + Web JS 埋点测试实战--九五小庞
前端·javascript·开源
摘星编程1 小时前
React Native + OpenHarmony:UniversalLink通用链接
javascript·react native·react.js
qq_177767371 小时前
React Native鸿蒙跨平台数据使用监控应用技术,通过setInterval每5秒更新一次数据使用情况和套餐使用情况,模拟了真实应用中的数据监控场景
开发语言·前端·javascript·react native·react.js·ecmascript·harmonyos
烬头88211 小时前
React Native鸿蒙跨平台应用实现了onCategoryPress等核心函数,用于处理用户交互和状态更新,通过计算已支出和剩余预算
前端·javascript·react native·react.js·ecmascript·交互·harmonyos
程序员清洒3 小时前
Flutter for OpenHarmony:Text — 文本显示与样式控制
开发语言·javascript·flutter