docs: add info about the `{open}` attr for `details` container (#4067)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
pull/4276/head
Christian Georgi 3 weeks ago committed by GitHub
parent 8436472c78
commit 0db71aec83
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -187,7 +187,7 @@ You may set custom title by appending the text right after the "type" of the con
Danger zone, do not proceed
:::
::: details Click me to view the code
::: details Click me to toggle the code
```js
console.log('Hello, VitePress!')
```
@ -200,7 +200,7 @@ console.log('Hello, VitePress!')
Danger zone, do not proceed
:::
::: details Click me to view the code
::: details Click me to toggle the code
```js
console.log('Hello, VitePress!')
```
@ -225,6 +225,28 @@ export default defineConfig({
})
```
### Additional Attributes
You can add additional attributes to the custom containers. We use [markdown-it-attrs](https://github.com/arve0/markdown-it-attrs) for this feature, and it is supported on almost all markdown elements. For example, you can set the `open` attribute to make the details block open by default:
**Input**
````md
::: details Click me to toggle the code {open}
```js
console.log('Hello, VitePress!')
```
:::
````
**Output**
::: details Click me to toggle the code {open}
```js
console.log('Hello, VitePress!')
```
:::
### `raw`
This is a special container that can be used to prevent style and router conflicts with VitePress. This is especially useful when you're documenting component libraries. You might also wanna check out [whyframe](https://whyframe.dev/docs/integrations/vitepress) for better isolation.

Loading…
Cancel
Save