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): Elaboration of raw-loader in markdown react component (#5210)

Browse source 
* docs(v2): Elaboration of raw-loader in React component

* Add prettier ignore for a blocks to avoid unintended semicolon
This commit is contained in:
Pranab Das 2021-07-23 16:31:38 +08:00 • committed by GitHub
parent 700a82aefe
commit 7b2d45a439
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -74,14 +74,22 @@ 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/).
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`, first you need to install it in your project:
```bash npm2yarn
npm install --save raw-loader
```
Now you can import code snippets from another file as it is:
<!-- prettier-ignore-start -->
```jsx title="myMarkdownFile.mdx"
import CodeBlock from '@theme/CodeBlock';
import MyComponentSource from '!!raw-loader!./myComponent';
<CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>;
<CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>
```
<!-- prettier-ignore-end -->
```mdx-code-block
import CodeBlock from '@theme/CodeBlock';
@ -96,6 +104,14 @@ import MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponen
<br />
```
You can also pass `title` prop to `CodeBlock` component in order to appear it as header above your codeblock:
```jsx
<CodeBlock className="language-jsx" title="/src/myComponent">
{MyComponentSource}
</CodeBlock>
```
:::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.