diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index 0cbee0f5da69..4576777caa9b 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -893,6 +893,8 @@ declare module '@theme/MDXComponents' {
export type MDXComponentsObject = {
readonly Head: typeof Head;
+ readonly details: typeof MDXDetails;
+
readonly Details: typeof MDXDetails;
readonly code: typeof MDXCode;
readonly a: typeof MDXA;
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
index 777ddb708b6b..86667d199fba 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
@@ -21,6 +21,7 @@ import type {MDXComponentsObject} from '@theme/MDXComponents';
const MDXComponents: MDXComponentsObject = {
Head,
+ details: MDXDetails, // For MD mode support, see https://github.com/facebook/docusaurus/issues/9092#issuecomment-1602902274
Details: MDXDetails,
code: MDXCode,
a: MDXA,
diff --git a/website/_dogfooding/_pages tests/markdown-tests-md.md b/website/_dogfooding/_pages tests/markdown-tests-md.md
index 7b3919884011..f5b70ede3f6e 100644
--- a/website/_dogfooding/_pages tests/markdown-tests-md.md
+++ b/website/_dogfooding/_pages tests/markdown-tests-md.md
@@ -8,13 +8,46 @@ wrapperClassName: docusaurus-markdown-example
This file should be interpreted in a more CommonMark compliant way
+## SEO
+
+```md
+
+ HEAD Markdown Page tests title
+
+
+```
+
+
+ HEAD Markdown Page tests title
+
+
+
+:::danger
+
+TODO unsupported (yet), see [issue](https://github.com/facebook/docusaurus/issues/9092)
+
+:::
+
## Comment
Html comment:
+Html comment multi-line:
+
+
+
MDX comment: {/* comment */}
+MDX comment multi-line:
+
+
+{/*
+comment
+*/}
+
## JSX syntax
import BrowserWindow from '@site/src/components/BrowserWindow';
@@ -39,6 +72,110 @@ note
:::
+## Details
+
+
+ MD Summary
+
+Our custom Details/Summary also works in CommonMark mode
+
+
+
+## Tab
+
+
+
+ This is an apple 🍎
+
+
+ This is an orange 🍊
+
+
+ This is a banana 🍌
+
+
+
+:::danger
+
+TODO unsupported (yet), see [issue](https://github.com/facebook/docusaurus/issues/9092)
+
+:::
+
+## Code block test
+
+```js title="Title"
+function Clock(props) {
+ const [date, setDate] = useState(new Date());
+ useEffect(() => {
+ var timerID = setInterval(() => tick(), 1000);
+
+ return function cleanup() {
+ clearInterval(timerID);
+ };
+ });
+
+ function tick() {
+ setDate(new Date());
+ }
+
+ return (
+
+
It is {date.toLocaleTimeString()}.
+ // highlight-start
+ {/* prettier-ignore */}
+ long long long long long long long long long long long long line
+ {/* prettier-ignore */}
+ // highlight-end
+
+ );
+}
+```
+
+```jsx live
+function Clock(props) {
+ const [date, setDate] = useState(new Date());
+ useEffect(() => {
+ var timerID = setInterval(() => tick(), 1000);
+
+ return function cleanup() {
+ clearInterval(timerID);
+ };
+ });
+
+ function tick() {
+ setDate(new Date());
+ }
+
+ return (
+
+
It is {date.toLocaleTimeString()}.
+
+ );
+}
+```
+
+:::danger
+
+TODO unsupported (yet), see [issue](https://github.com/facebook/docusaurus/issues/9092)
+
+:::
+
+## Mermaid
+
+```mermaid
+sequenceDiagram
+ participant Alice
+ participant Bob
+ Alice->>John: Hello John, how are you?
+ loop Health check
+ John->>John: Fight against hypochondria
+ end
+ Note right of John: Rational thoughts
prevail!
+ John-->>Alice: Great!
+ John->>Bob: How about you?
+ Bob-->>John: Jolly good!
+```
+
## Heading Id {#custom-heading-id}
Custom heading syntax `{#custom-heading-id}` still works
diff --git a/website/_dogfooding/_pages tests/markdown-tests-mdx.mdx b/website/_dogfooding/_pages tests/markdown-tests-mdx.mdx
index bdc1449456a1..1b8a41ab51ea 100644
--- a/website/_dogfooding/_pages tests/markdown-tests-mdx.mdx
+++ b/website/_dogfooding/_pages tests/markdown-tests-mdx.mdx
@@ -36,29 +36,37 @@ import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
-
- This is an apple 🍎
- This is an orange 🍊
- This is a banana 🍌
+
+
+ This is an apple 🍎
+
+
+ This is an orange 🍊
+
+
+ This is a banana 🍌
+
## Comments
-MDX comments can be used with
+Html comment:
-```mdx
-{/* My comment */}
-```
+Html comment multi-line:
-See, nothing is displayed:
+
-{/* My comment */}
+
+MDX comment: {/* comment */}
+
+MDX comment multi-line:
+
+
+{/*
+comment
+*/}
## Import code block from source code file
@@ -164,6 +172,22 @@ function Clock(props) {
}
```
+## Mermaid
+
+```mermaid
+sequenceDiagram
+ participant Alice
+ participant Bob
+ Alice->>John: Hello John, how are you?
+ loop Health check
+ John->>John: Fight against hypochondria
+ end
+ Note right of John: Rational thoughts
prevail!
+ John-->>Alice: Great!
+ John->>Bob: How about you?
+ Bob-->>John: Jolly good!
+```
+
## Custom heading ID {#custom}
### Weird heading {#你好}
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 45344a383175..063a560532c4 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -162,6 +162,9 @@ module.exports = async function createConfigAsync() {
// comments: false,
},
preprocessor: ({filePath, fileContent}) => {
+ // TODO temporary quick fix for https://github.com/facebook/docusaurus/issues/9084
+ fileContent = fileContent.replaceAll('