feat($theme-default): markdown details custom block (close #768) (#2044)

vuejs · Nov 29, 2019 · 7f2a997 · 7f2a997
1 parent 50196a3
commit 7f2a997
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 14 deletions.
diff --git a/packages/@vuepress/theme-default/index.js b/packages/@vuepress/theme-default/index.js
@@ -48,6 +48,11 @@ module.exports = (options, ctx) => {
           '/zh/': '警告'
         }
       }],
+      ['container', {
+        type: 'details',
+        before: info => `<details class="custom-block details">${info ? `<summary>${info}</summary>` : ''}\n`,
+        after: () => '</details>\n'
+      }],
       ['smooth-scroll', enableSmoothScroll]
     ]
   }

diff --git a/packages/@vuepress/theme-default/styles/custom-blocks.styl b/packages/@vuepress/theme-default/styles/custom-blocks.styl
@@ -26,5 +26,19 @@
       color darken(red, 40%)
     a
       color $textColor
-
-
+  &.details
+    display block
+    position relative
+    border-radius 2px
+    margin 1.6em 0
+    padding 1.6em
+    background-color #eee
+    h4
+      margin-top 0
+    figure, p
+      &:last-child
+        margin-bottom 0
+        padding-bottom 0
+    summary
+      outline none
+      cursor pointer
diff --git a/packages/docs/docs/guide/markdown.md b/packages/docs/docs/guide/markdown.md
@@ -123,7 +123,7 @@ Rendering of TOC can be configured using the [`markdown.toc`](../config/README.m
 
 **Input**
 
-```
+```md
 ::: tip
 This is a tip
 :::
@@ -135,6 +135,10 @@ This is a warning
 ::: danger
 This is a dangerous warning
 :::
+
+::: details
+This is a details block, which does not work in IE / Edge
+:::
 ```
 
 **Output**
@@ -151,18 +155,34 @@ This is a warning
 This is a dangerous warning
 :::
 
+::: details
+This is a details block, which does not work in IE / Edge
+:::
+
 You can also customize the title of the block:
 
-```
+````md
 ::: danger STOP
 Danger zone, do not proceed
 :::
+
+::: details Click me to view the code
+```js
+console.log('Hello, VuePress!')
 ```
+:::
+````
 
 ::: danger STOP
 Danger zone, do not proceed
 :::
 
+::: details Click me to view the code
+```js
+console.log('Hello, VuePress!')
+```
+:::
+
 **Also see:**
 
 - [vuepress-plugin-container](https://vuepress.github.io/plugins/container/)

diff --git a/packages/docs/docs/zh/guide/markdown.md b/packages/docs/docs/zh/guide/markdown.md
@@ -123,44 +123,64 @@ lang: en-US
 
 **输入**
 
-```
+```md
 ::: tip
-This is a tip
+这是一个提示
 :::
 
 ::: warning
-This is a warning
+这是一个警告
 :::
 
 ::: danger
-This is a dangerous warning
+这是一个危险警告
+:::
+
+::: details
+这是一个详情块，在 IE / Edge 中不生效
 :::
 ```
 
 **输出**
 
 ::: tip
-This is a tip
+这是一个提示
 :::
 
 ::: warning
-This is a warning
+这是一个警告
 :::
 
 ::: danger
-This is a dangerous thing
+这是一个危险警告
+:::
+
+::: details
+这是一个详情块，在 IE / Edge 中不生效
 :::
 
 你也可以自定义块中的标题：
 
-```
+````md
 ::: danger STOP
-Danger zone, do not proceed
+危险区域，禁止通行
 :::
+
+::: details 点击查看代码
+```js
+console.log('你好，VuePress！')
 ```
+:::
+````
 
 ::: danger STOP
-Danger zone, do not proceed
+危险区域，禁止通行
+:::
+
+::: details 点击查看代码
+```js
+console.log('你好，VuePress！')
+```
 :::
 
 **参考:**