mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-28 08:27:03 +02:00
docs: wrap more JSX in mdx-code-block (#7568)
This commit is contained in:
parent
6d481f6a29
commit
c03def7d5f
7 changed files with 58 additions and 1 deletions
|
@ -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:
|
|||

|
||||
```
|
||||
|
||||
```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:
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue