From 3d95a3e6b193a3ff534ffd06b6b9bd8b212ae06d Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Wed, 16 Jun 2021 00:38:28 +0800
Subject: [PATCH] docs(v2): add documentation about importing code files
 (#4974)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 .../markdown-features-react.mdx               | 38 ++++++++++++++++++-
 1 file changed, 36 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 288f3cdb3d..b4b8912968 100644
--- a/website/docs/guides/markdown-features/markdown-features-react.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-react.mdx
@@ -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}
 
 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 />;
 ```
 
-<BrowserWindow url="http://localhost:3000">
-
 import Intro from './markdown-features-intro.mdx';
 
+<BrowserWindow url="http://localhost:3000">
+
 <Intro />
 
 </BrowserWindow>