MDXJS 入门

Markdown 传统上是程序员编写文档的首选格式。 它足够简单，几乎每个人都能学习和适应，同时又易于格式化和设置内容样式。 它非常受欢迎，以至于 Markdown 的命令已用于 Slack 和 Whatsapp 等聊天应用程序以及 Dropbox Paper 和 Notion 等文档应用程序。 当 GitHub 为 README 文档引入 Markdown 支持时，它们也从其中呈现 HTML 内容——例如，我们可以插入一些链接和图像元素，它们会很好地呈现。

尽管 Markdown 从任何角度来看都没有问题，但总有改进的空间。 这就是 Markdown 扩展（MDX）的用武之地。

在什么情况下我们会考虑使用 MDX 而不是 Markdown？ MDX 的一个特点是，它可以在使用普通 Markdown 的情况下集成 JavaScript。 以下是一些说明其便利性的示例

• Frontend Armory 在其教育游乐场 Demoboard 上使用 MDX。 该游乐场原生支持 MDX 以创建既充当演示又充当文档的页面，这非常适合演示 React 概念和组件。
• Brent Jackson 提出了一种构建网站的新方法，将 MDX 和 Styled System 配合使用。 每个页面都用 MDX 编写，Styled System 对区块进行样式设置。 它目前正在开发中，但您可以在 网站上找到更多详细信息。
• 使用 mdx-deck 或 Spectacle 可以让您的下一个演示文稿更有趣。 您可以在演示文稿中直接显示演示，而无需切换屏幕！
• MDX Go、ok-mdx 和 Docz 都提供了使用 MDX 记录组件库的工具。 您可以使用 Markdown 将组件直接放入文档中，它就能正常工作™。
• 一些网站，包括 Zeit Now 和 Prisma 文档，都使用 MDX 编写内容。

在您希望维护基于 React 的博客的情况下，MDX 闪耀着光芒。 使用它意味着当您想要在 Markdown 中执行某些不可能的操作（或创建插件）时，您不再需要创建自定义 React 组件页面。 我在我的博客 上使用了一年多，并且一直很喜欢这种体验。 到目前为止，我最喜欢的项目之一是一个我称之为 Playground 的 React 组件，它可以用于演示小型 HTML/CSS/JavaScript 代码片段，同时允许用户编辑代码。 当然，我可以使用一些第三方服务并嵌入演示，但这样我就不必加载任何第三方脚本。

说到嵌入，MDX 使嵌入由第三方服务（例如 YouTube、Vimeo、Giphy 等）创建的 iFrame 变得非常容易。

与 Markdown 结合使用

您会知道一个文件是用 MDX 编写的，因为它在文件名上有一个 .mdx 扩展名。 但是，让我们看看实际在 MDX 中编写内容是什么样子。

import InteractiveChart from "../path/interactive-chart";


# Hello - I'm a Markdown heading


This is just markdown text


<InteractiveChart />

看到了吗？ 仍然可以使用 Markdown，并且当我们想要交互式可视化或样式时，可以将其与 React 组件一起编写。 这是我作品集中的一​​个示例

MDX 的另一个好处是，就像组件一样，文件是可组合的。 这意味着页面可以拆分为多个块并重复使用，一次性呈现所有内容。

import Header from "./path/Header.mdx"
import Footer from "./path/Footer.mdx"

<Header />

# Here goes the actual content.

Some random content goes [here](link text)

<Footer />

在应用程序中实现 MDX

大多数常见的基于 React 的集成平台（如 Gatsby 和 Next）都有 MDX 插件。

要在 create-react-app 项目中集成它，MDX 提供了一个 Babel Macro，可以将其导入应用程序中

import { importMDX } from './mdx.macro'
 
const MyDocument = React.lazy(() => importMDX('./my-document.mdx'))
 
ReactDOM.render(
  <React.Suspense fallback={<div>Loading...</div>}>
    <MyDocument />
  </React.Suspense>,
  document.getElementById('root')
);

您也可以在他们为其创建的 游乐场 上试用 MDX。

MDX 贡献者非常积极地致力于为 Vue 提供支持。 一个示例已在 GitHub 上提供。 不过，这还处于 Alpha 阶段，尚未准备好用于生产环境。

编辑器支持

语法高亮和自动完成都 越来越支持 VS Code、 Vim 和 Sublime Text。 然而，在 使用过程中，这些确实存在一些尖锐的边缘，并且难以导航。 其中许多问题源于无法预测在页面上下文中我们是要使用 JavaScript 还是 Markdown。 这当然是可以改进的。

MDX 插件和扩展

MDX 的一个关键优势在于它是 统一内容联盟 的一部分，该联盟组织了 remark 内容。 这意味着 MDX 可以直接支持庞大的 remark 插件 和 rehype 插件 生态系统——无需重新发明轮子。 其中一些插件，包括 remark-images 和 remark-redact，至少可以说非常出色。 要在 MDX 中使用插件，您可以将其添加到相应的加载器或插件中。 您甚至可以通过参考 创建插件的 MDX 指南 来编写自己的 MDX 插件。

---

MDX 只有几年的历史，但其在内容领域的影响力一直在增长。 从撰写博文和可视化数据到创建交互式演示和演示文稿，MDX 非常适合多种用途——远远超出了我们在本文入门部分介绍的范围。