MDX

MDX 是 Markdown 的一个变体，它编译为 JSX，并支持在 Markdown 文档中嵌入交互式组件。Parcel 开箱即用地支持 MDX。

示例

您可以将 .mdx 文件导入到 JavaScript 中，并使用 React 渲染它：

import Hello from "./hello.mdx";

export function App() {
  return <Hello />;
}

# 你好，MDX！

这是一个 MDX 文件。

依赖

Parcel 检测 MDX 文件中的依赖引用并对其进行处理。这些引用将被重写，以便链接到正确的输出文件。支持的依赖包括：

链接

可以使用 Markdown 链接语法或 HTML <a> 元素创建指向其他页面的链接。

这是一个[链接](another-page.mdx)。

这是 <a href="somewhere.html">另一个链接</a>

图像

可以使用 Markdown 图像语法、HTML <img> 元素或 <picture> 元素引用图像。有关更多详细信息，请参见 HTML 文档。

![alt](some-image.jpg)

<img src="another-image.png">

视频、音频和其他资源

支持 <video>、<audio>、<track>、<embed>、<object> 和 <iframe> 元素。引用的 URL 由 Parcel 处理并重写，以包含内容哈希。

代码块

Parcel 支持通过指定自定义的 CodeBlock 组件来自定义代码块的渲染。这允许您实现语法高亮和其他功能。

import Hello from "./hello.mdx";

const components = { CodeBlock };

export function App() {
  return <Hello components={components} />;
}

function CodeBlock({ lang, children }) {
  return (
    <pre>
      <code className={lang ? `language-${lang}` : null}>
        {syntaxHighlight(children)}
      </code>
    </pre>
  );
}

function syntaxHighlight() {
  // ...
}

CodeBlock 属性

Markdown 代码围栏接受任意属性，这些属性被解析为 JSX 并传递给 CodeBlock 组件。

```tsx boolean string="hi" number={2}
console.log("hi");
```

上面的示例编译为：

<CodeBlock lang="tsx" boolean string="hi" number={2}>
  console.log("hi");
</CodeBlock>

渲染实时代码示例

JavaScript、TypeScript 和 CSS 的 Markdown 代码围栏支持实时运行代码并内联渲染结果。在代码围栏上设置 render 属性，将代码块的结果传递给 <CodeBlock> 组件。例如：

```tsx render
<div>Hello world!</div>
```

将渲染

<CodeBlock lang="tsx" render={<div>Hello world!</div>}>
  &lt;div&gt;Hello world!&lt;/div&gt;
</CodeBlock>

提供的 CodeBlock 组件可以选择在何处显示渲染的值。默认实现在 <pre> 元素之后渲染它。

<pre>
  <code class="lang-tsx">
    &lt;div&gt;Hello world!&lt;/div&gt;
  </code>
</pre>
<div>Hello world!</div>