From 02b512c2cfae6158aad179da1bc0ab526048feee Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Tue, 15 Jun 2021 18:20:53 +0800 Subject: [PATCH] docs(v2): add documentation about importing markdown (#4958) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add documentation about importing markdown Signed-off-by: Josh-Cena * Update website/docs/guides/markdown-features/markdown-features-react.mdx * Run prettier Signed-off-by: Josh-Cena Co-authored-by: Sébastien Lorber --- .../markdown-features-react.mdx | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/website/docs/guides/markdown-features/markdown-features-react.mdx b/website/docs/guides/markdown-features/markdown-features-react.mdx index dd01acf21f..288f3cdb3d 100644 --- a/website/docs/guides/markdown-features/markdown-features-react.mdx +++ b/website/docs/guides/markdown-features/markdown-features-react.mdx @@ -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'; + +; +``` + + + +import Intro from './markdown-features-intro.mdx'; + + + + + +
+ +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)). + +:::