diff --git a/docs/en/guide/markdown.md b/docs/en/guide/markdown.md index 7ca6c5db..dd577fe1 100644 --- a/docs/en/guide/markdown.md +++ b/docs/en/guide/markdown.md @@ -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,14 +200,12 @@ 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!') ``` ::: -To keep the `details` container open during development, add `{open}` at the end of the title. - Also, you may set custom titles globally by adding the following content in site config, helpful if not writing in English: ```ts @@ -227,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.