diff --git a/website/docs/guides/docs/docs-create-doc.mdx b/website/docs/guides/docs/docs-create-doc.mdx
index 839335be3f..4abbec3db2 100644
--- a/website/docs/guides/docs/docs-create-doc.mdx
+++ b/website/docs/guides/docs/docs-create-doc.mdx
@@ -52,6 +52,7 @@ With `{#custom-id}` syntax you can set your own header id.
 
 This will render in the browser as follows:
 
+```mdx-code-block
 import BrowserWindow from '@site/src/components/BrowserWindow';
 
 <BrowserWindow url="http://localhost:3000">
@@ -81,3 +82,4 @@ The headers are well-spaced so that the hierarchy is clear.
 With <code>{#custom-id}</code> syntax you can set your own header id.
 
 </BrowserWindow>
+```
diff --git a/website/docs/guides/markdown-features/markdown-features-react.mdx b/website/docs/guides/markdown-features/markdown-features-react.mdx
index b4b8912968..982b75a90d 100644
--- a/website/docs/guides/markdown-features/markdown-features-react.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-react.mdx
@@ -83,6 +83,7 @@ import MyComponentSource from '!!raw-loader!./myComponent';
 <CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>;
 ```
 
+```mdx-code-block
 import CodeBlock from '@theme/CodeBlock';
 import MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponent';
 
@@ -93,6 +94,7 @@ import MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponen
 </BrowserWindow>
 
 <br />
+```
 
 :::note
 
@@ -116,6 +118,7 @@ import Intro from './markdown-features-intro.mdx';
 <Intro />;
 ```
 
+```mdx-code-block
 import Intro from './markdown-features-intro.mdx';
 
 <BrowserWindow url="http://localhost:3000">
@@ -125,6 +128,7 @@ import Intro from './markdown-features-intro.mdx';
 </BrowserWindow>
 
 <br />
+```
 
 This way, you can reuse contents among multiple pages and avoid duplicating materials.
 
diff --git a/website/versioned_docs/version-2.0.0-beta.1/guides/docs/docs-create-doc.mdx b/website/versioned_docs/version-2.0.0-beta.1/guides/docs/docs-create-doc.mdx
index 839335be3f..4abbec3db2 100644
--- a/website/versioned_docs/version-2.0.0-beta.1/guides/docs/docs-create-doc.mdx
+++ b/website/versioned_docs/version-2.0.0-beta.1/guides/docs/docs-create-doc.mdx
@@ -52,6 +52,7 @@ With `{#custom-id}` syntax you can set your own header id.
 
 This will render in the browser as follows:
 
+```mdx-code-block
 import BrowserWindow from '@site/src/components/BrowserWindow';
 
 <BrowserWindow url="http://localhost:3000">
@@ -81,3 +82,4 @@ The headers are well-spaced so that the hierarchy is clear.
 With <code>{#custom-id}</code> syntax you can set your own header id.
 
 </BrowserWindow>
+```
diff --git a/website/versioned_docs/version-2.0.0-beta.1/guides/markdown-features/markdown-features-react.mdx b/website/versioned_docs/version-2.0.0-beta.1/guides/markdown-features/markdown-features-react.mdx
index b4b8912968..982b75a90d 100644
--- a/website/versioned_docs/version-2.0.0-beta.1/guides/markdown-features/markdown-features-react.mdx
+++ b/website/versioned_docs/version-2.0.0-beta.1/guides/markdown-features/markdown-features-react.mdx
@@ -83,6 +83,7 @@ import MyComponentSource from '!!raw-loader!./myComponent';
 <CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>;
 ```
 
+```mdx-code-block
 import CodeBlock from '@theme/CodeBlock';
 import MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponent';
 
@@ -93,6 +94,7 @@ import MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponen
 </BrowserWindow>
 
 <br />
+```
 
 :::note
 
@@ -116,6 +118,7 @@ import Intro from './markdown-features-intro.mdx';
 <Intro />;
 ```
 
+```mdx-code-block
 import Intro from './markdown-features-intro.mdx';
 
 <BrowserWindow url="http://localhost:3000">
@@ -125,6 +128,7 @@ import Intro from './markdown-features-intro.mdx';
 </BrowserWindow>
 
 <br />
+```
 
 This way, you can reuse contents among multiple pages and avoid duplicating materials.