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

@ -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
<Tabs>
<TabItem value="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)
```
```mdx-code-block
</TabItem>
<TabItem value="CommonJS require">
```
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 value="Import statement">
```
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" />;
```
```mdx-code-block
</TabItem>
</Tabs>
```
All of the above result in displaying the image:

View file

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