docs: add mdx-code-block around tabs; use JS example for magic commen…

…ts (#7307)

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>