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 9569c88b71..8edae9e263 100644
--- a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
@@ -282,6 +282,7 @@ Below, we will introduce how the magic comment system can be extended to define
 
 You can declare custom magic comments through theme config. For example, you can register another magic comment that adds a `code-block-error-line` class name:
 
+`````mdx-code-block
 <Tabs>
 <TabItem value="docusaurus.config.js">
 
@@ -325,32 +326,31 @@ module.exports = {
 <TabItem value="myDoc.md">
 
 ````md
-In TypeScript, types help prevent runtime errors.
+In JavaScript, trying to access properties on `null` will error.
 
-```ts
-function greet(name: string) {
-  // This will error
-  console.log(name.toUpper());
-  // .toUpper doesn't exist on string
-}
+```js
+const name = null;
+// This will error
+console.log(name.toUpperCase());
+// Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')
 ```
 ````
 
 </TabItem>
 
 </Tabs>
+`````
 
 ````mdx-code-block
 <BrowserWindow>
 
-In TypeScript, types help prevent runtime errors.
+In JavaScript, trying to access properties on `null` will error.
 
-```ts
-function greet(name: string) {
-  // This will error
-  console.log(name.toUpper());
-  // .toUpper doesn't exist on string
-}
+```js
+const name = null;
+// This will error
+console.log(name.toUpperCase());
+// Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')
 ```
 
 </BrowserWindow>