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:
+
+
```jsx title="myMarkdownFile.mdx"
import CodeBlock from '@theme/CodeBlock';
import MyComponentSource from '!!raw-loader!./myComponent';
-{MyComponentSource};
+{MyComponentSource}
```
+
```mdx-code-block
import CodeBlock from '@theme/CodeBlock';
@@ -96,6 +104,14 @@ import MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponen
```
+You can also pass `title` prop to `CodeBlock` component in order to appear it as header above your codeblock:
+
+```jsx
+
+ {MyComponentSource}
+
+```
+
:::note
You have to use `` 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.