diff --git a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
index 3510a73c45..724f9dc989 100644
--- a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
@@ -396,6 +396,7 @@ class HelloWorld {
 
 And you will get the following:
 
+````mdx-code-block
 <Tabs
   defaultValue="js"
   values={[
@@ -433,6 +434,7 @@ class HelloWorld {
 
 </TabItem>
 </Tabs>
+````
 
 You may want to implement your own `<MultiLanguageCode />` abstraction if you find the above approach too verbose. We might just implement one in future for convenience.
 
diff --git a/website/docs/guides/markdown-features/markdown-features-inline-toc.mdx b/website/docs/guides/markdown-features/markdown-features-inline-toc.mdx
index 37303d9483..9b2f815604 100644
--- a/website/docs/guides/markdown-features/markdown-features-inline-toc.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-inline-toc.mdx
@@ -21,6 +21,7 @@ import TOCInline from '@theme/TOCInline';
 <TOCInline toc={toc} />;
 ```
 
+```mdx-code-block
 import TOCInline from '@theme/TOCInline';
 
 <BrowserWindow>
@@ -28,6 +29,7 @@ import TOCInline from '@theme/TOCInline';
 <TOCInline toc={toc} />
 
 </BrowserWindow>
+```
 
 ## Custom table of contents
 
@@ -54,11 +56,13 @@ import TOCInline from '@theme/TOCInline';
 />;
 ```
 
+```mdx-code-block
 <BrowserWindow>
 
 <TOCInline toc={[toc[2], toc[4]]} />
 
 </BrowserWindow>
+```
 
 ---
 
diff --git a/website/docs/guides/markdown-features/markdown-features-tabs.mdx b/website/docs/guides/markdown-features/markdown-features-tabs.mdx
index 65f7930763..b852c351e9 100644
--- a/website/docs/guides/markdown-features/markdown-features-tabs.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-tabs.mdx
@@ -30,6 +30,7 @@ import TabItem from '@theme/TabItem';
 
 And you will get the following:
 
+```mdx-code-block
 <Tabs
   defaultValue="apple"
   values={[
@@ -41,6 +42,7 @@ And you will get the following:
   <TabItem value="orange">This is an orange 🍊</TabItem>
   <TabItem value="banana">This is a banana 🍌</TabItem>
 </Tabs>
+```
 
 :::info
 
@@ -78,6 +80,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
 </Tabs>
 ```
 
+```mdx-code-block
 <Tabs
   groupId="operating-systems"
   defaultValue="win"
@@ -99,6 +102,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
   <TabItem value="win">Use Ctrl + V to paste.</TabItem>
   <TabItem value="mac">Use Command + V to paste.</TabItem>
 </Tabs>
+```
 
 For all tab groups that have the same `groupId`, the possible values do not need to be the same. If one tab group with chooses an value that does not exist in another tab group with the same `groupId`, the tab group with the missing value won't change its tab. You can see that from the following example. Try to select Linux, and the above tab groups doesn't change.
 
@@ -117,6 +121,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
 </Tabs>
 ```
 
+```mdx-code-block
 <Tabs
   groupId="operating-systems"
   defaultValue="win"
@@ -129,6 +134,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
   <TabItem value="mac">I am macOS.</TabItem>
   <TabItem value="linux">I am Linux.</TabItem>
 </Tabs>
+```
 
 ---
 
@@ -160,6 +166,7 @@ Tab choices with different `groupId`s will not interfere with each other:
 </Tabs>
 ```
 
+```mdx-code-block
 <Tabs
   groupId="operating-systems"
   defaultValue="win"
@@ -181,6 +188,7 @@ Tab choices with different `groupId`s will not interfere with each other:
   <TabItem value="win">Windows is windows.</TabItem>
   <TabItem value="unix">Unix is unix.</TabItem>
 </Tabs>
+```
 
 ## Customizing tabs
 
@@ -204,6 +212,7 @@ import TabItem from '@theme/TabItem';
 </Tabs>;
 ```
 
+```mdx-code-block
 <Tabs
   className="unique-tabs"
   defaultValue="apple"
@@ -216,3 +225,4 @@ import TabItem from '@theme/TabItem';
   <TabItem value="orange">This is an orange 🍊</TabItem>
   <TabItem value="banana">This is a banana 🍌</TabItem>
 </Tabs>
+```
diff --git a/website/versioned_docs/version-2.0.0-alpha.69/markdown-features.mdx b/website/versioned_docs/version-2.0.0-alpha.69/markdown-features.mdx
index 596c2ccc7c..6b11564c81 100644
--- a/website/versioned_docs/version-2.0.0-alpha.69/markdown-features.mdx
+++ b/website/versioned_docs/version-2.0.0-alpha.69/markdown-features.mdx
@@ -65,6 +65,7 @@ The headers are well-spaced so that the hierarchy is clear.
 
 This will render in the browser as follows:
 
+```mdx-code-block
 import BrowserWindow from '@site/src/components/BrowserWindow';
 
 <BrowserWindow url="http://localhost:3000">
@@ -90,6 +91,7 @@ The headers are well-spaced so that the hierarchy is clear.
     - multiple times
 
 </BrowserWindow>
+```
 
 ## Markdown headers
 
@@ -286,6 +288,7 @@ import TabItem from '@theme/TabItem';
 
 And you will get the following:
 
+```mdx-code-block
 <Tabs
   defaultValue="apple"
   values={[
@@ -297,6 +300,7 @@ And you will get the following:
   <TabItem value="orange">This is an orange 🍊</TabItem>
   <TabItem value="banana">This is a banana 🍌</TabItem>
 </Tabs>
+```
 
 :::info
 
@@ -334,6 +338,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
 </Tabs>
 ```
 
+```mdx-code-block
 <Tabs
   groupId="operating-systems"
   defaultValue="win"
@@ -355,6 +360,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
   <TabItem value="win">Use Ctrl + V to paste.</TabItem>
   <TabItem value="mac">Use Command + V to paste.</TabItem>
 </Tabs>
+```
 
 For all tab groups that have the same `groupId`, the possible values do not need to be the same. If one tab group with chooses an value that does not exist in another tab group with the same `groupId`, the tab group with the missing value won't change its tab. You can see that from the following example. Try to select Linux, and the above tab groups doesn't change.
 
@@ -373,6 +379,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
 </Tabs>
 ```
 
+```mdx-code-block
 <Tabs
   groupId="operating-systems"
   defaultValue="win"
@@ -385,6 +392,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
   <TabItem value="mac">I am macOS.</TabItem>
   <TabItem value="linux">I am Linux.</TabItem>
 </Tabs>
+```
 
 ---
 
@@ -416,6 +424,7 @@ Tab choices with different `groupId`s will not interfere with each other:
 </Tabs>
 ```
 
+```mdx-code-block
 <Tabs
   groupId="operating-systems"
   defaultValue="win"
@@ -437,6 +446,7 @@ Tab choices with different `groupId`s will not interfere with each other:
   <TabItem value="win">Windows is windows.</TabItem>
   <TabItem value="unix">Unix is unix.</TabItem>
 </Tabs>
+```
 
 ### Customizing tabs
 
@@ -936,6 +946,7 @@ class HelloWorld {
 
 And you will get the following:
 
+````mdx-code-block
 <Tabs
   defaultValue="js"
   values={[
@@ -973,6 +984,7 @@ class HelloWorld {
 
 </TabItem>
 </Tabs>
+````
 
 You may want to implement your own `<MultiLanguageCode />` abstraction if you find the above approach too verbose. We might just implement one in future for convenience.
 
@@ -1050,11 +1062,13 @@ or
 [Download this PDF using Markdown](./assets/docusaurus-asset-example-pdf.pdf)
 ```
 
+```mdx-code-block
 <a
   target="_blank"
   href={require('./assets/docusaurus-asset-example-pdf.pdf').default}>
   Download this PDF
 </a>
+```
 
 [Download this PDF using Markdown](./assets/docusaurus-asset-example-pdf.pdf)
 
diff --git a/website/versioned_docs/version-2.0.0-alpha.70/markdown-features.mdx b/website/versioned_docs/version-2.0.0-alpha.70/markdown-features.mdx
index 44a72452d7..32ceee5a74 100644
--- a/website/versioned_docs/version-2.0.0-alpha.70/markdown-features.mdx
+++ b/website/versioned_docs/version-2.0.0-alpha.70/markdown-features.mdx
@@ -65,6 +65,7 @@ The headers are well-spaced so that the hierarchy is clear.
 
 This will render in the browser as follows:
 
+```mdx-code-block
 import BrowserWindow from '@site/src/components/BrowserWindow';
 
 <BrowserWindow url="http://localhost:3000">
@@ -90,6 +91,7 @@ The headers are well-spaced so that the hierarchy is clear.
     - multiple times
 
 </BrowserWindow>
+```
 
 ## Markdown headers
 
@@ -286,6 +288,7 @@ import TabItem from '@theme/TabItem';
 
 And you will get the following:
 
+```mdx-code-block
 <Tabs
   defaultValue="apple"
   values={[
@@ -297,6 +300,7 @@ And you will get the following:
   <TabItem value="orange">This is an orange 🍊</TabItem>
   <TabItem value="banana">This is a banana 🍌</TabItem>
 </Tabs>
+```
 
 :::info
 
@@ -334,6 +338,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
 </Tabs>
 ```
 
+```mdx-code-block
 <Tabs
   groupId="operating-systems"
   defaultValue="win"
@@ -355,6 +360,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
   <TabItem value="win">Use Ctrl + V to paste.</TabItem>
   <TabItem value="mac">Use Command + V to paste.</TabItem>
 </Tabs>
+```
 
 For all tab groups that have the same `groupId`, the possible values do not need to be the same. If one tab group with chooses an value that does not exist in another tab group with the same `groupId`, the tab group with the missing value won't change its tab. You can see that from the following example. Try to select Linux, and the above tab groups doesn't change.
 
@@ -373,6 +379,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
 </Tabs>
 ```
 
+```mdx-code-block
 <Tabs
   groupId="operating-systems"
   defaultValue="win"
@@ -385,6 +392,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
   <TabItem value="mac">I am macOS.</TabItem>
   <TabItem value="linux">I am Linux.</TabItem>
 </Tabs>
+```
 
 ---
 
@@ -416,6 +424,7 @@ Tab choices with different `groupId`s will not interfere with each other:
 </Tabs>
 ```
 
+```mdx-code-block
 <Tabs
   groupId="operating-systems"
   defaultValue="win"
@@ -437,6 +446,7 @@ Tab choices with different `groupId`s will not interfere with each other:
   <TabItem value="win">Windows is windows.</TabItem>
   <TabItem value="unix">Unix is unix.</TabItem>
 </Tabs>
+```
 
 ### Customizing tabs
 
@@ -460,6 +470,7 @@ import TabItem from '@theme/TabItem';
 </Tabs>;
 ```
 
+```mdx-code-block
 <Tabs
   className="unique-tabs"
   defaultValue="apple"
@@ -472,6 +483,7 @@ import TabItem from '@theme/TabItem';
   <TabItem value="orange">This is an orange 🍊</TabItem>
   <TabItem value="banana">This is a banana 🍌</TabItem>
 </Tabs>
+```
 
 ## Inline table of contents
 
@@ -489,6 +501,7 @@ import TOCInline from '@theme/TOCInline';
 <TOCInline toc={toc} />;
 ```
 
+```mdx-code-block
 import TOCInline from '@theme/TOCInline';
 
 <BrowserWindow>
@@ -496,6 +509,7 @@ import TOCInline from '@theme/TOCInline';
 <TOCInline toc={toc} />
 
 </BrowserWindow>
+```
 
 ### Custom table of contents
 
@@ -522,11 +536,13 @@ import TOCInline from '@theme/TOCInline';
 />;
 ```
 
+```mdx-code-block
 <BrowserWindow>
 
 <TOCInline toc={[toc[3], toc[4]]} />
 
 </BrowserWindow>
+```
 
 ## Callouts/admonitions
 
@@ -991,6 +1007,7 @@ class HelloWorld {
 
 And you will get the following:
 
+````mdx-code-block
 <Tabs
   defaultValue="js"
   values={[
@@ -1028,6 +1045,7 @@ class HelloWorld {
 
 </TabItem>
 </Tabs>
+````
 
 You may want to implement your own `<MultiLanguageCode />` abstraction if you find the above approach too verbose. We might just implement one in future for convenience.
 
@@ -1105,11 +1123,13 @@ or
 [Download this PDF using Markdown](./assets/docusaurus-asset-example-pdf.pdf)
 ```
 
+```mdx-code-block
 <a
   target="_blank"
   href={require('./assets/docusaurus-asset-example-pdf.pdf').default}>
   Download this PDF
 </a>
+```
 
 [Download this PDF using Markdown](./assets/docusaurus-asset-example-pdf.pdf)