From 35b35abe2852d3d4bda0d6a6d1f9c1e06ba800e8 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Sun, 5 Jun 2022 15:33:31 +0800 Subject: [PATCH] docs: wrap more JSX in mdx-code-block --- website/docs/advanced/ssg.md | 9 ++++++++- website/docs/api/plugins/plugin-debug.md | 6 ++++++ website/docs/guides/docs/sidebar/items.md | 18 ++++++++++++++++++ website/docs/guides/docs/versioning.md | 6 ++++++ .../markdown-features-assets.mdx | 8 ++++++++ .../markdown-features-code-blocks.mdx | 6 ++++++ website/docs/i18n/i18n-tutorial.md | 6 ++++++ 7 files changed, 58 insertions(+), 1 deletion(-) diff --git a/website/docs/advanced/ssg.md b/website/docs/advanced/ssg.md index dbd104d78a95..09fb981e6dfc 100644 --- a/website/docs/advanced/ssg.md +++ b/website/docs/advanced/ssg.md @@ -36,9 +36,10 @@ ReferenceError: window is not defined This is because during server-side rendering, the Docusaurus app isn't actually run in browser, and it doesn't know what `window` is. +```mdx-code-block
- What about process.env.NODE_ENV? +``` One exception to the "no Node globals" rule is `process.env.NODE_ENV`. In fact, you can use it in React, because Webpack injects this variable as a global: @@ -58,8 +59,10 @@ During Webpack build, the `process.env.NODE_ENV` will be replaced with the value import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +```mdx-code-block +``` ```diff import React from 'react'; @@ -74,8 +77,10 @@ export default function expensiveComp() { } ``` +```mdx-code-block +``` ```diff import React from 'react'; @@ -90,9 +95,11 @@ export default function expensiveComp() { } ``` +```mdx-code-block
+``` ## Understanding SSR {#understanding-ssr} diff --git a/website/docs/api/plugins/plugin-debug.md b/website/docs/api/plugins/plugin-debug.md index e8c79044d945..76ae7c95c6b7 100644 --- a/website/docs/api/plugins/plugin-debug.md +++ b/website/docs/api/plugins/plugin-debug.md @@ -67,8 +67,10 @@ Most Docusaurus users configure this plugin through the preset options. ::: +```mdx-code-block +``` If you use a preset, configure this plugin through the [preset options](../../using-plugins.md#docusauruspreset-classic): @@ -86,8 +88,10 @@ module.exports = { }; ``` +```mdx-code-block +``` If you are using a standalone plugin, provide options directly to the plugin: @@ -98,5 +102,7 @@ module.exports = { }; ``` +```mdx-code-block +``` diff --git a/website/docs/guides/docs/sidebar/items.md b/website/docs/guides/docs/sidebar/items.md index 04faf577a7e7..097e3293eb2f 100644 --- a/website/docs/guides/docs/sidebar/items.md +++ b/website/docs/guides/docs/sidebar/items.md @@ -404,8 +404,10 @@ You can express typical sidebar items without much customization more concisely An item with type `doc` can be simply a string representing its ID: +```mdx-code-block +``` ```js title="sidebars.js" module.exports = { @@ -420,8 +422,10 @@ module.exports = { }; ``` +```mdx-code-block +``` ```js title="sidebars.js" module.exports = { @@ -433,8 +437,10 @@ module.exports = { }; ``` +```mdx-code-block +``` So it's possible to simplify the example above to: @@ -472,8 +478,10 @@ module.exports = { A category item can be represented by an object whose key is its label, and the value is an array of subitems. +```mdx-code-block +``` ```js title="sidebars.js" module.exports = { @@ -489,8 +497,10 @@ module.exports = { }; ``` +```mdx-code-block +``` ```js title="sidebars.js" module.exports = { @@ -504,8 +514,10 @@ module.exports = { }; ``` +```mdx-code-block +``` This permits us to simplify that example to: @@ -553,8 +565,10 @@ Note how the two consecutive category shorthands are compressed into one object Wherever you have an array of items that is reduced to one category shorthand, you can omit that enclosing array as well. +```mdx-code-block +``` ```js title="sidebars.js" module.exports = { @@ -572,8 +586,10 @@ module.exports = { }; ``` +```mdx-code-block +``` ```js title="sidebars.js" module.exports = { @@ -587,5 +603,7 @@ module.exports = { }; ``` +```mdx-code-block +``` diff --git a/website/docs/guides/docs/versioning.md b/website/docs/guides/docs/versioning.md index 082b6ffb3d51..d2b3cd4f0a34 100644 --- a/website/docs/guides/docs/versioning.md +++ b/website/docs/guides/docs/versioning.md @@ -102,8 +102,10 @@ When tagging a new version, the document versioning mechanism will: 1. Place the new file into the corresponding version folder. 2. Include the reference to the new file in the corresponding sidebar file according to the version number. +```mdx-code-block +``` ```bash # The new file. @@ -113,8 +115,10 @@ docs/new.md sidebars.js ``` +```mdx-code-block +``` ```bash # The new file. @@ -124,8 +128,10 @@ versioned_docs/version-1.0.0/new.md versioned_sidebars/version-1.0.0-sidebars.json ``` +```mdx-code-block +``` ### Updating an existing version {#updating-an-existing-version} diff --git a/website/docs/guides/markdown-features/markdown-features-assets.mdx b/website/docs/guides/markdown-features/markdown-features-assets.mdx index c4ba65dfa6e2..87212049b26f 100644 --- a/website/docs/guides/markdown-features/markdown-features-assets.mdx +++ b/website/docs/guides/markdown-features/markdown-features-assets.mdx @@ -27,8 +27,10 @@ Let's imagine the following file structure: You can display images in three different ways: Markdown syntax, CJS require, or ES imports syntax. +```mdx-code-block +``` Display images using simple Markdown syntax: @@ -36,8 +38,10 @@ Display images using simple Markdown syntax: ![Example banner](./assets/docusaurus-asset-example-banner.png) ``` +```mdx-code-block +``` Display images using inline CommonJS `require` in JSX image tag: @@ -48,8 +52,10 @@ Display images using inline CommonJS `require` in JSX image tag: /> ``` +```mdx-code-block +``` Display images using ES `import` syntax and JSX image tag: @@ -59,8 +65,10 @@ import myImageUrl from './assets/docusaurus-asset-example-banner.png'; Example banner; ``` +```mdx-code-block +``` All of the above result in displaying the image: diff --git a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx index 15a30c528017..f6b47f22ac31 100644 --- a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx +++ b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx @@ -23,7 +23,9 @@ function HelloCodeTitle(props) { ``` ```` +```mdx-code-block +``` ```jsx title="/src/components/HelloCodeTitle.js" function HelloCodeTitle(props) { @@ -31,7 +33,9 @@ function HelloCodeTitle(props) { } ``` +```mdx-code-block +``` ## Syntax highlighting {#syntax-highlighting} @@ -809,6 +813,7 @@ export default function MyReactPage() { } ``` +```mdx-code-block +``` The props accepted are `language`, `title` and `showLineNumbers`, in the same way as you write Markdown code blocks. diff --git a/website/docs/i18n/i18n-tutorial.md b/website/docs/i18n/i18n-tutorial.md index d04b61744bec..85504af3f442 100644 --- a/website/docs/i18n/i18n-tutorial.md +++ b/website/docs/i18n/i18n-tutorial.md @@ -115,8 +115,10 @@ Locate all text labels in your React code that will be visible to your users, an Use the one that better fits the context semantically. For example, the `` can be used as React children, while for props that expect a string, the callback can be used. +```mdx-code-block +``` ```jsx title="src/pages/index.js" import React from 'react'; @@ -144,8 +146,10 @@ export default function Home() { } ``` +```mdx-code-block +``` ```jsx title="src/pages/index.js" import React from 'react'; @@ -199,8 +203,10 @@ export default function Home() { } ``` +```mdx-code-block +``` :::info