3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-10 23:02:56 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs: improve how to use <details> (#10173)

Browse source
This commit is contained in:
Tatsunori Uchino 2024-05-30 17:38:33 +09:00 • committed by GitHub
parent 6c7f2fde20
commit 61f71f6b69
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 40 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -181,42 +181,57 @@ 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: 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 element example
<details> <details>
<summary>Toggle me!</summary> <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> <BrowserWindow>
<h3>Details element example</h3> <h3>Details element example</h3>
<details> <details>
<summary>Toggle me!</summary> <summary>Toggle me!</summary>
<div>
<div>This is the detailed content</div> This is the detailed content
<br/>
<details> ```js
<summary> console.log("Markdown features including the code block are available");
Nested toggle! Some surprise inside... ```
</summary>
<div>😲😲😲😲😲</div> You can use Markdown here including **bold** and _italic_ text, and [inline link](https://docusaurus.io)
</details> <details>
</div> <summary>Nested toggle! Some surprise inside...</summary>
😲😲😲😲😲
</details>
</details> </details>
</BrowserWindow> </BrowserWindow>
``` ````
:::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.
:::