From a8f147f153efdd17989a02eb620c3ae9ab0d13dd Mon Sep 17 00:00:00 2001
From: Jeff Yang <32727188+ydcjeff@users.noreply.github.com>
Date: Thu, 6 Jan 2022 10:12:58 +0630
Subject: [PATCH] feat: add details custom container (#455)

---
 docs/guide/markdown.md                  | 22 +++++++++++++++++++++-
 src/node/markdown/plugins/containers.ts |  6 +++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md
index e0efc2f0..63cc8471 100644
--- a/docs/guide/markdown.md
+++ b/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:
diff --git a/src/node/markdown/plugins/containers.ts b/src/node/markdown/plugins/containers.ts
index 1afd55ca..61dd7b91 100644
--- a/src/node/markdown/plugins/containers.ts
+++ b/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`
         }
       }
     }