From 396da81247a0c94d63807fd9345069c60c9f7606 Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Thu, 28 Nov 2019 19:02:32 +0800 Subject: [PATCH 1/2] feat($theme-default): markdown details custom block (close #768) --- packages/@vuepress/theme-default/index.js | 5 +++++ .../theme-default/styles/custom-blocks.styl | 18 ++++++++++++++++-- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/packages/@vuepress/theme-default/index.js b/packages/@vuepress/theme-default/index.js index 3e71be184b..baaf102ba7 100644 --- 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 => `
${info ? `${info}` : ''}\n`, + after: () => '
\n' + }], ['smooth-scroll', enableSmoothScroll] ] } diff --git a/packages/@vuepress/theme-default/styles/custom-blocks.styl b/packages/@vuepress/theme-default/styles/custom-blocks.styl index 2d07835b88..5b868166a4 100644 --- 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 From cdcd0f65ff934b5db61586087c6526fa0b3ba771 Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Thu, 28 Nov 2019 19:02:44 +0800 Subject: [PATCH 2/2] docs: markdown details custom block --- packages/docs/docs/guide/markdown.md | 24 +++++++++++++-- packages/docs/docs/zh/guide/markdown.md | 40 ++++++++++++++++++------- 2 files changed, 52 insertions(+), 12 deletions(-) diff --git a/packages/docs/docs/guide/markdown.md b/packages/docs/docs/guide/markdown.md index 59fbfba263..53a86ad525 100644 --- 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 index 44a99417a2..6fe51d2eb2 100644 --- 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！') +``` ::: **参考:**