feat: upgrade to MDX v2 (#8288)

Co-authored-by: Armano <armano2@users.noreply.github.com>

website/versioned_docs/version-2.0.1/guides/markdown-features/markdown-features-admonitions.mdx

@@ -87,7 +87,7 @@ Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
 
 If you use [Prettier](https://prettier.io) to format your Markdown files, Prettier might auto-format your code to invalid admonition syntax. To avoid this problem, add empty lines around the starting and ending directives. This is also why the examples we show here all have empty lines around the content.
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```md
 <!-- Prettier doesn't change this -->
 :::note
@@ -110,7 +110,7 @@ Hello world
 You may also specify an optional title.
 
 ```md
-:::note Your Title
+:::note Your Title
 
 Some **content** with _Markdown_ `syntax`.
 
@@ -138,7 +138,9 @@ import Tabs from '@theme/Tabs';
 
 import TabItem from '@theme/TabItem';
 
-:::tip Use tabs in admonitions
+:::tip
+
+Use tabs in admonitions
 
 <Tabs>
   <TabItem value="apple" label="Apple">This is an apple 🍎</TabItem>
@@ -152,7 +154,9 @@ import TabItem from '@theme/TabItem';
 ```mdx-code-block
 <BrowserWindow>
 
-:::tip Use tabs in admonitions
+:::tip
+
+Use tabs in admonitions
 
 <Tabs>
   <TabItem value="apple" label="Apple">This is an apple 🍎</TabItem>

website/versioned_docs/version-2.0.1/guides/markdown-features/markdown-features-react.mdx

@@ -76,7 +76,7 @@ I can write **Markdown** alongside my _JSX_!
 
 Since all doc files are parsed using MDX, anything that looks like HTML is actually JSX. Therefore, if you need to inline-style a component, follow JSX flavor and provide style objects.
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 /* Instead of this: */
 <span style="background-color: red">Foo</span>
@@ -94,7 +94,7 @@ In addition, MDX is not [100% compatible with CommonMark](https://github.com/fac
 
 You can also import your own components defined in other files or third-party components installed via npm.
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```md
 <!-- Docusaurus theme component -->
 import TOCInline from '@theme/TOCInline';
@@ -341,7 +341,7 @@ Use JSX within JSX tag, or move the Markdown to the outer layer:
 <div className={styles.wrappingBlock}>
 ```
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 <div style={{color: 'red'}}>
 **Bold still doesn't work**
@@ -367,7 +367,7 @@ Add an empty new line:
 <div className={styles.wrappingBlock}>
 ```
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 <div style={{color: 'red'}}>
 
@@ -397,7 +397,7 @@ Add an empty new line:
 <div className={styles.wrappingBlock}>
 ```
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 <div style={{color: 'red'}}>
 
@@ -427,7 +427,7 @@ Don't indent:
 <div className={styles.wrappingBlock}>
 ```
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 <div style={{color: 'red'}}>
 
@@ -463,14 +463,13 @@ npm install --save raw-loader
 
 Now you can import code snippets from another file as it is:
 
-<!-- prettier-ignore-start -->
+{/* prettier-ignore */}
 ```jsx title="myMarkdownFile.mdx"
 import CodeBlock from '@theme/CodeBlock';
 import MyComponentSource from '!!raw-loader!./myComponent';
 
 <CodeBlock language="jsx">{MyComponentSource}</CodeBlock>
 ```
-<!-- prettier-ignore-end -->
 
 ```mdx-code-block
 import CodeBlock from '@theme/CodeBlock';
@@ -509,13 +508,12 @@ By convention, using the **`_` filename prefix** will not create any doc page an
 This is text some content from `_markdown-partial-example.mdx`.
 ```
 
-<!-- prettier-ignore-start -->
+{/* prettier-ignore */}
 ```jsx title="someOtherDoc.mdx"
 import PartialExample from './_markdown-partial-example.mdx';
 
 <PartialExample name="Sebastien" />
 ```
-<!-- prettier-ignore-end -->
 
 ```mdx-code-block
 import PartialExample from './_markdown-partial-example.mdx';

website/versioned_docs/version-2.0.1/guides/markdown-features/markdown-features-tabs.mdx

@@ -15,7 +15,7 @@ import styles from './markdown-features-tabs-styles.module.css';
 
 Docusaurus provides the `<Tabs>` component that you can use in Markdown thanks to [MDX](./markdown-features-react.mdx):
 
-<!-- prettier-ignore-start -->
+{/* prettier-ignore */}
 ```jsx
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
@@ -32,7 +32,6 @@ import TabItem from '@theme/TabItem';
   </TabItem>
 </Tabs>
 ```
-<!-- prettier-ignore-end -->
 
 ```mdx-code-block
 <BrowserWindow>
@@ -250,7 +249,7 @@ You might want to customize the appearance of a certain set of tabs. You can pas
 
 You can also customize each tab heading independently by using the `attributes` field. The extra props can be passed to the headings either through the `values` prop in `Tabs`, or props of each `TabItem`—in the same way as you declare `label`.
 
-<!-- prettier-ignore-start -->
+{/* prettier-ignore */}
 ```jsx title="some-doc.mdx"
 import styles from './styles.module.css';
 
@@ -266,7 +265,6 @@ import styles from './styles.module.css';
   </TabItem>
 </Tabs>
 ```
-<!-- prettier-ignore-end -->
 
 ```css title="styles.module.css"
 .red {

website/versioned_docs/version-2.0.1/guides/markdown-features/markdown-features-toc.mdx

@@ -43,8 +43,8 @@ Generated IDs have **some limitations**:
 
 A special Markdown syntax lets you set an **explicit heading id**:
 
-```md
-### Hello World {#my-explicit-id}
+```mdx-code-block
+<Code language="md">{'### Hello World \u007B#my-explicit-id}\n'}</Code>
 ```
 
 :::tip
@@ -102,7 +102,7 @@ It is also possible to display an inline table of contents directly inside a Mar
 
 The `toc` variable is available in any MDX document and contains all the headings of an MDX document. By default, only `h2` and `h3` headings are displayed in the TOC. You can change which heading levels are visible by setting `minHeadingLevel` or `maxHeadingLevel` for individual `TOCInline` components.
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import TOCInline from '@theme/TOCInline';
 
@@ -129,7 +129,7 @@ declare const toc: {
 
 Note that the `toc` global is a flat array, so you can easily cut out unwanted nodes or insert extra nodes, and create a new TOC tree.
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import TOCInline from '@theme/TOCInline';