From 7b2d45a439ac1a368630488e70b992bcc1808ec4 Mon Sep 17 00:00:00 2001
From: Pranab Das <31024886+pranabdas@users.noreply.github.com>
Date: Fri, 23 Jul 2021 16:31:38 +0800
Subject: [PATCH] docs(v2): Elaboration of raw-loader in markdown react
 component (#5210)

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

* Add prettier ignore for a blocks to avoid unintended semicolon
---
 .../markdown-features-react.mdx               | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/website/docs/guides/markdown-features/markdown-features-react.mdx b/website/docs/guides/markdown-features/markdown-features-react.mdx
index 982b75a90d..90d78ab74b 100644
--- a/website/docs/guides/markdown-features/markdown-features-react.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-react.mdx
@@ -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.