feat($markdown): support 'vue' container

vuejs · Sep 29, 2018 · 3c430f8 · 3c430f8
1 parent 5de419e
commit 3c430f8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/packages/@vuepress/markdown/lib/containers.js b/packages/@vuepress/markdown/lib/containers.js
@@ -11,6 +11,11 @@ module.exports = md => {
         ? `<div v-pre>\n`
         : `</div>\n`
     })
+    .use(container, 'vue', {
+      render: (tokens, idx) => tokens[idx].nesting === 1
+        ? `<pre class="vue-container"><code>`
+        : `</code></pre>`
+    })
 }
 
 function createContainer (klass, defaultTitle) {

diff --git a/packages/@vuepress/theme-default/styles/custom-blocks.styl b/packages/@vuepress/theme-default/styles/custom-blocks.styl
@@ -26,3 +26,15 @@
       color darken(red, 40%)
     a
       color $textColor
+
+pre.vue-container
+  background-color: #f3f5f7 !important;
+  color: #2c3e50 !important;
+  border-left-width: .5rem;
+  border-left-style: solid;
+  border-color: #42b983;
+  code
+    color: #2c3e50 !important;
+    font-size: 14px !important;
+    & > p
+      margin: -20px 0;