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 编写内容的样子。

<code>import InteractiveChart from "../path/interactive-chart";

# Hello - I'm a Markdown heading

This is just markdown text

<interactivechart></interactivechart></code>

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

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

<code>import Header from "./path/Header.mdx"
import Footer from "./path/Footer.mdx"



# Here goes the actual content.

Some random content goes [here](link text)

</code>

在应用程序中实现 MDX

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

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

<code>import { importMDX } from './mdx.macro'

const MyDocument = React.lazy(() => importMDX('./my-document.mdx'))

ReactDOM.render(
  <react.suspense fallback="{<div">Loading...}>
    <mydocument></mydocument></react.suspense>,
  document.getElementById('root')
);</code>

您也可以在他们为此创建的游乐场上试用 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 非常适合许多用途——远远超出了我们在本文介绍中介绍的内容。

以上是MDXJS简介的详细内容。更多信息请关注PHP中文网其他相关文章！