feat: add details custom container (#455)

docs/guide/markdown.md

@@ -138,6 +138,10 @@ This is a warning
 ::: danger
 This is a dangerous warning
 :::
+
+::: details
+This is a details block, which does not work in Internet Explorer or Edge.
+:::
 ```
 
 **Output**
@@ -158,15 +162,25 @@ This is a warning
 This is a dangerous warning
 :::
 
+::: details
+This is a details block, which does not work in Internet Explorer or Edge.
+:::
+
 ### Custom Title
 
 **Input**
 
-```md
+````md
 ::: danger STOP
 Danger zone, do not proceed
 :::
+
+::: details Click me to view the code
+```js
+console.log('Hello, VitePress!')
 ```
+:::
+````
 
 **Output**
 
@@ -174,6 +188,12 @@ Danger zone, do not proceed
 Danger zone, do not proceed
 :::
 
+::: details Click me to view the code
+```js
+console.log('Hello, VitePress!')
+```
+:::
+
 ## Syntax Highlighting in Code Blocks
 
 VitePress uses [Prism](https://prismjs.com/) to highlight language syntax in Markdown code blocks, using coloured text. Prism supports a wide variety of programming languages. All you need to do is append a valid language alias to the beginning backticks for the code block:

src/node/markdown/plugins/containers.ts

@@ -7,6 +7,7 @@ export const containerPlugin = (md: MarkdownIt) => {
     .use(...createContainer('info', 'INFO'))
     .use(...createContainer('warning', 'WARNING'))
     .use(...createContainer('danger', 'WARNING'))
+    .use(...createContainer('details', 'Details'))
     // explicitly escape Vue syntax
     .use(container, 'v-pre', {
       render: (tokens: Token[], idx: number) =>
@@ -31,11 +32,14 @@ function createContainer(klass: string, defaultTitle: string): ContainerArgs {
         const token = tokens[idx]
         const info = token.info.trim().slice(klass.length).trim()
         if (token.nesting === 1) {
+          if (klass === 'details') {
+            return `<details class="${klass} custom-block">${info ? `<summary>${info}</summary>` : ''}\n`
+          }
           return `<div class="${klass} custom-block"><p class="custom-block-title">${
             info || defaultTitle
           }</p>\n`
         } else {
-          return `</div>\n`
+          return klass === 'details' ? `</details>\n` : `</div>\n`
         }
       }
     }