feat($theme-default): add code group and code block components

packages/@vuepress/theme-default/global-components/CodeBlock.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="theme-code-block"
+    :class="{ 'theme-code-block__active': active }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CodeBlock',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .theme-code-block {
+    display: none;
+  }
+  .theme-code-block__active {
+    display: block;
+  }
+  .theme-code-block > pre {
+    background-color: orange;
+  }
+</style>

packages/@vuepress/theme-default/global-components/CodeGroup.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="theme-code-group">
+    <div class="theme-code-group__nav">
+      <button
+        v-for="(tab, i) in codeTabs"
+        :key="tab.title"
+        class="theme-code-group__nav-tab"
+        :class="{'theme-code-group__nav-tab-active': i === activeCodeTabIndex}"
+        @click="changeCodeTab(i)"
+      >
+        {{ tab.title }}
+      </button>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CodeGroup',
+  data () {
+    return {
+      codeTabs: [],
+      activeCodeTabIndex: 0
+    }
+  },
+  watch: {
+    activeCodeTabIndex (index) {
+      this.codeTabs.forEach(tab => {
+        tab.elm.classList.remove('theme-code-block__active')
+      })
+      this.codeTabs[index].elm.classList.add('theme-code-block__active')
+    }
+  },
+  mounted () {
+    this.codeTabs = this.$slots.default.filter(slot => Boolean(slot.componentOptions)).map(slot => ({
+      title: slot.componentOptions.propsData.title,
+      elm: slot.elm
+    }))
+  },
+  methods: {
+    changeCodeTab (index) {
+      this.activeCodeTabIndex = index
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .theme-code-group {}
+  .theme-code-group__nav {
+    margin-bottom: -35px;
+    background-color: #282c34;
+    padding-bottom: 22px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    font-size: 1.5rem;
+  }
+  .theme-code-group__nav-tab {
+    border: 0;
+    padding: 5px;
+    cursor: pointer;
+    background-color: transparent;
+    color: white;
+  }
+  .theme-code-group__nav-tab-active {
+    border-bottom: #42b983 1px solid;
+  }
+</style>

packages/docs/docs/guide/getting-started.md

@@ -13,10 +13,19 @@ The fastest way to get your VuePress project setup is to use our [create-vuepres
 
 To use it, open up your terminal in the desired directory and run the following command:
 
+<code-group>
+<code-block title="YARN" :active="true">
 ```bash
 yarn create vuepress-site [optionalDirectoryName]
-# OR npx create-vuepress-site [optionalDirectoryName]
 ```
+</code-block>
+
+<code-block title="NPM">
+```bash
+npx create-vuepress-site [optionalDirectoryName]
+```
+</code-block>
+</code-group>
 
 You will then have the opportunity to configure your VuePress site’s metadata such as:
 
@@ -40,15 +49,35 @@ This section will help you build a basic VuePress documentation site from ground
 
 2. Initialize with your preferred package manager
 
+   <code-group>
+   <code-block title="YARN" :active="true">
+    ```bash
+    yarn init
+    ```
+   </code-block>
+
+   <code-block title="NPM">
    ```bash
-   yarn init # npm init
+   npm init
    ```
+   </code-block>
+   </code-group>
 
 3. Install VuePress locally
 
-   ```bash
-   yarn add -D vuepress # npm install -D vuepress
-   ```
+    <code-group>
+    <code-block title="YARN" :active="true">
+    ```bash
+    yarn add -D vuepress
+    ```
+    </code-block>
+
+    <code-block title="NPM">
+    ```bash
+    npm install -D vuepress
+    ```
+    </code-block>
+    </code-group>
 
 4. Create your first document
 
@@ -71,9 +100,19 @@ This section will help you build a basic VuePress documentation site from ground
 
 6. Serve the documentation site in the local server
 
+   <code-group>
+   <code-block title="YARN" :active="true">
+   ```bash
+   yarn docs:dev
+   ```
+   </code-block>
+
+   <code-block title="NPM">
    ```bash
-   yarn docs:dev # npm run docs:dev
+   npm run docs:dev
    ```
+   </code-block>
+   </code-group>
 
    VuePress will start a hot-reloading development server at [http://localhost:8080](http://localhost:8080).