diff --git a/packages/@vuepress/theme-default/global-components/CodeBlock.vue b/packages/@vuepress/theme-default/global-components/CodeBlock.vue
new file mode 100644
index 0000000000..fc1dc71742
--- /dev/null
+++ b/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>
diff --git a/packages/@vuepress/theme-default/global-components/CodeGroup.vue b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
new file mode 100644
index 0000000000..e0a340b2a1
--- /dev/null
+++ b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
@@ -0,0 +1,90 @@
+<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 />
+ <pre
+ v-if="codeTabs.length < 1"
+ class="pre-blank"
+ >// Make sure to add code blocks to your code group</pre>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'CodeGroup',
+ data () {
+ return {
+ codeTabs: [],
+ activeCodeTabIndex: -1
+ }
+ },
+ 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, index) => {
+ if (slot.componentOptions.propsData.active === '') {
+ this.activeCodeTabIndex = index
+ }
+
+ return {
+ title: slot.componentOptions.propsData.title,
+ elm: slot.elm
+ }
+ })
+
+ if (this.activeCodeTabIndex === -1 && this.codeTabs.length > 0) {
+ this.activeCodeTabIndex = 0
+ }
+ },
+ methods: {
+ changeCodeTab (index) {
+ this.activeCodeTabIndex = index
+ }
+ }
+}
+</script>
+
+<style lang="stylus" scoped>
+ .theme-code-group {}
+ .theme-code-group__nav {
+ margin-bottom: -35px;
+ background-color: $codeBgColor;
+ padding-bottom: 22px;
+ border-top-left-radius: 6px;
+ border-top-right-radius: 6px;
+ padding-left: 10px;
+ padding-top: 10px;
+ }
+ .theme-code-group__nav-tab {
+ border: 0;
+ padding: 5px;
+ cursor: pointer;
+ background-color: transparent;
+ font-size: 0.85em;
+ line-height: 1.4;
+ color: rgba(255, 255, 255, 0.9);
+ font-weight: 600;
+ }
+ .theme-code-group__nav-tab-active {
+ border-bottom: #42b983 1px solid;
+ }
+ .pre-blank {
+ color: #42b983;
+ }
+</style>
diff --git a/packages/docs/docs/guide/getting-started.md b/packages/docs/docs/guide/getting-started.md
index 8b839378ff..e2fcd4c756 100644
--- a/packages/docs/docs/guide/getting-started.md
+++ b/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>
```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>
+ ```bash
+ yarn init
+ ```
+ </code-block>
+
+ <code-block title="NPM">
```bash
- yarn init # npm init
+ npm init
```
+ </code-block>
+ </code-group>
3. Install VuePress locally
+ <code-group>
+ <code-block title="YARN" active>
+ ```bash
+ yarn add -D vuepress
+ ```
+ </code-block>
+
+ <code-block title="NPM">
```bash
- yarn add -D vuepress # npm install -D vuepress
+ 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>
+ ```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).
diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md
index 354eb5475d..d2982c1549 100644
--- a/packages/docs/docs/theme/default-theme-config.md
+++ b/packages/docs/docs/theme/default-theme-config.md
@@ -559,7 +559,7 @@ This will render `.vuepress/components/SpecialLayout.vue` for the given page.
## Ejecting
-You can copy the default theme source code into `.vuepress/theme` to fully customize the theme using the `vuepress eject [targetDir]` command. If you didn't install Vuepress globally, run `./node_modules/.bin/vuepress eject`.
+You can copy the default theme source code into `.vuepress/theme` to fully customize the theme using the `vuepress eject [targetDir]` command. If you didn’t install VuePress globally, run `./node_modules/.bin/vuepress eject`.
::: warning
Once you eject, you are on your own and **won’t** be receiving future updates or bugfixes to the default theme even if you upgrade VuePress.