From 7f2a99754f076da8a14bdc96f07ba5c875453c81 Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Fri, 29 Nov 2019 10:53:46 +0800 Subject: [PATCH] feat($theme-default): markdown details custom block (close #768) (#2044) --- packages/@vuepress/theme-default/index.js | 5 +++ .../theme-default/styles/custom-blocks.styl | 18 ++++++++- packages/docs/docs/guide/markdown.md | 24 ++++++++++- packages/docs/docs/zh/guide/markdown.md | 40 ++++++++++++++----- 4 files changed, 73 insertions(+), 14 deletions(-) diff --git a/packages/@vuepress/theme-default/index.js b/packages/@vuepress/theme-default/index.js index 3e71be18..baaf102b 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 2d07835b..5b868166 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 diff --git a/packages/docs/docs/guide/markdown.md b/packages/docs/docs/guide/markdown.md index 59fbfba2..53a86ad5 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 44a99417..6fe51d2e 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！') +``` ::: **参考:**