使用 React

Docusaurus 内置了对 MDX 的支持，这让你可以在 Markdown 文档中编写 JSX 并渲染为 React 组件。

note

虽然 .md 和 .mdx 文件都使用 MDX 进行解析，但某些语法的处理方式略有不同。为了获得最准确的解析和更好的编辑器支持，我们建议对包含 MDX 语法的文件使用 .mdx 扩展名。

试一试这段代码：

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    }}>
    {children}
  </span>
);
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
I can write **Markdown** alongside my _JSX_!

请注意，以下是 React 组件的标记和 Markdown 语法的渲染效果：

I can write Markdown alongside my JSX!

你也可以导入在其它文件夹中自定义的组件或通过 npm 安装的第三方组件！请查阅 MDX 文档，看看还可以使用 MDX 做哪些有趣的事情吧。

caution

由于所有文档都是使用 MDX 解析的，因此任何 HTML 都将被视为 JSX。因此，如果你需要内联组件的样式，请遵循 JSX 语法并使用样式对象。此行为不同于 Docusaurus 1。另请参见 从 v1 迁移到 v2。