3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-11 16:17:25 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs: mention MDXContent (#7705)

Browse source
This commit is contained in:
Joshua Chen 2022-07-01 16:43:06 +08:00 • committed by GitHub
parent ffe8a22ea5
commit 1f47151363
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -200,6 +200,33 @@ We use lower-case tag names like `highlight` to "pretend" that they are intrinsi
::: :::
:::caution
This feature is powered by [a wrapper provider](https://mdx-git-renovate-babel-monorepo-mdx.vercel.app/advanced/components#mdxprovider). If you are importing Markdown in a React page, you have to supply this provider yourself through the `MDXContent` theme component.
```jsx title="src/pages/index.js"
import React from 'react';
import FeatureDisplay from './_featureDisplay.mdx';
// highlight-next-line
import MDXContent from '@theme/MDXContent';
export default function LandingPage() {
return (
<div>
{/* highlight-start */}
<MDXContent>
<FeatureDisplay />
</MDXContent>
{/* highlight-end */}
</div>
);
}
```
If you don't wrap your imported MDX with `MDXContent`, the global scope will not be available.
:::
### Markdown and JSX interoperability {#markdown-and-jsx-interoperability} ### Markdown and JSX interoperability {#markdown-and-jsx-interoperability}
Docusaurus v2 is using MDX v1, which has a lot of known cases where the content fails to be correctly parsed as Markdown. Use the **[MDX playground](https://mdx-git-renovate-babel-monorepo-mdx.vercel.app/playground)** to ensure that your syntax is valid MDX. Docusaurus v2 is using MDX v1, which has a lot of known cases where the content fails to be correctly parsed as Markdown. Use the **[MDX playground](https://mdx-git-renovate-babel-monorepo-mdx.vercel.app/playground)** to ensure that your syntax is valid MDX.
@ -420,9 +447,10 @@ Now I'm actually just text
</div> </div>
</TabItem> </TabItem>
</Tabs> </Tabs>
</details>
``` ```
</details>
## Importing code snippets {#importing-code-snippets} ## Importing code snippets {#importing-code-snippets}
You can not only import a file containing a component definition, but also import any code file as raw text, and then insert it in a code block, thanks to [Webpack raw-loader](https://webpack.js.org/loaders/raw-loader/). In order to use `raw-loader`, you first need to install it in your project: You can not only import a file containing a component definition, but also import any code file as raw text, and then insert it in a code block, thanks to [Webpack raw-loader](https://webpack.js.org/loaders/raw-loader/). In order to use `raw-loader`, you first need to install it in your project: