docusaurus/packages/docusaurus-remark-plugin-npm2yarn
Sébastien Lorber fd43036ab8
Some checks failed
Argos CI / take-screenshots (push) Has been cancelled
Build Hash Router / Build Hash Router (push) Has been cancelled
Canary Release / Publish Canary (push) Has been cancelled
CodeQL / Analyze (javascript) (push) Has been cancelled
Continuous Releases / Continuous Releases (push) Has been cancelled
E2E Tests / E2E — Yarn v1 (18.0) (push) Has been cancelled
E2E Tests / E2E — Yarn v1 (20) (push) Has been cancelled
E2E Tests / E2E — Yarn v1 (22) (push) Has been cancelled
E2E Tests / E2E — Yarn Berry (node-modules, -s) (push) Has been cancelled
E2E Tests / E2E — Yarn Berry (node-modules, -st) (push) Has been cancelled
E2E Tests / E2E — Yarn Berry (pnp, -s) (push) Has been cancelled
E2E Tests / E2E — Yarn Berry (pnp, -st) (push) Has been cancelled
E2E Tests / E2E — npm (push) Has been cancelled
E2E Tests / E2E — pnpm (push) Has been cancelled
chore: release Docusaurus 3.6.3 (#10713)
2024-11-22 17:13:56 +01:00
..
src chore(deps): update npm to yarn from 2.0.0 to 2.2.1 (#9861) 2024-02-17 16:36:57 -05:00
.npmignore
example.png
package.json chore: release Docusaurus 3.6.3 (#10713) 2024-11-22 17:13:56 +01:00
README.md
tsconfig.json chore: simplify TypeScript configs, use TS 5.5 configDir placeholder (#10256) 2024-07-01 17:34:40 +02:00

Remark plugin npm2yarn

Motivation:

Transforms npm bash command code blocks to Docusaurus tabs:

The following (remove the //):

// ```bash npm2yarn
// npm run build
// ```

Becomes:

npm2yarn tabs example

Note: it only works when used with Docusaurus themes that have the Tabs and TabItems components.

Install

npm install @docusaurus/remark-plugin-npm2yarn

It is a Remark plugin, not a Docusaurus plugin, so you have to install it as a Remark plugin in the config of your Docusaurus plugins.

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          // ...
          remarkPlugins: [
            [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],
          ],
        },
        blog: {
          // ...
          remarkPlugins: [
            [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],
          ],
        },
        pages: {
          // ...
          remarkPlugins: [
            [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],
          ],
        },
        // ...
      },
    ],
  ],
  // ...
};

Options

Property Type Default Description
sync boolean false Syncing tab choices (Yarn and npm). See https://docusaurus.io/docs/markdown-features/#syncing-tab-choices for details.
converters array 'yarn', 'pnpm' The list of converters to use. The order of the converters is important, as the first converter will be used as the default choice.

Custom converters

In case you want to convert npm commands to something else than yarn or pnpm, you can use custom converters:

type CustomConverter = [name: string, cb: (npmCode: string) => string];
{
  remarkPlugins: [
    [
      require('@docusaurus/remark-plugin-npm2yarn'),
      {
        sync: true,
        converters: [
          'yarn',
          'pnpm',
          ['Turbo', (code) => code.replace(/npm/g, 'turbo')],
        ],
      },
    ],
  ];
}