docs: avoid using nested mdx-code-block (#7543)

* docs: avoid using nested mdx-code-block

* fix

website/docs/guides/markdown-features/markdown-features-admonitions.mdx

@@ -47,6 +47,7 @@ Some **content** with _markdown_ `syntax`. Check [this `api`](#).
 :::
 ```
 
+```mdx-code-block
 <BrowserWindow>
 
 :::note
@@ -80,6 +81,7 @@ Some **content** with _markdown_ `syntax`. Check [this `api`](#).
 :::
 
 </BrowserWindow>
+```
 
 ## Usage with Prettier {#usage-with-prettier}
 
@@ -115,6 +117,7 @@ Some **content** with _markdown_ `syntax`.
 :::
 ```
 
+```mdx-code-block
 <BrowserWindow>
 
 :::note Your Title
@@ -124,6 +127,7 @@ Some **content** with _markdown_ `syntax`.
 :::
 
 </BrowserWindow>
+```
 
 ## Admonitions with MDX {#admonitions-with-mdx}
 
@@ -145,21 +149,21 @@ import TabItem from '@theme/TabItem';
 :::
 ```
 
+```mdx-code-block
 <BrowserWindow>
 
 :::tip Use tabs in admonitions
 
-```mdx-code-block
 <Tabs>
   <TabItem value="apple" label="Apple">This is an apple 🍎</TabItem>
   <TabItem value="orange" label="Orange">This is an orange 🍊</TabItem>
   <TabItem value="banana" label="Banana">This is a banana 🍌</TabItem>
 </Tabs>
-```
 
 :::
 
 </BrowserWindow>
+```
 
 ## Usage in JSX {#usage-in-jsx}
 
@@ -190,6 +194,7 @@ The types that are accepted are the same as above: `note`, `tip`, `danger`, `inf
 </Admonition>
 ```
 
+```mdx-code-block
 <BrowserWindow>
   <Admonition type="tip" icon="💡" title="Did you know...">
     <p>
@@ -198,3 +203,4 @@ The types that are accepted are the same as above: `note`, `tip`, `danger`, `inf
     </p>
   </Admonition>
 </BrowserWindow>
+```

website/docs/guides/markdown-features/markdown-features-code-blocks.mdx

@@ -161,8 +161,9 @@ function HighlightMoreText(highlight) {
 ```
 ````
 
-````mdx-code-block
+```mdx-code-block
 <BrowserWindow>
+```
 
 ```js
 function HighlightSomeText(highlight) {
@@ -185,8 +186,9 @@ function HighlightMoreText(highlight) {
 }
 ```
 
+```mdx-code-block
 </BrowserWindow>
-````
+```
 
 Supported commenting syntax:
 
@@ -235,8 +237,9 @@ export default MyComponent;
 ```
 ````
 
-````mdx-code-block
+```mdx-code-block
 <BrowserWindow>
+```
 
 ```jsx {1,4-6,11}
 import React from 'react';
@@ -252,8 +255,9 @@ function MyComponent(props) {
 export default MyComponent;
 ```
 
+```mdx-code-block
 </BrowserWindow>
-````
+```
 
 :::tip prefer comments
 
@@ -347,8 +351,9 @@ console.log(name.toUpperCase());
 </Tabs>
 ```
 
-````mdx-code-block
+```mdx-code-block
 <BrowserWindow>
+```
 
 In JavaScript, trying to access properties on `null` will error.
 
@@ -359,8 +364,9 @@ console.log(name.toUpperCase());
 // Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')
 ```
 
+```mdx-code-block
 </BrowserWindow>
-````
+```
 
 If you use number ranges in metastring (the `{1,3-4}` syntax), Docusaurus will apply the **first `magicComments` entry**'s class name. This, by default, is `theme-code-block-highlighted-line`, but if you change the `magicComments` config and use a different entry as the first one, the meaning of the metastring range will change as well.
 
@@ -396,8 +402,9 @@ export default MyComponent;
 ```
 ````
 
-````mdx-code-block
+```mdx-code-block
 <BrowserWindow>
+```
 
 ```jsx {1,4-6,11} showLineNumbers
 import React from 'react';
@@ -413,8 +420,9 @@ function MyComponent(props) {
 export default MyComponent;
 ```
 
+```mdx-code-block
 </BrowserWindow>
-````
+```
 
 ## Interactive code editor {#interactive-code-editor}
 
@@ -465,8 +473,9 @@ 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
+```mdx-code-block
 <BrowserWindow>
+```
 
 ```jsx live
 function Clock(props) {
@@ -491,8 +500,9 @@ function Clock(props) {
 }
 ```
 
+```mdx-code-block
 </BrowserWindow>
-````
+```
 
 ### Imports {#imports}
 
@@ -541,8 +551,9 @@ export default ReactLiveScope;
 
 The `ButtonExample` component is now available to use:
 
-````mdx-code-block
+```mdx-code-block
 <BrowserWindow>
+```
 
 ```jsx live
 function MyPlayground(props) {
@@ -554,8 +565,9 @@ function MyPlayground(props) {
 }
 ```
 
+```mdx-code-block
 </BrowserWindow>
-````
+```
 
 ## Using JSX markup in code blocks {#using-jsx-markup}
 
@@ -646,10 +658,11 @@ class HelloWorld {
 
 And you will get the following:
 
-````mdx-code-block
+```mdx-code-block
 <BrowserWindow>
 <Tabs>
 <TabItem value="js" label="JavaScript">
+```
 
 ```js
 function helloWorld() {
@@ -657,16 +670,20 @@ function helloWorld() {
 }
 ```
 
+```mdx-code-block
 </TabItem>
 <TabItem value="py" label="Python">
+```
 
 ```py
 def hello_world():
   print("Hello, world!")
 ```
 
+```mdx-code-block
 </TabItem>
 <TabItem value="java" label="Java">
+```
 
 ```java
 class HelloWorld {
@@ -676,10 +693,11 @@ class HelloWorld {
 }
 ```
 
+```mdx-code-block
 </TabItem>
 </Tabs>
 </BrowserWindow>
-````
+```
 
 If you have multiple of these multi-language code tabs, and you want to sync the selection across the tab instances, refer to the [Syncing tab choices section](markdown-features-tabs.mdx#syncing-tab-choices).
 

website/docs/guides/markdown-features/markdown-features-react.mdx

@@ -204,21 +204,22 @@ We use lower-case tag names like `highlight` to "pretend" that they are intrinsi
 
 Docusaurus v2 is using MDX v1, which has a lot of known cases where the content fails to be correctly parsed as Markdown. Use the **[MDX playground](https://mdx-git-renovate-babel-monorepo-mdx.vercel.app/playground)** to ensure that your syntax is valid MDX.
 
-````mdx-code-block
 <details>
-
 <summary>Samples of parsing failures</summary>
 
 **A paragraph starting with a JSX tag will be seen entirely as a JSX string:**
 
+```mdx-code-block
 <Tabs groupId="jsx-and-md">
 <TabItem value="Problem">
 <div className={styles.wrappingBlock}>
+```
 
 ```jsx
 <span style={{color: 'red'}}>Highlighted text</span> but afterwards _Markdown_ **doesn't work**
 ```
 
+```mdx-code-block
 </div>
 <div className={styles.wrappingBlock}>
 <BrowserWindow>
@@ -233,6 +234,7 @@ Docusaurus v2 is using MDX v1, which has a lot of known cases where the content
 Use JSX for the rest of the line, or prefix the line with some plain text:
 
 <div className={styles.wrappingBlock}>
+```
 
 ```jsx
 <span style={{color: 'red'}}>Use JSX for the paragraph</span> to stop <i>worrying about</i> <b>Markdown</b>
@@ -240,6 +242,7 @@ Use JSX for the rest of the line, or prefix the line with some plain text:
 &#8203;<span style={{color: 'red'}}>← This is a zero-width space</span> and afterwards <i>Markdown</i> <b>works</b>
 ```
 
+```mdx-code-block
 </div>
 <div className={styles.wrappingBlock}>
 <BrowserWindow>
@@ -258,11 +261,13 @@ Use JSX for the rest of the line, or prefix the line with some plain text:
 <Tabs groupId="jsx-and-md">
 <TabItem value="Problem">
 <div className={styles.wrappingBlock}>
+```
 
 ```jsx
 <span style={{color: 'red'}}>**Bold doesn't work**</span>
 ```
 
+```mdx-code-block
 </div>
 <div className={styles.wrappingBlock}>
 <BrowserWindow>
@@ -278,6 +283,7 @@ Use JSX for the rest of the line, or prefix the line with some plain text:
 Use JSX within JSX tag, or move the Markdown to the outer layer:
 
 <div className={styles.wrappingBlock}>
+```
 
 ```jsx
 <span style={{color: 'red'}}><b>Bold now works</b></span>
@@ -285,6 +291,7 @@ Use JSX within JSX tag, or move the Markdown to the outer layer:
 **<span style={{color: 'red'}}>Bold now works</span>**
 ```
 
+```mdx-code-block
 </div>
 <div className={styles.wrappingBlock}>
 <BrowserWindow>
@@ -303,13 +310,13 @@ Use JSX within JSX tag, or move the Markdown to the outer layer:
 <Tabs groupId="jsx-and-md">
 <TabItem value="Problem">
 <div className={styles.wrappingBlock}>
-
-```jsx
-<div style={{color: 'red'}}>
-**Bold still doesn't work**
-</div>
 ```
 
+```jsx
+<div style={{color: 'red'}}>**Bold still doesn't work**</div>
+```
+
+```mdx-code-block
 </div>
 <div className={styles.wrappingBlock}>
 <BrowserWindow>
@@ -326,15 +333,13 @@ Use JSX within JSX tag, or move the Markdown to the outer layer:
 Add an empty new line:
 
 <div className={styles.wrappingBlock}>
-
-```jsx
-<div style={{color: 'red'}}>
-
-**Bold now works**
-
-</div>
 ```
 
+```jsx
+<div style={{color: 'red'}}>**Bold now works**</div>
+```
+
+```mdx-code-block
 </div>
 <div className={styles.wrappingBlock}>
 <BrowserWindow>
@@ -353,15 +358,13 @@ Add an empty new line:
 <Tabs groupId="jsx-and-md">
 <TabItem value="Problem">
 <div className={styles.wrappingBlock}>
-
-```jsx
-<div style={{color: 'red'}}>
-
-    You may think I'm just some text...
-
-</div>
 ```
 
+```jsx
+<div style={{color: 'red'}}>You may think I'm just some text...</div>
+```
+
+```mdx-code-block
 </div>
 <div className={styles.wrappingBlock}>
 <BrowserWindow>
@@ -380,15 +383,13 @@ Add an empty new line:
 Don't indent:
 
 <div className={styles.wrappingBlock}>
-
-```jsx
-<div style={{color: 'red'}}>
-
-Now I'm actually just text
-
-</div>
 ```
 
+```jsx
+<div style={{color: 'red'}}>Now I'm actually just text</div>
+```
+
+```mdx-code-block
 </div>
 <div className={styles.wrappingBlock}>
 <BrowserWindow>
@@ -402,7 +403,7 @@ Now I'm actually just text
 </TabItem>
 </Tabs>
 </details>
-````
+```
 
 ## Importing code snippets {#importing-code-snippets}