From ae7b91f96bb4abe4bf31bfa2714035d73e5e4f7a Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Wed, 4 May 2022 20:15:39 +0800
Subject: [PATCH] docs: add mdx-code-block around tabs; use JS example for
 magic comments

---
 .../markdown-features-code-blocks.mdx         | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

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 9569c88b71eb..8edae9e2639e 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>