From 1e56020ea54bd8ad6f3a1f25d03a91d9e2b0c6bf Mon Sep 17 00:00:00 2001 From: Josh-Cena Date: Tue, 15 Jun 2021 21:09:37 +0800 Subject: [PATCH 1/3] Add documentation about importing code files Signed-off-by: Josh-Cena --- .../markdown-features-react.mdx | 32 +++++++++++++++++-- 1 file changed, 30 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 288f3cdb3dfa..a1d5b8d6a5c5 100644 --- a/website/docs/guides/markdown-features/markdown-features-react.mdx +++ b/website/docs/guides/markdown-features/markdown-features-react.mdx @@ -72,6 +72,34 @@ 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'; + +{MyComponentSource}; +``` + +import CodeBlock from '@theme/CodeBlock'; +import MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponent'; + + + +{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. + +::: + ## 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 +110,10 @@ import Intro from './markdown-features-intro.mdx'; ; ``` - - import Intro from './markdown-features-intro.mdx'; + + From b47655b76aa16feab756fda6972f0624f0cc8e56 Mon Sep 17 00:00:00 2001 From: Josh-Cena Date: Tue, 15 Jun 2021 22:14:50 +0800 Subject: [PATCH 2/3] Add warning about breaking API change Signed-off-by: Josh-Cena --- .../guides/markdown-features/markdown-features-react.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/website/docs/guides/markdown-features/markdown-features-react.mdx b/website/docs/guides/markdown-features/markdown-features-react.mdx index a1d5b8d6a5c5..d97b8d4375c0 100644 --- a/website/docs/guides/markdown-features/markdown-features-react.mdx +++ b/website/docs/guides/markdown-features/markdown-features-react.mdx @@ -100,6 +100,12 @@ You have to use `` rather than the Markdown triple-backtick ` ``` `, ::: +:::warning + +The `className="language-jsx"` prop is experimental and might be subject to breaking API 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. From 40686956d9736563b59fcad64f7edaed107b19e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Tue, 15 Jun 2021 18:20:29 +0200 Subject: [PATCH 3/3] Update website/docs/guides/markdown-features/markdown-features-react.mdx --- .../docs/guides/markdown-features/markdown-features-react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/guides/markdown-features/markdown-features-react.mdx b/website/docs/guides/markdown-features/markdown-features-react.mdx index d97b8d4375c0..b4b89129689e 100644 --- a/website/docs/guides/markdown-features/markdown-features-react.mdx +++ b/website/docs/guides/markdown-features/markdown-features-react.mdx @@ -102,7 +102,7 @@ You have to use `` rather than the Markdown triple-backtick ` ``` `, :::warning -The `className="language-jsx"` prop is experimental and might be subject to breaking API changes in the future. +This feature is experimental and might be subject to API breaking changes in the future. :::