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

* docs: avoid using nested mdx-code-block

* fix

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).