Multi-language Code Blocks

I’m working on a blog series, and was looking to get those “language selector” code blocks.

Here’s an example:

npm install foo

yarn add foo

pnpm add foo

It turns out that this is not a solved problem. Just searching for these keywords does not turn up much help.

I asked a few AI agents, and they got it incorrect as well. Some of the suggestions were even wildly incorrect.

To implement this, i ended up building a custom Tabs component.

npm install bar

yarn add bar

pnpm add bar