mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-30 10:48:05 +02:00
27 lines
690 B
Text
27 lines
690 B
Text
---
|
|
id: mdx
|
|
title: Powered by MDX
|
|
---
|
|
|
|
You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
|
|
|
|
The `.mdx` extension is not required, but will enable better support from tooling (IDE, Prettier...).
|
|
|
|
export const Highlight = ({children, color}) => (
|
|
<span
|
|
style={{
|
|
backgroundColor: color,
|
|
borderRadius: '2px',
|
|
color: '#fff',
|
|
padding: '0.2rem',
|
|
}}
|
|
onClick={() => alert('Highlight pressed!')}>
|
|
{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_!
|