跳到主要内容

MDX

虽然 Docusaurus 会把 .md 和 .mdx 都解析为 MDX，但第三方工具可能会对其中一些语法的处理略有不同。 为了得到最准确的解析结果和更好的编辑器支持，推荐包含 MDX 语法的文档使用 .mdx 后缀

导出组件​

要在 MDX 文件中自定义组件，你必须导出它：只有以 export 开头的段落才会被解析为组件，而不是文本。


export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    }}>
    {children}
  </span>
);

<Highlight color="#25c2a0">Docusaurus 绿</Highlight> 和 <Highlight color="#1877F2">Facebook 蓝</Highlight> 是我最喜欢的颜色。

我可以把我的 _JSX_ 和 **Markdown** 写在一起！

代码块​

文档中的代码块超级厉害 💪。

代码标题​

/src/components/HelloCodeTitle.js
function HelloCodeTitle(props) {
  return <h1>你好，{props.name}</h1>;
}

告示​

  • note 通知
  • tip 提示
  • info 信息
  • caution 注意
  • danger 危险

指定标题​

:::note[Your Title]

Some **content** with _Markdown_ `syntax`.

:::


流程图工具​

mermaid