README

@sapphire/docusaurus-plugin-npm2yarn2pnpm

Docusaurus Remark plugin for converting NPM Commands to Yarn and Pnpm.

Description

This is a plugin for Docusaurus that adds support for a npm2yarn2pnpm meta tag for code blocks. It will transform your NPM Command into the equivalents for Yarn and Pnpm. It will then give you a component using Tabs where users can select their preferred package manager. By default this will sync across all code blocks that use this meta tag, you can disable that through the plugin options.

It should be noted that this plugin is essentially a super set of Docusaurus npm2yarn remark plugin. If you're using @sapphire/docusaurus-plugin-npm2yarn2pnpm plugin, you won't need to use Docusaurus npm2yarn remark plugin.

Usage

In your docusaurus.config.js, for the plugins where you need this feature (doc, blog, pages, etc.), register it in the remarkPlugins option. (See Docs configuration for more details on configuration format)

// docusaurus.config.js
module.exports = {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          remarkPlugins: [[require('@sapphire/docusaurus-plugin-npm2yarn2pnpm')]]
        },
        pages: {
          remarkPlugins: [require('@sapphire/docusaurus-plugin-npm2yarn2pnpm')]
        },
        blog: {
          // ...
        }
      }
    ]
  ]
};

And then use it by adding the npm2yarn2pnpm key to the code block:

meta: _bash npm2yarn2pnpm_

npm i @sapphire/docusaurus-plugin-npm2yarn2pnpm

Line Highlighting

As you may be aware, Docusaurus supports Line Highlighting for code blocks. As line highlighting relies on meta just like this plugin would, we would normally run into a bit of a conflict as to what to set in the meta tag. To solve this issue this plugin supports a unique syntax of setting the meta tag. You can configure the line highlighting by adding a | character after the plugin meta tag.

For example consider the following code block:

meta: _bash npm2yarn2pnpm|{1}_

npm i @sapphire/docusaurus-plugin-npm2yarn2pnpm
npm i @sapphire/docusaurus-plugin-ts2esm2cjs

This will give you a three code blocks in a Tabs layout with the first line being highlighted.

Buy us some doughnuts

Sapphire Community is and always will be open source, even if we don't get donations. That being said, we know there are amazing people who may still want to donate just to show their appreciation. Thank you very much in advance!

We accept donations through Open Collective, Ko-fi, Paypal, Patreon and GitHub Sponsorships. You can use the buttons below to donate through your method of choice.