diff --git a/packages/docusaurus-mdx-loader/src/__tests__/format.test.ts b/packages/docusaurus-mdx-loader/src/__tests__/format.test.ts
index 9551814016..c9381ad814 100644
--- a/packages/docusaurus-mdx-loader/src/__tests__/format.test.ts
+++ b/packages/docusaurus-mdx-loader/src/__tests__/format.test.ts
@@ -9,44 +9,126 @@ import {getFormat} from '../format';
 
 describe('getFormat', () => {
   it('uses frontMatter format over anything else', () => {
-    expect(getFormat({frontMatterFormat: 'md', filePath: 'xyz.md'})).toBe('md');
-    expect(getFormat({frontMatterFormat: 'md', filePath: 'xyz.mdx'})).toBe(
-      'md',
-    );
-    expect(getFormat({frontMatterFormat: 'mdx', filePath: 'xyz.md'})).toBe(
-      'mdx',
-    );
-    expect(getFormat({frontMatterFormat: 'mdx', filePath: 'xyz.mdx'})).toBe(
-      'mdx',
-    );
+    expect(
+      getFormat({
+        frontMatterFormat: 'md',
+        filePath: 'xyz.md',
+        markdownConfigFormat: 'mdx',
+      }),
+    ).toBe('md');
+    expect(
+      getFormat({
+        frontMatterFormat: 'md',
+        filePath: 'xyz.mdx',
+        markdownConfigFormat: 'mdx',
+      }),
+    ).toBe('md');
+    expect(
+      getFormat({
+        frontMatterFormat: 'mdx',
+        filePath: 'xyz.md',
+        markdownConfigFormat: 'md',
+      }),
+    ).toBe('mdx');
+    expect(
+      getFormat({
+        frontMatterFormat: 'mdx',
+        filePath: 'xyz.mdx',
+        markdownConfigFormat: 'md',
+      }),
+    ).toBe('mdx');
   });
 
-  it('detects appropriate format from file extension', () => {
-    expect(getFormat({frontMatterFormat: 'detect', filePath: 'xyz.md'})).toBe(
-      'md',
-    );
+  it('supports "detects" for front matter', () => {
     expect(
-      getFormat({frontMatterFormat: 'detect', filePath: 'xyz.markdown'}),
+      getFormat({
+        frontMatterFormat: 'detect',
+        filePath: 'xyz.md',
+        markdownConfigFormat: 'mdx',
+      }),
+    ).toBe('md');
+    expect(
+      getFormat({
+        frontMatterFormat: 'detect',
+        filePath: 'xyz.markdown',
+        markdownConfigFormat: 'mdx',
+      }),
     ).toBe('md');
 
     expect(
-      getFormat({frontMatterFormat: 'detect', filePath: 'folder/xyz.md'}),
+      getFormat({
+        frontMatterFormat: 'detect',
+        filePath: 'folder/xyz.md',
+        markdownConfigFormat: 'mdx',
+      }),
     ).toBe('md');
     expect(
-      getFormat({frontMatterFormat: 'detect', filePath: 'folder/xyz.markdown'}),
+      getFormat({
+        frontMatterFormat: 'detect',
+        filePath: 'folder/xyz.markdown',
+        markdownConfigFormat: 'mdx',
+      }),
     ).toBe('md');
-    expect(getFormat({frontMatterFormat: 'detect', filePath: 'xyz.mdx'})).toBe(
-      'mdx',
-    );
     expect(
-      getFormat({frontMatterFormat: 'detect', filePath: 'folder/xyz.mdx'}),
+      getFormat({
+        frontMatterFormat: 'detect',
+        filePath: 'xyz.mdx',
+        markdownConfigFormat: 'md',
+      }),
+    ).toBe('mdx');
+    expect(
+      getFormat({
+        frontMatterFormat: 'detect',
+        filePath: 'folder/xyz.mdx',
+        markdownConfigFormat: 'md',
+      }),
     ).toBe('mdx');
 
     expect(
-      getFormat({frontMatterFormat: 'detect', filePath: 'xyz.unknown'}),
+      getFormat({
+        frontMatterFormat: 'detect',
+        filePath: 'xyz.unknown',
+        markdownConfigFormat: 'md',
+      }),
     ).toBe('mdx');
     expect(
-      getFormat({frontMatterFormat: 'detect', filePath: 'folder/xyz.unknown'}),
+      getFormat({
+        frontMatterFormat: 'detect',
+        filePath: 'folder/xyz.unknown',
+        markdownConfigFormat: 'md',
+      }),
+    ).toBe('mdx');
+  });
+
+  it('fallbacks to markdown config format when front matter undefined', () => {
+    expect(
+      getFormat({
+        frontMatterFormat: undefined,
+        filePath: 'xyz.md',
+        markdownConfigFormat: 'mdx',
+      }),
+    ).toBe('mdx');
+    expect(
+      getFormat({
+        frontMatterFormat: undefined,
+        filePath: 'xyz.mdx',
+        markdownConfigFormat: 'md',
+      }),
+    ).toBe('md');
+
+    expect(
+      getFormat({
+        frontMatterFormat: undefined,
+        filePath: 'xyz.md',
+        markdownConfigFormat: 'detect',
+      }),
+    ).toBe('md');
+    expect(
+      getFormat({
+        frontMatterFormat: undefined,
+        filePath: 'xyz.mdx',
+        markdownConfigFormat: 'detect',
+      }),
     ).toBe('mdx');
   });
 });
diff --git a/packages/docusaurus-mdx-loader/src/__tests__/frontMatter.test.ts b/packages/docusaurus-mdx-loader/src/__tests__/frontMatter.test.ts
index 7a7e7a4480..db346efecf 100644
--- a/packages/docusaurus-mdx-loader/src/__tests__/frontMatter.test.ts
+++ b/packages/docusaurus-mdx-loader/src/__tests__/frontMatter.test.ts
@@ -85,9 +85,18 @@ describe('MDX front matter schema', () => {
 describe('validateDocFrontMatter format', () => {
   testField({
     prefix: 'format',
-    validFrontMatters: [{format: 'md'}, {format: 'mdx'}],
+    validFrontMatters: [
+      {},
+      {format: undefined},
+      {format: 'detect'},
+      {format: 'md'},
+      {format: 'mdx'},
+    ],
     invalidFrontMatters: [
       [{format: 'xdm'}, '"format" must be one of [md, mdx, detect]'],
+      [{format: ''}, '"format" must be one of [md, mdx, detect]'],
+      [{format: null}, '"format" must be one of [md, mdx, detect]'],
+      [{unknownAttribute: 'mdx'}, '"unknownAttribute" is not allowed'],
     ],
   });
 });
diff --git a/packages/docusaurus-mdx-loader/src/format.ts b/packages/docusaurus-mdx-loader/src/format.ts
index 9b282e945a..08dc009577 100644
--- a/packages/docusaurus-mdx-loader/src/format.ts
+++ b/packages/docusaurus-mdx-loader/src/format.ts
@@ -7,6 +7,7 @@
 
 import path from 'path';
 import type {MDXFrontMatter} from './frontMatter';
+import type {Format, FormatInput} from './index';
 
 // Copied from https://mdxjs.com/packages/mdx/#optionsmdextensions
 // Although we are likely to only use .md / .mdx anyway...
@@ -21,20 +22,29 @@ const mdFormatExtensions = [
   '.ron',
 ];
 
-function isMDFormat(filepath: string) {
-  return mdFormatExtensions.includes(path.extname(filepath));
+function getExtensionFormat(filepath: string): Format {
+  const isMDFormat = mdFormatExtensions.includes(path.extname(filepath));
+  // Bias toward mdx if unknown extension
+  return isMDFormat ? 'md' : 'mdx';
 }
 
 export function getFormat({
   filePath,
   frontMatterFormat,
+  markdownConfigFormat,
 }: {
   filePath: string;
   frontMatterFormat: MDXFrontMatter['format'];
-}): 'md' | 'mdx' {
-  if (frontMatterFormat !== 'detect') {
-    return frontMatterFormat;
+  markdownConfigFormat: FormatInput;
+}): Format {
+  if (frontMatterFormat) {
+    if (frontMatterFormat !== 'detect') {
+      return frontMatterFormat;
+    }
+    return getExtensionFormat(filePath);
   }
-  // Bias toward mdx if unknown extension
-  return isMDFormat(filePath) ? 'md' : 'mdx';
+  if (markdownConfigFormat !== 'detect') {
+    return markdownConfigFormat;
+  }
+  return getExtensionFormat(filePath);
 }
diff --git a/packages/docusaurus-mdx-loader/src/frontMatter.ts b/packages/docusaurus-mdx-loader/src/frontMatter.ts
index 3c47648f6d..919d8d3b66 100644
--- a/packages/docusaurus-mdx-loader/src/frontMatter.ts
+++ b/packages/docusaurus-mdx-loader/src/frontMatter.ts
@@ -10,18 +10,18 @@ import {
   validateFrontMatter,
 } from '@docusaurus/utils-validation';
 
+import type {FormatInput} from './index';
+
 export type MDXFrontMatter = {
-  format: 'md' | 'mdx' | 'detect';
+  format?: FormatInput;
 };
 
 export const DefaultMDXFrontMatter: MDXFrontMatter = {
-  format: 'detect',
+  format: undefined,
 };
 
 const MDXFrontMatterSchema = Joi.object<MDXFrontMatter>({
-  format: Joi.string()
-    .equal('md', 'mdx', 'detect')
-    .default(DefaultMDXFrontMatter.format),
+  format: Joi.string().equal('md', 'mdx', 'detect').optional(),
 }).default(DefaultMDXFrontMatter);
 
 export function validateMDXFrontMatter(frontMatter: unknown): MDXFrontMatter {
diff --git a/packages/docusaurus-mdx-loader/src/index.ts b/packages/docusaurus-mdx-loader/src/index.ts
index 19e1a22360..4a669fce67 100644
--- a/packages/docusaurus-mdx-loader/src/index.ts
+++ b/packages/docusaurus-mdx-loader/src/index.ts
@@ -13,6 +13,10 @@ export default mdxLoader;
 
 export type TOCItem = TOCItemImported;
 
+export type Format = 'md' | 'mdx';
+
+export type FormatInput = Format | 'detect';
+
 export type LoadedMDXContent<FrontMatter, Metadata, Assets = undefined> = {
   /** As verbatim declared in the MDX document. */
   readonly frontMatter: FrontMatter;
diff --git a/packages/docusaurus-mdx-loader/src/processor.ts b/packages/docusaurus-mdx-loader/src/processor.ts
index 95279e428e..906fe65e21 100644
--- a/packages/docusaurus-mdx-loader/src/processor.ts
+++ b/packages/docusaurus-mdx-loader/src/processor.ts
@@ -235,6 +235,7 @@ export async function createProcessorCached({
   const format = getFormat({
     filePath,
     frontMatterFormat: mdxFrontMatter.format,
+    markdownConfigFormat: reqOptions.markdownConfig.format,
   });
 
   return format === 'md' ? compilers.mdProcessor : compilers.mdxProcessor;
diff --git a/packages/docusaurus-types/src/config.d.ts b/packages/docusaurus-types/src/config.d.ts
index 6c7e16f100..3a7bb99ae7 100644
--- a/packages/docusaurus-types/src/config.d.ts
+++ b/packages/docusaurus-types/src/config.d.ts
@@ -16,7 +16,34 @@ export type ThemeConfig = {
   [key: string]: unknown;
 };
 
+export type MarkdownPreprocessor = (args: {
+  filePath: string;
+  fileContent: string;
+}) => string;
+
+export type MDX1CompatOptions = {
+  comments: boolean;
+  admonitions: boolean;
+  headingIds: boolean;
+};
+
 export type MarkdownConfig = {
+  /**
+   * The Markdown format to use by default.
+   *
+   * This is the format passed down to the MDX compiler, impacting the way the
+   * content is parsed.
+   *
+   * Possible values:
+   * - `'mdx'`: use the MDX format (JSX support)
+   * - `'md'`: use the CommonMark format (no JSX support)
+   * - `'detect'`: select the format based on file extension (.md / .mdx)
+   *
+   * @see https://mdxjs.com/packages/mdx/#optionsformat
+   * @default 'mdx'
+   */
+  format: 'mdx' | 'md' | 'detect';
+
   /**
    * Allow mermaid language code blocks to be rendered into Mermaid diagrams:
    *
@@ -35,17 +62,13 @@ export type MarkdownConfig = {
    *
    * @param args
    */
-  preprocessor?: (args: {filePath: string; fileContent: string}) => string;
+  preprocessor?: MarkdownPreprocessor;
 
   /**
    * Set of flags make it easier to upgrade from MDX 1 to MDX 2
    * See also https://github.com/facebook/docusaurus/issues/4029
    */
-  mdx1Compat: {
-    comments: boolean;
-    admonitions: boolean;
-    headingIds: boolean;
-  };
+  mdx1Compat: MDX1CompatOptions;
 };
 
 /**
diff --git a/packages/docusaurus/src/server/__tests__/__snapshots__/config.test.ts.snap b/packages/docusaurus/src/server/__tests__/__snapshots__/config.test.ts.snap
index da4d582b28..d83f688d65 100644
--- a/packages/docusaurus/src/server/__tests__/__snapshots__/config.test.ts.snap
+++ b/packages/docusaurus/src/server/__tests__/__snapshots__/config.test.ts.snap
@@ -17,6 +17,7 @@ exports[`loadSiteConfig website with .cjs siteConfig 1`] = `
       "path": "i18n",
     },
     "markdown": {
+      "format": "mdx",
       "mdx1Compat": {
         "admonitions": true,
         "comments": true,
@@ -64,6 +65,7 @@ exports[`loadSiteConfig website with valid async config 1`] = `
       "path": "i18n",
     },
     "markdown": {
+      "format": "mdx",
       "mdx1Compat": {
         "admonitions": true,
         "comments": true,
@@ -113,6 +115,7 @@ exports[`loadSiteConfig website with valid async config creator function 1`] = `
       "path": "i18n",
     },
     "markdown": {
+      "format": "mdx",
       "mdx1Compat": {
         "admonitions": true,
         "comments": true,
@@ -162,6 +165,7 @@ exports[`loadSiteConfig website with valid config creator function 1`] = `
       "path": "i18n",
     },
     "markdown": {
+      "format": "mdx",
       "mdx1Compat": {
         "admonitions": true,
         "comments": true,
@@ -214,6 +218,7 @@ exports[`loadSiteConfig website with valid siteConfig 1`] = `
       "path": "i18n",
     },
     "markdown": {
+      "format": "mdx",
       "mdx1Compat": {
         "admonitions": true,
         "comments": true,
diff --git a/packages/docusaurus/src/server/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus/src/server/__tests__/__snapshots__/index.test.ts.snap
index 1051919eb8..45b94b8694 100644
--- a/packages/docusaurus/src/server/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/docusaurus/src/server/__tests__/__snapshots__/index.test.ts.snap
@@ -91,6 +91,7 @@ exports[`load loads props for site with custom i18n path 1`] = `
       "path": "i18n",
     },
     "markdown": {
+      "format": "mdx",
       "mdx1Compat": {
         "admonitions": true,
         "comments": true,
diff --git a/packages/docusaurus/src/server/__tests__/configValidation.test.ts b/packages/docusaurus/src/server/__tests__/configValidation.test.ts
index 465e99e05c..21ce48302b 100644
--- a/packages/docusaurus/src/server/__tests__/configValidation.test.ts
+++ b/packages/docusaurus/src/server/__tests__/configValidation.test.ts
@@ -59,6 +59,7 @@ describe('normalizeConfig', () => {
         },
       ],
       markdown: {
+        format: 'md',
         mermaid: true,
         preprocessor: ({fileContent}) => fileContent,
         mdx1Compat: {
@@ -501,6 +502,7 @@ describe('markdown', () => {
 
   it('accepts valid markdown object', () => {
     const markdown: DocusaurusConfig['markdown'] = {
+      format: 'md',
       mermaid: true,
       preprocessor: ({fileContent}) => fileContent,
       mdx1Compat: {
@@ -561,6 +563,34 @@ describe('markdown', () => {
     `);
   });
 
+  it('accepts undefined markdown format', () => {
+    expect(
+      normalizeConfig({markdown: {format: undefined}}).markdown.format,
+    ).toBe('mdx');
+  });
+
+  it('throw for bad markdown format', () => {
+    expect(() =>
+      normalizeConfig(
+        // @ts-expect-error: bad value
+        {markdown: {format: null}},
+      ),
+    ).toThrowErrorMatchingInlineSnapshot(`
+      ""markdown.format" must be one of [mdx, md, detect]
+      "markdown.format" must be a string
+      "
+    `);
+    expect(() =>
+      normalizeConfig(
+        // @ts-expect-error: bad value
+        {markdown: {format: 'xyz'}},
+      ),
+    ).toThrowErrorMatchingInlineSnapshot(`
+      ""markdown.format" must be one of [mdx, md, detect]
+      "
+    `);
+  });
+
   it('throw for null object', () => {
     expect(() => {
       normalizeConfig({
diff --git a/packages/docusaurus/src/server/configValidation.ts b/packages/docusaurus/src/server/configValidation.ts
index 47db1ed29b..3f9de2ce68 100644
--- a/packages/docusaurus/src/server/configValidation.ts
+++ b/packages/docusaurus/src/server/configValidation.ts
@@ -65,6 +65,7 @@ export const DEFAULT_CONFIG: Pick<
   baseUrlIssueBanner: true,
   staticDirectories: [DEFAULT_STATIC_DIR_NAME],
   markdown: {
+    format: 'mdx', // TODO change this to "detect" in Docusaurus v4?
     mermaid: false,
     preprocessor: undefined,
     mdx1Compat: {
@@ -276,6 +277,9 @@ export const ConfigSchema = Joi.object<DocusaurusConfig>({
       .optional(),
   }).optional(),
   markdown: Joi.object({
+    format: Joi.string()
+      .equal('mdx', 'md', 'detect')
+      .default(DEFAULT_CONFIG.markdown.format),
     mermaid: Joi.boolean().default(DEFAULT_CONFIG.markdown.mermaid),
     preprocessor: Joi.function()
       .arity(1)
diff --git a/website/_dogfooding/_pages tests/markdown-tests-md.md b/website/_dogfooding/_pages tests/markdown-tests-md.md
index f5b70ede3f..f88ba6f2ec 100644
--- a/website/_dogfooding/_pages tests/markdown-tests-md.md	
+++ b/website/_dogfooding/_pages tests/markdown-tests-md.md	
@@ -13,13 +13,13 @@ This file should be interpreted in a more CommonMark compliant way
 ```md
 <head>
   <title>HEAD Markdown Page tests title</title>
-  <meta name="keywords" content="cooking, blog">
+  <meta name="keywords" content="cooking, blog"/>
 </head>
 ```
 
 <head>
   <title>HEAD Markdown Page tests title</title>
-  <meta name="keywords" content="cooking, blog">
+  <meta name="keywords" content="cooking, blog"/>
 </head>
 
 :::danger
diff --git a/website/docs/api/docusaurus.config.js.mdx b/website/docs/api/docusaurus.config.js.mdx
index d86a697b1a..4a792231fd 100644
--- a/website/docs/api/docusaurus.config.js.mdx
+++ b/website/docs/api/docusaurus.config.js.mdx
@@ -4,6 +4,8 @@ description: API reference for Docusaurus configuration file.
 slug: /api/docusaurus-config
 ---
 
+import APITable from '@site/src/components/APITable';
+
 # `docusaurus.config.js`
 
 :::info
@@ -400,8 +402,24 @@ The global Docusaurus Markdown config.
 - Type: `MarkdownConfig`
 
 ```ts
+type MarkdownPreprocessor = (args: {
+  filePath: string;
+  fileContent: string;
+}) => string;
+
+type MDX1CompatOptions =
+  | boolean
+  | {
+      comments: boolean;
+      admonitions: boolean;
+      headingIds: boolean;
+    };
+
 type MarkdownConfig = {
+  format: 'mdx' | 'md' | 'detect';
   mermaid: boolean;
+  preprocessor?: MarkdownPreprocessor;
+  mdx1Compat: MDX1CompatOptions;
 };
 ```
 
@@ -410,12 +428,34 @@ Example:
 ```js title="docusaurus.config.js"
 module.exports = {
   markdown: {
+    format: 'mdx',
     mermaid: true,
+    preprocessor: ({filePath, fileContent}) => {
+      return fileContent.replaceAll('{{MY_VAR}}', 'MY_VALUE');
+    },
+    mdx1Compat: {
+      comments: true,
+      admonitions: true,
+      headingIds: true,
+    },
   },
 };
 ```
 
-- `mermaid`: when `true`, allows Docusaurus to render Markdown code blocks with `mermaid` language as Mermaid diagrams.
+```mdx-code-block
+<APITable>
+```
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `format` | `'mdx' \| 'md' \| 'detect'` | `'mdx'` | The default parser format to use for Markdown content. Using 'detect' will select the appropriate format automatically based on file extensions: `.md` vs `.mdx`. |
+| `mermaid` | `boolean` | `false` | When `true`, allows Docusaurus to render Markdown code blocks with `mermaid` language as Mermaid diagrams. |
+| `preprocessor` | `MarkdownPreprocessor` | `undefined` | Gives you the ability to alter the Markdown content string before parsing. Use it as a last-resort escape hatch or workaround: it is almost always better to implement a Remark/Rehype plugin. |
+| `mdx1Compat` | `MDX1CompatOptions` | `{comments: true, admonitions: true, headingIds: true}` | Compatibility options to make it easier to upgrade to Docusaurus v3+. See the [MDX 2 PR for details](https://github.com/facebook/docusaurus/pull/8288). |
+
+```mdx-code-block
+</APITable>
+```
 
 ### `customFields` {#customFields}
 
diff --git a/website/docs/guides/markdown-features/markdown-features-intro.mdx b/website/docs/guides/markdown-features/markdown-features-intro.mdx
index 2da4138783..2ab48769c6 100644
--- a/website/docs/guides/markdown-features/markdown-features-intro.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-intro.mdx
@@ -8,13 +8,47 @@ slug: /markdown-features
 
 import BrowserWindow from '@site/src/components/BrowserWindow';
 
-Documentation is one of your product's interfaces with your users. A well-written and well-organized set of docs helps your users understand your product quickly. Our aligned goal here is to help your users find and understand the information they need, as quickly as possible.
+Docusaurus uses **[Markdown](https://commonmark.org/)** as its main content authoring format.
 
-Docusaurus 2 uses modern tooling to help you compose your interactive documentation with ease. You may embed React components, or build live coding blocks where your users may play with the code on the spot. Start sharing your eureka moments with the code your audience cannot walk away from. It is perhaps the most effective way of attracting potential users.
+:::tip Learn Markdown
 
-:::important
+You can [learn Markdown in 10 minutes](https://commonmark.org/help/).
 
-This section assumes you are using the official Docusaurus content plugins.
+:::
+
+Docusaurus uses modern tooling to help you create **interactive documentation**.
+
+The **[MDX](https://mdxjs.com/)** compiler transforms **Markdown files to React components**, and allows you to use JSX in your Markdown content. This enables you to easily interleave React components within your content, and create delightful learning experiences.
+
+:::tip Use the MDX Playground
+
+The **[MDX playground](https://mdxjs.com/playground/)** is your new best friend!
+
+It is a very helpful debugging tool that shows how the MDX compiler transforms Markdown to React.
+
+**Options**: select the right format (MDX or CommonMark) and the following plugins Docusaurus uses: `remark-gfm`, `remark-directive`, `rehype-raw`.
+
+:::
+
+## MDX vs. CommonMark {#mdx-vs-commonmark}
+
+Docusaurus compiles both `.md` and `.mdx` files to React components using the MDX compiler, but **the syntax can be interpreted differently** depending on your settings.
+
+The MDX compiler supports [2 formats](https://mdxjs.com/packages/mdx/#optionsformat):
+
+- The [MDX format](https://mdxjs.com/docs/what-is-mdx/): a powerful parser allowing the usage of JSX
+- The [CommonMark format](https://commonmark.org/): a standard-compliant Markdown parser that does not allow the usage of JSX
+
+By default, **Docusaurus v3 uses the MDX format for all files** (including `.md` files) for historical reasons.
+
+It is possible to **opt-in for CommonMark** using the [`siteConfig.markdown.format`](../../api/docusaurus.config.js.mdx#markdown) setting or the `format: md` front matter.
+
+:::tip how to use CommonMark
+
+If you plan to use CommonMark, we recommend the [`siteConfig.markdown.format: 'detect'`](../../api/docusaurus.config.js.mdx#markdown) setting. The appropriate format will be selected automatically, based on file extensions:
+
+- `.md` files will use the CommonMark format
+- `.mdx` files will use the MDX format
 
 :::
 
@@ -22,8 +56,6 @@ This section assumes you are using the official Docusaurus content plugins.
 
 Markdown is a syntax that enables you to write formatted content in a readable syntax.
 
-We use [MDX](https://mdxjs.com/) as the parsing engine, which can do much more than just parsing [standard Markdown syntax](https://daringfireball.net/projects/markdown/syntax), like rendering React components inside your documents as well.
-
 ```md
 ### My Doc Section
 
@@ -143,9 +175,3 @@ Markdown can embed HTML elements, and [`details`](https://developer.mozilla.org/
 
 </BrowserWindow>
 ```
-
-:::note
-
-In practice, those are not really HTML elements, but React JSX elements, which we'll cover next!
-
-:::
diff --git a/website/docs/guides/markdown-features/markdown-features-react.mdx b/website/docs/guides/markdown-features/markdown-features-react.mdx
index 9c1272f9a5..a8ca44af65 100644
--- a/website/docs/guides/markdown-features/markdown-features-react.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-react.mdx
@@ -13,24 +13,9 @@ import TabItem from '@theme/TabItem';
 import styles from './markdown-features-react.module.css';
 ```
 
-## Using JSX in Markdown {#using-jsx-in-markdown}
-
 Docusaurus has built-in support for [MDX v2](https://mdxjs.com/), which allows you to write JSX within your Markdown files and render them as React components.
 
-:::info MDX vs. CommonMark
-
-Docusaurus parses both `.md` and `.mdx` files using MDX, but **the syntax is interpreted differently based on the file extension**:
-
-- With the `.md` extension, the parser is compatible with [CommonMark](https://commonmark.org/) and does not allow the usage of JSX.
-- With the `.mdx` extension, the parser is stricter than [CommonMark](https://commonmark.org/) and is not 100% compatible with it, but it becomes possible to use JSX.
-
-It is also possible to override the file extension format with front matter: `format: mdx`.
-
-The rest of this page assumes usage of the `mdx` format.
-
-:::
-
-Check out the [MDX docs](https://mdxjs.com/) to see what other fancy stuff you can do with MDX.
+Check out the [MDX docs](https://mdxjs.com/) to see what fancy stuff you can do with MDX.
 
 :::tip Debugging MDX
 
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 063a560532..b97ac2a427 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -157,6 +157,7 @@ module.exports = async function createConfigAsync() {
       }),
     },
     markdown: {
+      format: 'detect',
       mermaid: true,
       mdx1Compat: {
         // comments: false,
diff --git a/website/versioned_docs/version-2.0.1/seo.mdx b/website/versioned_docs/version-2.0.1/seo.mdx
index fde3e3db12..e18b333352 100644
--- a/website/versioned_docs/version-2.0.1/seo.mdx
+++ b/website/versioned_docs/version-2.0.1/seo.mdx
@@ -20,7 +20,7 @@ Provide global meta attributes for the entire site through the [site configurati
 module.exports = {
   themeConfig: {
     metadata: [{name: 'keywords', content: 'cooking, blog'}],
-    // This would become <meta name="keywords" content="cooking, blog"> in the generated HTML
+    // This would become <meta name="keywords" content="cooking, blog"/> in the generated HTML
   },
 };
 ```
@@ -37,7 +37,7 @@ Similar to [global metadata](#global-metadata), Docusaurus also allows for the a
 # A cooking guide
 
 <head>
-  <meta name="keywords" content="cooking, blog">
+  <meta name="keywords" content="cooking, blog"/>
 </head>
 
 Some content...
diff --git a/website/versioned_docs/version-2.1.0/seo.mdx b/website/versioned_docs/version-2.1.0/seo.mdx
index a16d3a80d9..c6a2cfd785 100644
--- a/website/versioned_docs/version-2.1.0/seo.mdx
+++ b/website/versioned_docs/version-2.1.0/seo.mdx
@@ -20,7 +20,7 @@ Provide global meta attributes for the entire site through the [site configurati
 module.exports = {
   themeConfig: {
     metadata: [{name: 'keywords', content: 'cooking, blog'}],
-    // This would become <meta name="keywords" content="cooking, blog"> in the generated HTML
+    // This would become <meta name="keywords" content="cooking, blog"/> in the generated HTML
   },
 };
 ```
@@ -37,7 +37,7 @@ Similar to [global metadata](#global-metadata), Docusaurus also allows for the a
 # A cooking guide
 
 <head>
-  <meta name="keywords" content="cooking, blog">
+  <meta name="keywords" content="cooking, blog"/>
 </head>
 
 Some content...
diff --git a/website/versioned_docs/version-2.2.0/seo.mdx b/website/versioned_docs/version-2.2.0/seo.mdx
index a16d3a80d9..c6a2cfd785 100644
--- a/website/versioned_docs/version-2.2.0/seo.mdx
+++ b/website/versioned_docs/version-2.2.0/seo.mdx
@@ -20,7 +20,7 @@ Provide global meta attributes for the entire site through the [site configurati
 module.exports = {
   themeConfig: {
     metadata: [{name: 'keywords', content: 'cooking, blog'}],
-    // This would become <meta name="keywords" content="cooking, blog"> in the generated HTML
+    // This would become <meta name="keywords" content="cooking, blog"/> in the generated HTML
   },
 };
 ```
@@ -37,7 +37,7 @@ Similar to [global metadata](#global-metadata), Docusaurus also allows for the a
 # A cooking guide
 
 <head>
-  <meta name="keywords" content="cooking, blog">
+  <meta name="keywords" content="cooking, blog"/>
 </head>
 
 Some content...
diff --git a/website/versioned_docs/version-2.3.1/seo.mdx b/website/versioned_docs/version-2.3.1/seo.mdx
index a16d3a80d9..c6a2cfd785 100644
--- a/website/versioned_docs/version-2.3.1/seo.mdx
+++ b/website/versioned_docs/version-2.3.1/seo.mdx
@@ -20,7 +20,7 @@ Provide global meta attributes for the entire site through the [site configurati
 module.exports = {
   themeConfig: {
     metadata: [{name: 'keywords', content: 'cooking, blog'}],
-    // This would become <meta name="keywords" content="cooking, blog"> in the generated HTML
+    // This would become <meta name="keywords" content="cooking, blog"/> in the generated HTML
   },
 };
 ```
@@ -37,7 +37,7 @@ Similar to [global metadata](#global-metadata), Docusaurus also allows for the a
 # A cooking guide
 
 <head>
-  <meta name="keywords" content="cooking, blog">
+  <meta name="keywords" content="cooking, blog"/>
 </head>
 
 Some content...
diff --git a/website/versioned_docs/version-2.4.1/seo.mdx b/website/versioned_docs/version-2.4.1/seo.mdx
index a16d3a80d9..c6a2cfd785 100644
--- a/website/versioned_docs/version-2.4.1/seo.mdx
+++ b/website/versioned_docs/version-2.4.1/seo.mdx
@@ -20,7 +20,7 @@ Provide global meta attributes for the entire site through the [site configurati
 module.exports = {
   themeConfig: {
     metadata: [{name: 'keywords', content: 'cooking, blog'}],
-    // This would become <meta name="keywords" content="cooking, blog"> in the generated HTML
+    // This would become <meta name="keywords" content="cooking, blog"/> in the generated HTML
   },
 };
 ```
@@ -37,7 +37,7 @@ Similar to [global metadata](#global-metadata), Docusaurus also allows for the a
 # A cooking guide
 
 <head>
-  <meta name="keywords" content="cooking, blog">
+  <meta name="keywords" content="cooking, blog"/>
 </head>
 
 Some content...