Neat VuePress codeblock

By | September 3, 2021

TL;DR

To get from this:

to this:

Do this:

<code-group>
<code-block title="YARN" active>
```bash
cd docs
yarn install
yarn dev
```
</code-block>

<code-block title="NPM">
```bash
cd docs
npm install
npm run dev
```
</code-block>
</code-group>

The deets

Often when explaining a concept in programming, there are many ways to achieve the task. For example, Yarn or NPM package managers can be used and instructions are provided for both.

There is a neat little hack where code-groups can be used to produce a tab like feature as seen above. This makes the presentation look more professional.

This is in VuePress by the way.

Leave a Reply

Your email address will not be published. Required fields are marked *