Exciting news!Announcing our $4.6M Series Seed. Learn more →
Log in


Package Overview
File Explorer

Advanced tools


Docusaurus Remark plugin for converting NPM Commands to Yarn and Pnpm


Version published
Yearly downloads

Weekly downloads



Sapphire Logo


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

GitHub npm


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.


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.

Donate WithAddress
Open CollectiveClick Here
Ko-fiClick Here
PatreonClick Here
PayPalClick Here

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Jeroen Claassens

💻 🚇 📆



WhiteSource Renovate


This project follows the all-contributors specification. Contributions of any kind welcome!




Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc