Neat VuePress codeblock

By | September 3, 2021


To get from this:

to this:

Do this:

<code-block title="YARN" active>
cd docs
yarn install
yarn dev

<code-block title="NPM">
cd docs
npm install
npm run dev

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 *