让 Markdown 步入 组件时代 | MDX中文文档 | MDX中文网Skip to navigation让 Markdown 步入组件时代MDX 让你能在 Markdown 格式的内容中插入 JSX 代码。 你还可以导入（import）组件，例如交互式图表或弹窗，并将它们嵌入到 你所书写的内容当中。 这让使用组件来编写长篇内容变得非常轻松。 🚀 继续阅读 »新闻：MDX 3 发布了！这次的主版本升级并没有带来太多变化，不过仍然值得期待！ 这次的升级主要是放弃了对旧版 Node 的支持（请使用 16 或更高版本吧）、为 MDX 添加了对 ES2024 的支持、在 MDX 中支持 await 语法（如果你所用的框架也支持的话）以及 删除了几个已经废弃的参数。继续阅读 »MDX 有什么用？你可以通过 JSX 在 markdown 中嵌入组件：example.mdximport {Chart} from './snowfall.js' export const year = 2023 # Last year’s snowfall In {year}, the snowfall was above average. It was followed by a warm spring which caused flood conditions in many of the nearby rivers. 上述代码被编译成 JavaScript，你就可以在任何支持 JSX 的框架中 使用了：Last year’s snowfallIn 2023, the snowfall was above average. It was followed by a warm spring which caused flood conditions in many of the nearby rivers.我们制作了一个交互式的练习工具，你可以利用这个工具尝试 MDX 并看到 转换后的结果。 在线工具 »入门MDX 支持大部分的打包工具（bundlers）、框架和编辑器。 无论是 Docusaurus、Next.js 或 Vite。 也无论是 Rollup、esbuild 或 webpack。 更无论是 React、Preact 或 Vue。 继续阅读 »MDX 优点汇总❤️ 强大: MDX 将 markdown 和 JSX 语法完美地融合在一起，完美地适配 基于 JSX 的项目💻 一切皆组件: 在 MDX 中使用现有组件， 并且能将其它 MDX 文件当作组件导入（import）🔧 可自定义: 可以指定每个 markdown 指令 ({h1: MyHeading}) 用哪个组件来渲染📚 基于 Markdown: 保留了 markdown 的简洁和优雅， 需要时也能信手拈来 JSX🔥 非常非常快: MDX 没有运行时的开销，所有编译都发生在 构建阶段lol mdx is so good— @dan_abramovMDX is made with ❤️ in Amsterdam, Boise, and around the 🌏This site does not track you.MIT © 2017-2025冀ICP备14002930号-9Project on GitHubSite on GitHubUpdates on TwitterUpdates as RSS feedSponsor on OpenCollective友链BootstrapTailwind CSSReactStyleXNext.jsDocusaurusnpmYarnpnpmBabelWebpackRollupParcelesbuildBiomeSvelteAlpine.jsMarkdownSassWebAssemblyPrettierDenoKoaLodashStrapiAxiosNunjucksPugMobXReduxJSDocSkip to content中文文档MDX 是什么？入门Using MDXExtending MDXTroubleshooting MDX使用指南GitHub flavored markdown (GFM)FrontmatterMathSyntax highlightingEmbedMDX on demandInjecting components核心软件包@mdx-js/esbuild@mdx-js/loader@mdx-js/mdx@mdx-js/node-loader@mdx-js/preact@mdx-js/react@mdx-js/rollup@mdx-js/vueremark-mdx组件在线练习场社区SupportContributeSponsorAboutProjects博客英文官网GitHubTwitterOpenCollective
