docusaurus/packages/docusaurus-remark-plugin-npm2yarn
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 misc: make copyUntypedFiles work for watch mode (#7445) 2022-05-18 19:18:32 +08:00
example.png feat(v2): Extract npm2yarn plugin (#3469) 2020-10-15 19:30:12 +02:00
package.json chore: release Docusaurus 3.6.3 (#10713) 2024-11-22 17:13:56 +01:00
README.md feat(npm-to-yarn): add support for PnPm and custom converters (#8690) 2023-02-24 17:59:15 +01:00
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')],
        ],
      },
    ],
  ];
}