3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-30 17:37:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs: backport #10173 to v3.3 + v3.4 & revise the content (#10180)

Browse source 
Co-authored-by: sebastien <lorber.sebastien@gmail.com>
This commit is contained in:
Tatsunori Uchino 2024-06-21 20:43:48 +09:00 • committed by GitHub
parent 3a0a2a74b8
commit 91cef6226a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 40 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

4
website/docs/guides/markdown-features/markdown-features-intro.mdx
View file

@ -230,8 +230,6 @@ Markdown can embed HTML elements, and [`details`](https://developer.mozilla.org/
:::info
- You should not break lines between the starting or ending tag of the `<summary>` element and its content or an extra `<p>` element is inserted.
- Blank lines between the `<summary>` element and the first paragraph of the detailed content are optional in Docusaurus but strongly recommended to ensure MDX portability with other site generators.
- Blank lines between the nested `<details>` element and the paragraphs just around it are optional.
You may want to keep your `<summary>` on a single line. Keep in mind that [MDX creates extra HTML `<p>` paragraphs for line breaks.](https://mdxjs.com/migrating/v2/#jsx). When in doubt, use the [MDX playground](https://mdxjs.com/playground/) to troubleshoot `<details>` rendering problems.
:::

63
website/versioned_docs/version-3.3.2/guides/markdown-features/markdown-features-intro.mdx
View file

@ -181,42 +181,55 @@ Markdown quotes are beautifully styled:
Markdown can embed HTML elements, and [`details`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) HTML elements are beautifully styled:
```md
{/* prettier-ignore */}
````md
### Details element example
<details>
<summary>Toggle me!</summary>
<div>
<div>This is the detailed content</div>
<br/>
<details>
<summary>
Nested toggle! Some surprise inside...
</summary>
<div>😲😲😲😲😲</div>
</details>
</div>
</details>
```
```mdx-code-block
This is the detailed content
```js
console.log("Markdown features including the code block are available");
```
You can use Markdown here including **bold** and _italic_ text, and [inline link](https://docusaurus.io)
<details>
<summary>Nested toggle! Some surprise inside...</summary>
😲😲😲😲😲
</details>
</details>
````
````mdx-code-block
<BrowserWindow>
<h3>Details element example</h3>
<details>
<summary>Toggle me!</summary>
<div>
<div>This is the detailed content</div>
<br/>
<details>
<summary>
Nested toggle! Some surprise inside...
</summary>
<div>😲😲😲😲😲</div>
</details>
</div>
This is the detailed content
```js
console.log("Markdown features including the code block are available");
```
You can use Markdown here including **bold** and _italic_ text, and [inline link](https://docusaurus.io)
<details>
<summary>Nested toggle! Some surprise inside...</summary>
😲😲😲😲😲
</details>
</details>
</BrowserWindow>
```
````
:::info
You may want to keep your `<summary>` on a single line. Keep in mind that [MDX creates extra HTML `<p>` paragraphs for line breaks.](https://mdxjs.com/migrating/v2/#jsx). When in doubt, use the [MDX playground](https://mdxjs.com/playground/) to troubleshoot `<details>` rendering problems.
:::

4
website/versioned_docs/version-3.4.0/guides/markdown-features/markdown-features-intro.mdx
View file

@ -230,8 +230,6 @@ Markdown can embed HTML elements, and [`details`](https://developer.mozilla.org/
:::info
- You should not break lines between the starting or ending tag of the `<summary>` element and its content or an extra `<p>` element is inserted.
- Blank lines between the `<summary>` element and the first paragraph of the detailed content are optional in Docusaurus but strongly recommended to ensure MDX portability with other site generators.
- Blank lines between the nested `<details>` element and the paragraphs just around it are optional.
You may want to keep your `<summary>` on a single line. Keep in mind that [MDX creates extra HTML `<p>` paragraphs for line breaks.](https://mdxjs.com/migrating/v2/#jsx). When in doubt, use the [MDX playground](https://mdxjs.com/playground/) to troubleshoot `<details>` rendering problems.
:::