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

* docs: avoid using nested mdx-code-block

* fix

website/docs/blog.mdx

@@ -192,9 +192,10 @@ Use the `authors` front matter field to declare blog post authors. An author sho
 
 Blog post authors can be declared directly inside the front matter:
 
-````mdx-code-block
+```mdx-code-block
 <Tabs groupId="author-front-matter">
-  <TabItem value="single" label="Single author">
+<TabItem value="single" label="Single author">
+```
 
 ```md title="my-blog-post.md"
 ---
@@ -207,8 +208,10 @@ authors:
 ---
 ```
 
-  </TabItem>
-  <TabItem value="multiple" label="Multiple authors">
+```mdx-code-block
+</TabItem>
+<TabItem value="multiple" label="Multiple authors">
+```
 
 ```md title="my-blog-post.md"
 ---
@@ -225,9 +228,10 @@ authors:
 ---
 ```
 
-  </TabItem>
+```mdx-code-block
+</TabItem>
 </Tabs>
-````
+```
 
 :::tip
 
@@ -279,9 +283,10 @@ Use the `authorsMapPath` plugin option to configure the path. JSON is also suppo
 
 In blog posts front matter, you can reference the authors declared in the global configuration file:
 
-````mdx-code-block
+```mdx-code-block
 <Tabs groupId="author-front-matter">
-  <TabItem value="single" label="Single author">
+<TabItem value="single" label="Single author">
+```
 
 ```md title="my-blog-post.md"
 ---
@@ -289,8 +294,10 @@ authors: jmarcey
 ---
 ```
 
-  </TabItem>
-  <TabItem value="multiple" label="Multiple authors">
+```mdx-code-block
+</TabItem>
+<TabItem value="multiple" label="Multiple authors">
+```
 
 ```md title="my-blog-post.md"
 ---
@@ -298,9 +305,10 @@ authors: [jmarcey, slorber]
 ---
 ```
 
-  </TabItem>
+```mdx-code-block
+</TabItem>
 </Tabs>
-````
+```
 
 :::info
 
@@ -394,9 +402,10 @@ The default reading time is able to accept additional options: `wordsPerMinute`
 
 Use the callback for all your customization needs:
 
-````mdx-code-block
+```mdx-code-block
 <Tabs>
 <TabItem value="disable-per-post" label="Per-post disabling">
+```
 
 **Disable reading time on one page:**
 
@@ -410,7 +419,9 @@ module.exports = {
           showReadingTime: true,
           // highlight-start
           readingTime: ({content, frontMatter, defaultReadingTime}) =>
-            frontMatter.hide_reading_time ? undefined : defaultReadingTime({content}),
+            frontMatter.hide_reading_time
+              ? undefined
+              : defaultReadingTime({content}),
           // highlight-end
         },
       },
@@ -429,8 +440,10 @@ hide_reading_time: true
 This page will no longer display the reading time stats!
 ```
 
+```mdx-code-block
 </TabItem>
 <TabItem value="passing-options" label="Passing options">
+```
 
 **Pass options to the default reading time function:**
 
@@ -452,8 +465,10 @@ module.exports = {
 };
 ```
 
+```mdx-code-block
 </TabItem>
 <TabItem value="using-custom-algo" label="Using custom algorithms">
+```
 
 **Use a custom implementation of reading time:**
 
@@ -475,9 +490,10 @@ module.exports = {
 };
 ```
 
+```mdx-code-block
 </TabItem>
 </Tabs>
-````
+```
 
 :::
 

website/docs/deployment.mdx

@@ -302,31 +302,37 @@ GitHub enterprise installations should work in the same manner as github.com; yo
 
 Finally, to deploy your site to GitHub Pages, run:
 
-````mdx-code-block
+```mdx-code-block
 <Tabs>
 <TabItem value="bash" label="Bash">
+```
 
 ```bash
 GIT_USER=<GITHUB_USERNAME> yarn deploy
 ```
 
+```mdx-code-block
 </TabItem>
 <TabItem value="windows" label="Windows">
+```
 
 ```batch
 cmd /C "set "GIT_USER=<GITHUB_USERNAME>" && yarn deploy"
 ```
 
+````mdx-code-block
 </TabItem>
 <TabItem value="powershell" label="PowerShell">
+```mdx-code-block
 
 ```powershell
 cmd /C 'set "GIT_USER=<GITHUB_USERNAME>" && yarn deploy'
-```
+````
 
+```mdx-code-block
 </TabItem>
 </Tabs>
-````
+```
 
 :::caution
 
@@ -352,16 +358,16 @@ Here are two approaches to deploying your docs with GitHub Actions. Based on the
 - Source repo and deployment repo are the **same** repository.
 - The deployment repo is a **remote** repository, different from the source.
 
-````mdx-code-block
+```mdx-code-block
 <Tabs>
 <TabItem value="same" label="Same">
+```
 
 While you can have both jobs defined in the same workflow file, the original `deploy` workflow will always be listed as skipped in the PR check suite status, which is not communicative of the actual status and provides no value to the review process. We therefore propose to manage them as separate workflows instead.
 
 We will use a popular third-party deployment action: [peaceiris/actions-gh-pages](https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-docusaurus).
 
 <details>
-
 <summary>GitHub action files</summary>
 
 Add these two workflow files:
@@ -446,8 +452,10 @@ jobs:
 
 </details>
 
+```mdx-code-block
 </TabItem>
 <TabItem value="remote" label="Remote">
+```
 
 A cross-repo publish is more difficult to set up, because you need to push to another repo with permission checks. We will be using SSH to do the authentication.
 
@@ -517,9 +525,10 @@ jobs:
 
 </details>
 
+```mdx-code-block
 </TabItem>
 </Tabs>
-````
+```
 
 ### Triggering deployment with Travis CI {#triggering-deployment-with-travis-ci}
 

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}
 

website/docs/swizzling.md

@@ -41,9 +41,10 @@ npm run swizzle
 
 It will generate a new component your `src/theme` directory, which should look like this example:
 
-````mdx-code-block
+```mdx-code-block
 <Tabs>
 <TabItem value="Ejecting">
+```
 
 ```jsx title="src/theme/SomeComponent.js"
 import React from 'react';
@@ -60,8 +61,10 @@ export default function SomeComponent(props) {
 }
 ```
 
+```mdx-code-block
 </TabItem>
 <TabItem value="Wrapping">
+```
 
 ```jsx title="src/theme/SomeComponent.js"
 import React from 'react';
@@ -78,9 +81,10 @@ export default function SomeComponentWrapper(props) {
 }
 ```
 
+```mdx-code-block
 </TabItem>
 </Tabs>
-````
+```
 
 To get an overview of all the themes and components available to swizzle, run: