MDX 和 React
在 Markdown 中使用 JSX
Docusaurus 原生支持 MDX v1,可以直接在 Markdown 文档中编写 JSX,并渲染为 React 组件。
备注
虽然 Docusaurus 会把 .md
和 .mdx
都解析为 MDX,但第三方工具可能会对其中一些语法的处理略有不同。 为了得到最准确的解析结果和更好的编辑器支持,推荐包含 MDX 语法的文档使用 .mdx
后缀。
Check out the MDX docs to see what other fancy stuff you can do with 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** 写在一起!
Notice how it renders both the markup from your React component and the Markdown syntax:
http://localhost:3000
Docusaurus 绿 和 Facebook 蓝 是我最喜欢的颜色。
我可以把我的 JSX 和 Markdown 写在一起!
MDX is JSX