mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-30 10:48:05 +02:00
6811a72e72
* Fix MDX Crowdin issues by wrapping complex JSX in code blocks * Add a remark plugin to unwrap MDX code blocks * Update MDX Crowdin doc
71 lines
2.2 KiB
Text
71 lines
2.2 KiB
Text
---
|
|
id: react
|
|
title: Using React
|
|
description: Using the power of React in Docusaurus Markdown documents, thanks to MDX
|
|
slug: /markdown-features/react
|
|
---
|
|
|
|
import BrowserWindow from '@site/src/components/BrowserWindow';
|
|
|
|
Docusaurus has built-in support for [MDX](https://mdxjs.com/), which allows you to write JSX within your Markdown files and render them as React components.
|
|
|
|
:::note
|
|
|
|
While both `.md` and `.mdx` files are parsed using MDX, some of the syntax are treated slightly differently. For the most accurate parsing and better editor support, we recommend using the `.mdx` extension for files containing MDX syntax.
|
|
|
|
:::
|
|
|
|
Try this block here:
|
|
|
|
```jsx
|
|
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_!
|
|
```
|
|
|
|
Notice how it renders both the markup from your React component and the Markdown syntax:
|
|
|
|
```mdx-code-block
|
|
export const Highlight = ({children, color}) => (
|
|
<span
|
|
style={{
|
|
backgroundColor: color,
|
|
borderRadius: '2px',
|
|
color: '#fff',
|
|
padding: '0.2rem',
|
|
}}>
|
|
{children}
|
|
</span>
|
|
);
|
|
|
|
<BrowserWindow minHeight={240} url="http://localhost:3000">
|
|
|
|
<Highlight color="#25c2a0">Docusaurus green</Highlight>
|
|
{` `}and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
|
|
|
|
I can write **Markdown** alongside my _JSX_!
|
|
|
|
</BrowserWindow>
|
|
```
|
|
|
|
<br />
|
|
|
|
You can also import your own components defined in other files or third-party components installed via npm! Check out the [MDX docs](https://mdxjs.com/) to see what other fancy stuff you can do with MDX.
|
|
|
|
:::caution
|
|
|
|
Since all doc files are parsed using MDX, any HTML is treated as JSX. Therefore, if you need to inline-style a component, follow JSX flavor and provide style objects. This behavior is different from Docusaurus 1. See also [Migrating from v1 to v2](../../migration/migration-manual.md#convert-style-attributes-to-style-objects-in-mdx).
|
|
|
|
:::
|