MDX - Markdown 中的 JSX

什么

一种名为MDX 的新型标记语言已经出现，它本质上是在Markdown 的基础上添加了JSX 元素和 JavaScript import。

为什么

如果你读过我关于 Storybook 的文章，你就会知道，能够独立运行组件而无需将其嵌入到庞大的应用程序中是多么方便。例如，当你需要检查所有功能是否仍然正常运行，或者需要为文档编写示例时。

此外，有些应用程序主要以文本为主，但也需要一些更复杂的部分，例如图表或动画，因此用 Markdown 编写会比较麻烦。例如，演示文稿幻灯片。

如何

要快速启动并运行，只需使用以下命令：

npm init mdx

这将创建一个预先配置好 MDX 的Next.js项目。然后您就可以开始编写 MDX 文档了。

以下是一个简单的例子：

import Graph from './components/graph'

## My Heading

A nice paragraph that tells people about some data, followed by a `<Graph>` 
component that visualizes this data.

<Graph />

• importJavaScript 的声明
• Markdown 中的标题和段落
• 来自 React 的 JSX 元素

好处在于所有东西都是组件，所以你甚至可以导入其他 MDX 文件，甚至是 Markdown文件。

结论

MDX 是一种非常有趣的增强 Markdown 灵活性的方法。让我们拭目以待它未来的发展吧！:)