docs: wrap more JSX in mdx-code-block (#7568)

This commit is contained in:
Joshua Chen 2022-06-05 15:41:06 +08:00 committed by GitHub
parent 6d481f6a29
commit c03def7d5f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 58 additions and 1 deletions

View file

@ -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. 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
<details id="node-env"> <details id="node-env">
<summary>What about <code>process.env.NODE_ENV</code>?</summary> <summary>What about <code>process.env.NODE_ENV</code>?</summary>
```
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: 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'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';
```mdx-code-block
<Tabs> <Tabs>
<TabItem value="Development"> <TabItem value="Development">
```
```diff ```diff
import React from 'react'; import React from 'react';
@ -74,8 +77,10 @@ export default function expensiveComp() {
} }
``` ```
```mdx-code-block
</TabItem> </TabItem>
<TabItem value="Production"> <TabItem value="Production">
```
```diff ```diff
import React from 'react'; import React from 'react';
@ -90,9 +95,11 @@ export default function expensiveComp() {
} }
``` ```
```mdx-code-block
</TabItem> </TabItem>
</Tabs> </Tabs>
</details> </details>
```
## Understanding SSR {#understanding-ssr} ## Understanding SSR {#understanding-ssr}

View file

@ -67,8 +67,10 @@ Most Docusaurus users configure this plugin through the preset options.
::: :::
```mdx-code-block
<Tabs> <Tabs>
<TabItem value="Preset Options"> <TabItem value="Preset Options">
```
If you use a preset, configure this plugin through the [preset options](../../using-plugins.md#docusauruspreset-classic): 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
</TabItem> </TabItem>
<TabItem value="Plugin Options"> <TabItem value="Plugin Options">
```
If you are using a standalone plugin, provide options directly to the plugin: If you are using a standalone plugin, provide options directly to the plugin:
@ -98,5 +102,7 @@ module.exports = {
}; };
``` ```
```mdx-code-block
</TabItem> </TabItem>
</Tabs> </Tabs>
```

View file

@ -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: An item with type `doc` can be simply a string representing its ID:
```mdx-code-block
<Tabs> <Tabs>
<TabItem value="Longhand"> <TabItem value="Longhand">
```
```js title="sidebars.js" ```js title="sidebars.js"
module.exports = { module.exports = {
@ -420,8 +422,10 @@ module.exports = {
}; };
``` ```
```mdx-code-block
</TabItem> </TabItem>
<TabItem value="Shorthand"> <TabItem value="Shorthand">
```
```js title="sidebars.js" ```js title="sidebars.js"
module.exports = { module.exports = {
@ -433,8 +437,10 @@ module.exports = {
}; };
``` ```
```mdx-code-block
</TabItem> </TabItem>
</Tabs> </Tabs>
```
So it's possible to simplify the example above to: 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. 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
<Tabs> <Tabs>
<TabItem value="Longhand"> <TabItem value="Longhand">
```
```js title="sidebars.js" ```js title="sidebars.js"
module.exports = { module.exports = {
@ -489,8 +497,10 @@ module.exports = {
}; };
``` ```
```mdx-code-block
</TabItem> </TabItem>
<TabItem value="Shorthand"> <TabItem value="Shorthand">
```
```js title="sidebars.js" ```js title="sidebars.js"
module.exports = { module.exports = {
@ -504,8 +514,10 @@ module.exports = {
}; };
``` ```
```mdx-code-block
</TabItem> </TabItem>
</Tabs> </Tabs>
```
This permits us to simplify that example to: 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. 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
<Tabs> <Tabs>
<TabItem value="Before"> <TabItem value="Before">
```
```js title="sidebars.js" ```js title="sidebars.js"
module.exports = { module.exports = {
@ -572,8 +586,10 @@ module.exports = {
}; };
``` ```
```mdx-code-block
</TabItem> </TabItem>
<TabItem value="After"> <TabItem value="After">
```
```js title="sidebars.js" ```js title="sidebars.js"
module.exports = { module.exports = {
@ -587,5 +603,7 @@ module.exports = {
}; };
``` ```
```mdx-code-block
</TabItem> </TabItem>
</Tabs> </Tabs>
```

View file

@ -102,8 +102,10 @@ When tagging a new version, the document versioning mechanism will:
1. Place the new file into the corresponding version folder. 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. 2. Include the reference to the new file in the corresponding sidebar file according to the version number.
```mdx-code-block
<Tabs> <Tabs>
<TabItem value="Current version structure"> <TabItem value="Current version structure">
```
```bash ```bash
# The new file. # The new file.
@ -113,8 +115,10 @@ docs/new.md
sidebars.js sidebars.js
``` ```
```mdx-code-block
</TabItem> </TabItem>
<TabItem value="Older version structure"> <TabItem value="Older version structure">
```
```bash ```bash
# The new file. # The new file.
@ -124,8 +128,10 @@ versioned_docs/version-1.0.0/new.md
versioned_sidebars/version-1.0.0-sidebars.json versioned_sidebars/version-1.0.0-sidebars.json
``` ```
```mdx-code-block
</TabItem> </TabItem>
</Tabs> </Tabs>
```
### Updating an existing version {#updating-an-existing-version} ### Updating an existing version {#updating-an-existing-version}

View file

@ -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. You can display images in three different ways: Markdown syntax, CJS require, or ES imports syntax.
```mdx-code-block
<Tabs> <Tabs>
<TabItem value="Markdown syntax"> <TabItem value="Markdown syntax">
```
Display images using simple Markdown syntax: Display images using simple Markdown syntax:
@ -36,8 +38,10 @@ Display images using simple Markdown syntax:
![Example banner](./assets/docusaurus-asset-example-banner.png) ![Example banner](./assets/docusaurus-asset-example-banner.png)
``` ```
```mdx-code-block
</TabItem> </TabItem>
<TabItem value="CommonJS require"> <TabItem value="CommonJS require">
```
Display images using inline CommonJS `require` in JSX image tag: 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
</TabItem> </TabItem>
<TabItem value="Import statement"> <TabItem value="Import statement">
```
Display images using ES `import` syntax and JSX image tag: Display images using ES `import` syntax and JSX image tag:
@ -59,8 +65,10 @@ import myImageUrl from './assets/docusaurus-asset-example-banner.png';
<img src={myImageUrl} alt="Example banner" />; <img src={myImageUrl} alt="Example banner" />;
``` ```
```mdx-code-block
</TabItem> </TabItem>
</Tabs> </Tabs>
```
All of the above result in displaying the image: All of the above result in displaying the image:

View file

@ -23,7 +23,9 @@ function HelloCodeTitle(props) {
``` ```
```` ````
```mdx-code-block
<BrowserWindow> <BrowserWindow>
```
```jsx title="/src/components/HelloCodeTitle.js" ```jsx title="/src/components/HelloCodeTitle.js"
function HelloCodeTitle(props) { function HelloCodeTitle(props) {
@ -31,7 +33,9 @@ function HelloCodeTitle(props) {
} }
``` ```
```mdx-code-block
</BrowserWindow> </BrowserWindow>
```
## Syntax highlighting {#syntax-highlighting} ## Syntax highlighting {#syntax-highlighting}
@ -809,6 +813,7 @@ export default function MyReactPage() {
} }
``` ```
```mdx-code-block
<BrowserWindow> <BrowserWindow>
<CodeBlock <CodeBlock
language="jsx" language="jsx"
@ -819,6 +824,7 @@ export default function MyReactPage() {
}`} }`}
</CodeBlock> </CodeBlock>
</BrowserWindow> </BrowserWindow>
```
The props accepted are `language`, `title` and `showLineNumbers`, in the same way as you write Markdown code blocks. The props accepted are `language`, `title` and `showLineNumbers`, in the same way as you write Markdown code blocks.

View file

@ -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 `<Translate>` can be used as React children, while for props that expect a string, the callback can be used. Use the one that better fits the context semantically. For example, the `<Translate>` can be used as React children, while for props that expect a string, the callback can be used.
```mdx-code-block
<Tabs> <Tabs>
<TabItem value="Before"> <TabItem value="Before">
```
```jsx title="src/pages/index.js" ```jsx title="src/pages/index.js"
import React from 'react'; import React from 'react';
@ -144,8 +146,10 @@ export default function Home() {
} }
``` ```
```mdx-code-block
</TabItem> </TabItem>
<TabItem value="After"> <TabItem value="After">
```
```jsx title="src/pages/index.js" ```jsx title="src/pages/index.js"
import React from 'react'; import React from 'react';
@ -199,8 +203,10 @@ export default function Home() {
} }
``` ```
```mdx-code-block
</TabItem> </TabItem>
</Tabs> </Tabs>
```
:::info :::info