Description

This PR introduces two new components related to the code block:

• CodeBox: The main component for rendering the code block;
• CodeTabs: The component that customizes the Tabs component to match the CodeBox style.

And introduces a plugin for resolving the desired format in markdown files into the code tabs structure:

• codeTabsResolver: The plugin transforms the format below into the code tabs structure.

  ```mjs|cjs labels="MJS,CJS" link="[More options](https://github.com/nodejs/nodejs.org)"
  const { createHmac } = await import('node:crypto');
  --------------
  const { createHmac } = require('node:crypto');
  ``` <!-- prevent markdown from formatting this, ignore it -->

Validation

Single file

Multiple files

Multiple files with link

Considerations

Some things were not clear to me about how the implementation should go.

• Is there a minimum/maximum width?;
• Where should the copied notification appear? (top left, top right...);
• Is it okay to create the CodeTabs for dealing with the tabs structure? I couldn't manage to make it work with a single component;
• I also had to update the Tabs implementation to accept an addons prop so that we can render it correctly without harming the responsive layout;
• In the CodeBox component I'm using a languageMap variable for mapping the display language with the language that is used in the markdown. Where should this go? Should this have internationalization support?;
• In the codeTabsResolver I'm using the normalizeLanguage function to handle JavaScript file extensions like mjs. Is it ok? It seemed fragile to me, but I couldn't think of anything else;
• The ArrowUpRightIcon looks different from the one used in Figma;
• The green used in the Tabs component is different from the one used in Figma, so I had to overwrite it, but it seems wrong to do it. Should we update the Tabs green color or remove the style overriding it in the CodeTabs?

Related Issues

Addresses #5819.

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run npx turbo lint to ensure the code follows the style guide. And run npx turbo lint:fix to fix the style errors if necessary.
• I have run npx turbo format to ensure the code follows the style guide.
• I have run npx turbo test to check if all tests are passing.
• I've covered new added functionality with unit tests if necessary.