MDX

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

¥MDX is a variant of Markdown that compiles to JSX, and supports embedding interactive components inside Markdown documents. Parcel supports MDX out of the box.

示例

¥Example

你可以将 .mdx 文件导入到 JavaScript 中并使用 React 进行渲染：

¥You can import a .mdx file into your JavaScript and render it using React:

app.js:

import Hello from './hello.mdx';

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

hello.mdx:

# Hello, MDX!

This is an MDX file.

依赖

¥Dependencies

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

¥Parcel detects dependency references in MDX files and processes them as well. These references are re-written so that they link to the correct output files. Supported dependencies include:

链接

¥Links

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

¥Links to other pages can be created with the Markdown link syntax or the HTML <a> element.

This is a [link](another-page.mdx).

This is <a href="somewhere.html">another link</a>

图片

¥Images

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

¥Images can be referenced using the Markdown image syntax, HTML <img> element, or <picture>` element. See the HTML docs for more details.


![alt](some-image.jpg)



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

视频、音频和其他资源

¥Video, audio, and other assets

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

¥The <video>, <audio>, <track>, <embed>, <object>, and <iframe> elements are supported. The referenced URLs are processed by Parcel and rewritten to include a content hash.

代码块

¥Code blocks

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

¥Parcel supports customizing how code blocks are rendered by specifying your own CodeBlock component. This allows you to implement syntax highlighting and other features.

app.js:

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 属性

¥CodeBlock props

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

¥Markdown code fences accept arbitrary props, which are parsed as JSX and passed into the CodeBlock component.

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

以上示例编译后为：

¥The above example compiles to:

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

渲染实时代码示例

¥Rendering live code examples

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

¥Markdown code fences in JavaScript, TypeScript, and CSS support running the code live and rendering the result inline. Set the render prop on the code fence to pass the result of the code block to the <CodeBlock> component. For example:

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

将渲染

¥would render

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

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

¥The provided CodeBlock component can choose where to display the rendered value. The default implementation renders it after the <pre> element.

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