docs: add mdx-code-block around tabs; use JS example for magic comments (#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
+```js
-function greet(name: string) {
+const name = null;
 // This will error
-  console.log(name.toUpper());
+console.log(name.toUpperCase());
-  // .toUpper doesn't exist on string
+// 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
+```js
-function greet(name: string) {
+const name = null;
 // This will error
-  console.log(name.toUpper());
+console.log(name.toUpperCase());
-  // .toUpper doesn't exist on string
+// Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')
-}
 ```
 
 </BrowserWindow>