Code Tabs
Less than 1 minute
The theme provides you code tabs support.
Settings
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
plugins: {
mdEnhance: {
codetabs: true,
},
},
}),
};
Usage
This is the same as tabs feature, but it's special built for code blocks.
Only code fence after @tab
marker is allowed inside code tabs, other Markdown content will be ignored.
Demo
Install VuePress Theme Hope:
pnpm
pnpm add -D vuepress-theme-hope
yarn
yarn add -D vuepress-theme-hope
npm
npm i -D vuepress-theme-hope
Install VuePress Plugin Markdown Enhance:
pnpm
pnpm add -D vuepress-plugin-md-enhance
yarn
yarn add -D vuepress-plugin-md-enhance
npm
npm i -D vuepress-plugin-md-enhance
Install VuePress Theme Hope:
::: code-tabs#shell
@tab pnpm
```bash
pnpm add -D vuepress-theme-hope
```
@tab yarn
```bash
yarn add -D vuepress-theme-hope
```
@tab:active npm
```bash
npm i -D vuepress-theme-hope
```
:::
Install VuePress Plugin Markdown Enhance:
::: code-tabs#shell
@tab pnpm
```bash
pnpm add -D vuepress-plugin-md-enhance
```
@tab yarn
```bash
yarn add -D vuepress-plugin-md-enhance
```
@tab:active npm
```bash
npm i -D vuepress-plugin-md-enhance
```
:::