@docusaurus/remark-plugin-npm2yarn

Remark plugin npm2yarn

Motivation:

Transforms npm bash command code blocks to Docusaurus tabs:

The following (remove the //):

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

Becomes:

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')],
        ],
      },
    ],
  ];
}