vitepress-plugin-npm-commands

A plugin that adds syntax for showing npm, yarn, pnpm, bun commands in tabs.

Installation

npm i -D vitepress-plugin-npm-commands vitepress-plugin-tabs

vitepress-plugin-npm-commands requires vitepress-plugin-tabs to be installed.

Usage

After installing the plugin, you'll need to edit both App Config and Theme Config.

// .vitepress/config.ts
import { defineConfig } from 'vitepress'
import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
import { npmCommandsMarkdownPlugin } from 'vitepress-plugin-npm-commands'

export default defineConfig({
  markdown: {
    config(md) {
      md.use(tabsMarkdownPlugin)
      md.use(npmCommandsMarkdownPlugin)
    },
  },
})

// .vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    enhanceAppWithTabs(app)
  },
} satisfies Theme

Syntax

Auto conversion

Adding the // [!=npm auto] comment on a line will convert that npm command to other package manager commands. Note that this is a simple string replacement and only works with simple cases.

```sh
npm i
npm run build
npm run test
```

npm i
npm run build
npm run test

Manual declaration

Adding the // [!=npm npm]/// [!=npm yarn]/// [!=npm pnpm]/// [!=npm bun] comment on a line will limit that line to be shown only in that package manager tab.

```sh{1}
npx degit user/project my-project 
cd my-project

npm install
npm run dev
```

npx degit user/project my-project 
cd my-project

npm install
npm run dev