Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add info about the {open} attr. for details container #4067

Merged
merged 4 commits into from
Oct 12, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 24 additions & 2 deletions docs/en/guide/markdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -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!')
```
Expand All @@ -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!')
```
Expand All @@ -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.
Expand Down