[docs-infra] Allows to use codeblock in the docs

[alexfauquette]

Iteration over the #36766

Preview: https://deploy-preview-37643--material-ui.netlify.app/experiments/docs/installation/

Context

This PR solves the same issue as #36766 : Allowing to have tabs into code. But instead of using a component with some props, it's directly set into the markdown with a <codeblock /> wrapping multiple codes.

codeblocks with the same storageKey will save their value in the same place

<codeblock storageKey="package-manager">

```<language name> <tabname>
your code
```


```<language name> <tabname>
your code
```

</codeblock>

Which difference with initial PR

I did not keep the selected interface

The main reason was the management of the configuration, which does not feat well with their <codeblock> and it's very edge case to have those selects. So I assumed we will create a dedicated component for that based on <HighlightedCodeWithTabs/>

[mui-bot]

Netlify deploy preview

• docs/data/base/getting-started/quickstart/quickstart-pt.md
• docs/data/base/getting-started/quickstart/quickstart-zh.md
• docs/data/base/getting-started/quickstart/quickstart.md
• docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-pt.md
• docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-zh.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 0c399cd

[siriwatknp]

@alexfauquette Great improvements!

[Janpot]

Very nice!

[cherniavskii]

A great addition to the docs! Thanks for working on this @alexfauquette @siriwatknp 🎉

[cherniavskii]

Should be configurable?

[alexfauquette]

Nice idea. Now it's feasible to do <codeblock storageKey="package-manager"> which will save the value in the key codeblock-package-manager. I'm adding codeblock- to avoid naming collisions.

[cherniavskii]

The selected state is acting weird after a few time switching between tabs:

Screen.Recording.2023-06-29.at.13.01.25.mov

[alexfauquette]

Fixed
@siriwatknp I noticed, you used <Tab slot={{ root: StyledTab }} /> instead of doing StyledTab = styled(Tab)

Moving from the first to the second strategy fixed the bug. But I'm wondering if their is a reason to choose the first one?

[cherniavskii]

Nice! 👍

[oliviertassinari]

👍

[alexfauquette]

@samuelsycamore You can now update all the install script you want on core :)