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

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