Skip to content

Commit

Permalink
docs: add in CodeGroup and CodeBlock usage docs (#2621)
Browse files Browse the repository at this point in the history
  • Loading branch information
d-pollard committed Sep 25, 2020
1 parent 8d10119 commit 9bc09f8
Showing 1 changed file with 84 additions and 0 deletions.
84 changes: 84 additions & 0 deletions packages/docs/docs/theme/default-theme-config.md
Expand Up @@ -557,6 +557,90 @@ layout: SpecialLayout

This will render `.vuepress/components/SpecialLayout.vue` for the given page.

## Code Groups and Code Blocks <Badge text="1.6.0+" />
The default theme comes with custom components `<code-group />` and `<code-block>` that can help you to better group
separate code paths that have the same result.

**Example**

Yarn and npm installation instructions

**Input**
````md
<code-group>
<code-block title="YARN">
```bash
yarn create vuepress-site [optionalDirectoryName]
```
</code-block>

<code-block title="NPM">
```bash
npx create-vuepress-site [optionalDirectoryName]
```
</code-block>
</code-group>
````

**Output**

<code-group>
<code-block title="YARN">
```bash
yarn create vuepress-site [optionalDirectoryName]
```
</code-block>

<code-block title="NPM">
```bash
npx create-vuepress-site [optionalDirectoryName]
```
</code-block>
</code-group>

::: tip
Each `<code-block />` must have a line break after it to render properly
:::

### Default Code Block

By default, `<code-group />` will use the first `<code-block />` as the active initial code block.

To manually set the active `<code-block />`, just add the `active` prop to the `<code-block />`:

**Input**
````md
<code-group>
<code-block title="YARN">
```bash
yarn create vuepress-site [optionalDirectoryName]
```
</code-block>

<code-block title="NPM" active>
```bash
npx create-vuepress-site [optionalDirectoryName]
```
</code-block>
</code-group>
````

**Output**

<code-group>
<code-block title="YARN">
```bash
yarn create vuepress-site [optionalDirectoryName]
```
</code-block>

<code-block title="NPM" active>
```bash
npx create-vuepress-site [optionalDirectoryName]
```
</code-block>
</code-group>

## 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`.
Expand Down

0 comments on commit 9bc09f8

Please sign in to comment.