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

@sapphire/docusaurus-plugin-npm2yarn2pnpm

Package Overview
Dependencies
2
Maintainers
3
Versions
65
Issues
File Explorer

Advanced tools

@sapphire/docusaurus-plugin-npm2yarn2pnpm

Docusaurus Remark plugin for converting NPM Commands to Yarn and Pnpm

    1.1.0latest

Version published
Maintainers
3
Yearly downloads
5,366

Weekly downloads

Readme

Source

Sapphire Logo

@sapphire/docusaurus-plugin-npm2yarn2pnpm

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

GitHub npm

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.

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Jeroen Claassens

💻 🚇 📆

renovate[bot]

🚧

WhiteSource Renovate

🚧

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

Keywords

Socket

Product

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