3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-29 18:27:56 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs: wrap code block demos in mdx-code-block (#7262)

Browse source
This commit is contained in:
Joshua Chen 2022-04-29 17:09:54 +08:00 • committed by GitHub
parent 7073cc3462
commit 0102c2e2ae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
View file

@ -234,6 +234,7 @@ export default MyComponent;
```
````
````mdx-code-block
<BrowserWindow>
```jsx {1,4-6,11}
@ -251,6 +252,7 @@ export default MyComponent;
```
</BrowserWindow>
````
:::tip prefer comments
@ -294,6 +296,7 @@ export default MyComponent;
```
````
````mdx-code-block
<BrowserWindow>
```jsx {1,4-6,11} showLineNumbers
@ -311,6 +314,7 @@ export default MyComponent;
```
</BrowserWindow>
````
## Interactive code editor {#interactive-code-editor}
@ -361,6 +365,7 @@ function Clock(props) {
The code block will be rendered as an interactive editor. Changes to the code will reflect on the result panel live.
````mdx-code-block
<BrowserWindow>
```jsx live
@ -387,6 +392,7 @@ function Clock(props) {
```
</BrowserWindow>
````
### Imports {#imports}
@ -435,6 +441,7 @@ export default ReactLiveScope;
The `ButtonExample` component is now available to use:
````mdx-code-block
<BrowserWindow>
```jsx live
@ -448,6 +455,7 @@ function MyPlayground(props) {
```
</BrowserWindow>
````
## Using JSX markup in code blocks {#using-jsx-markup}