mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-30 18:58:36 +02:00
docs(v2): add documentation about importing code files (#4974)
* Add documentation about importing code files Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Add warning about breaking API change Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Update website/docs/guides/markdown-features/markdown-features-react.mdx Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
This commit is contained in:
parent
9fe79caadc
commit
3d95a3e6b1
1 changed files with 36 additions and 2 deletions
|
@ -72,6 +72,40 @@ Since all doc files are parsed using MDX, any HTML is treated as JSX. Therefore,
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## 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/).
|
||||||
|
|
||||||
|
```jsx title="myMarkdownFile.mdx"
|
||||||
|
import CodeBlock from '@theme/CodeBlock';
|
||||||
|
import MyComponentSource from '!!raw-loader!./myComponent';
|
||||||
|
|
||||||
|
<CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>;
|
||||||
|
```
|
||||||
|
|
||||||
|
import CodeBlock from '@theme/CodeBlock';
|
||||||
|
import MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponent';
|
||||||
|
|
||||||
|
<BrowserWindow url="http://localhost:3000">
|
||||||
|
|
||||||
|
<CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>
|
||||||
|
|
||||||
|
</BrowserWindow>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
:::note
|
||||||
|
|
||||||
|
You have to use `<CodeBlock>` rather than the Markdown triple-backtick ` ``` `, because the latter will ship out any of its content as-is, but you want JSX to insert the imported text here.
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
:::warning
|
||||||
|
|
||||||
|
This feature is experimental and might be subject to API breaking changes in the future.
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
## Importing Markdown {#importing-markdown}
|
## 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.
|
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.
|
||||||
|
@ -82,10 +116,10 @@ import Intro from './markdown-features-intro.mdx';
|
||||||
<Intro />;
|
<Intro />;
|
||||||
```
|
```
|
||||||
|
|
||||||
<BrowserWindow url="http://localhost:3000">
|
|
||||||
|
|
||||||
import Intro from './markdown-features-intro.mdx';
|
import Intro from './markdown-features-intro.mdx';
|
||||||
|
|
||||||
|
<BrowserWindow url="http://localhost:3000">
|
||||||
|
|
||||||
<Intro />
|
<Intro />
|
||||||
|
|
||||||
</BrowserWindow>
|
</BrowserWindow>
|
||||||
|
|
Loading…
Add table
Reference in a new issue