3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-29 10:17:55 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs(v2): add documentation about importing markdown (#4958)

Browse source 
* Add documentation about importing markdown

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Update website/docs/guides/markdown-features/markdown-features-react.mdx

* Run prettier

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
This commit is contained in:
Joshua Chen 2021-06-15 18:20:53 +08:00 • committed by GitHub
parent e25c0e7d3f
commit 02b512c2cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
website/docs/guides/markdown-features/markdown-features-react.mdx
View file

@ -7,6 +7,8 @@ slug: /markdown-features/react
import BrowserWindow from '@site/src/components/BrowserWindow';
## Using JSX in Markdown {#using-jsx-in-markdown}
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
@ -69,3 +71,31 @@ You can also import your own components defined in other files or third-party co
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).
:::
## Importing Markdown {#importing-markdown}
You can use Markdown files as components and import them elsewhere, either in Markdown files or in React pages. Below we are importing from [another file](./markdown-features-intro.mdx) and inserting it as a component.
```jsx
import Intro from './markdown-features-intro.mdx';
<Intro />;
```
<BrowserWindow url="http://localhost:3000">
import Intro from './markdown-features-intro.mdx';
<Intro />
</BrowserWindow>
<br />
This way, you can reuse contents among multiple pages and avoid duplicating materials.
:::caution
The table-of-contents does not currently contain the imported Markdown headings. This is a technical limitation that we are trying to solve ([issue](https://github.com/facebook/docusaurus/issues/3915)).
:::