Overview

The npmTo container converts npm command-line code blocks into pnpm / yarn / deno / bun command-line code blocks, presenting them as a group of code blocks on the page.

Within the ::: npm-to container, you only need to write the npm command code block once.

Why do we need the npmTo container?

When I write documentation, I often need to provide commands for different environments like pnpm / yarn / npm. This requires multiple code blocks wrapped in the ::: code-tabs container, which is time-consuming and takes up a lot of space in the Markdown content, leading to a poor experience. That's why I created the ::: npm-to container to solve this problem.

Usage

::: npm-to
``` sh
npm install -D vuepress vuepress-theme-plume
```
:::

Just wrap the code block containing the npm command-line in the ::: npm-to container.

The npm-to container only supports a single code block and cannot contain other content

The code above will be converted internally to:

::: code-tabs
@tab pnpm
``` sh
pnpm add -D vuepress vuepress-theme-plume
```
@tab yarn
``` sh
yarn add -D vuepress vuepress-theme-plume
```
@tab npm
``` sh
npm install -D vuepress vuepress-theme-plume
```
:::

The final output on the page will be:

pnpm

pnpm add -D vuepress vuepress-theme-plume

yarn

yarn add -D vuepress vuepress-theme-plume

npm

npm install -D vuepress vuepress-theme-plume

You can also control the display order of the code blocks in the group, as shown below:

Input:

::: npm-to tabs="npm,yarn,pnpm,bun,deno"
``` sh
npm install -D vuepress vuepress-theme-plume
```
:::

Output:

npm

npm install -D vuepress vuepress-theme-plume

yarn

yarn add -D vuepress vuepress-theme-plume

pnpm

pnpm add -D vuepress vuepress-theme-plume

bun

bun add -D vuepress vuepress-theme-plume

deno

deno add -D vuepress vuepress-theme-plume

Configuration

This feature is not enabled by default. You need to enable it in the theme configuration.

.vuepress/config.ts

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      // npmTo: true, // Enable with default configuration
      npmTo: {
        tabs: ['npm', 'yarn', 'pnpm'], // Default display order of code blocks
      }
    },
  })
})

npm-to supports converting npm command lines to pnpm / yarn / deno / bun command lines. You can configure the tabs according to your needs.

Supported Command Lines

npmTo does not support all npm command lines. Here is the list of supported commands:

• npm install / npm i
• npm run / npm run-script
• npm init
• npm create
• npm uninstall / npm rm / npm remove / npm un / npm unlink
• npm ci
• npx

Info

For unsupported command lines, npmTo will not process them and will only copy them to the other code blocks.

Examples

Input:

::: npm-to
```sh
npm install && npm run docs:dev
```
:::

Output:

pnpm

pnpm install && pnpm docs:dev

yarn

yarn && yarn docs:dev

npm

npm install && npm run docs:dev

Input:

::: npm-to
```sh
npm i -D vue
npm i --save-peer vuepress
npm i typescript
```
:::

Output:

pnpm

pnpm add -D vue
pnpm add --save-peer vuepress
pnpm add typescript

yarn

yarn add -D vue
yarn add --peer vuepress
yarn add typescript

npm

npm i -D vue
npm i --save-peer vuepress
npm i typescript

Input:

::: npm-to
```sh
npm run docs:dev -- --clean-cache
```
:::

Output:

pnpm

pnpm docs:dev --clean-cache

yarn

yarn docs:dev --clean-cache

npm

npm run docs:dev -- --clean-cache

Input:

::: npm-to tabs="pnpm,yarn,npm,bun,deno"
```sh
npm ci
```
:::

Output:

pnpm

pnpm install --frozen-lockfile

yarn

yarn install --immutable

npm

npm ci

bun

bun install --frozen-lockfile

deno

deno install --frozen

Contributors

zhenghaoyang24pengzhanbo

Changelog

3/27/25, 1:06 PM

View All Changelog

• 9f99a-docs: add en markdown doc (#538)on 3/27/25