[docs-infra] Allows to use codeblock in the docs (#37643)

Co-authored-by: siriwatknp <[email protected]>
Co-authored-by: Danilo Leal <[email protected]>

CHANGELOG.md

@@ -521,7 +521,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
 
   There is codemod that you can run in your project to do the transformation:
 
-  ```sh
+  ```bash
   npx @mui/codemod v5.0.0/base-remove-component-prop <path>
   ```
 
@@ -620,7 +620,7 @@ A big thanks to the 12 contributors who made this release possible. Here are som
 
   You can use this [codemod](https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/base-remove-unstyled-suffix.js) to help with the migration:
 
-  ```sh
+  ```bash
   npx @mui/codemod v5.0.0/base-remove-unstyled-suffix <path>
   ```
 
@@ -6265,7 +6265,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
 
   replace `@material-ui/*` prefix with `@mui/*`:
 
-  ```sh
+  ```bash
   @material-ui/system -> @mui/system
   @material-ui/styles -> @mui/styles
   @material-ui/lab -> @mui/lab
@@ -6278,7 +6278,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
 
   except these 3 packages that are renamed.
 
-  ```sh
+  ```bash
   @material-ui/core => @mui/material        // represents Material Design components.
   @material-ui/icons => @mui/icons-material // represents Material Design icons.
   @material-ui/unstyled => @mui/base        // fully functional components with minimum styles.
@@ -10973,13 +10973,13 @@ Here are some highlights ✨:
 
   Before:
 
-  ```sh
+  ```bash
   theme.spacing(2) => 16
   ```
 
   After:
 
-  ```sh
+  ```bash
   theme.spacing(2) => '16px'
   ```
 

CONTRIBUTING.md

@@ -58,7 +58,7 @@ When in doubt, keep your Pull Requests small. To give a Pull Request the best ch
 
 2. Clone the fork to your local machine and add upstream remote:
 
-```sh
+```bash
 git clone https://github.com/<your username>/material-ui.git
 cd material-ui
 git remote add upstream https://github.com/mui/material-ui.git
@@ -68,26 +68,26 @@ git remote add upstream https://github.com/mui/material-ui.git
 
 3. Synchronize your local `master` branch with the upstream one:
 
-```sh
+```bash
 git checkout master
 git pull upstream master
 ```
 
 4. Install the dependencies with yarn (npm isn't supported):
 
-```sh
+```bash
 yarn install
 ```
 
 5. Create a new topic branch:
 
-```sh
+```bash
 git checkout -b my-topic-branch
 ```
 
 6. Make changes, commit and push to your fork:
 
-```sh
+```bash
 git push -u origin HEAD
 ```
 
@@ -103,7 +103,7 @@ It's the local development environment used by the maintainers.
 
 To get started:
 
-```sh
+```bash
 yarn start
 ```
 
@@ -121,7 +121,7 @@ You might face the following problems:
 
 To solve these problems—you can use the playground:
 
-```sh
+```bash
 yarn docs:create-playground && yarn start
 ```
 
@@ -243,7 +243,7 @@ on _Details_ to find out more about them.
 The component API in the component `propTypes` and under `docs/pages/api-docs` is auto-generated from the [JSDoc](https://jsdoc.app/about-getting-started.html) in the TypeScript declarations.
 Be sure to update the documentation in the corresponding `.d.ts` files (e.g. `packages/mui-material/src/Button/Button.d.ts` for `<Button>`) and then run:
 
-```sh
+```bash
 $ yarn proptypes
 $ yarn docs:api
 ```
@@ -265,7 +265,7 @@ If, for example, you want to add new demos for the button component, you have to
 
 In this case, you are going to add the new file to the following directory:
 
-```sh
+```bash
 docs/src/pages/components/buttons/
 ```
 
@@ -326,7 +326,7 @@ Alternatively, you can open the Netlify preview of the documentation, and open a
 You can also package and test your changes locally.
 The following example shows how to package `@mui/material`, but you can package any MUI module with this process:
 
-```sh
+```bash
 $> cd packages/mui-material # or path to any other mui package
 $packages\mui-material> yarn build
 $packages\mui-material> cd ./build
@@ -336,7 +336,7 @@ $packages\mui-material> npm pack
 Navigate to the build folder of your respective package and locate a file with the format `mui-material-x.x.x.tar.gz`.
 Copy this file and move it to the project directory you want to test in, then run:
 
-```sh
+```bash
 $test-project> npm i ./path-to-file/mui-material-x.x.x.tar.gz
 ```
 

README.md

@@ -41,13 +41,13 @@ Material UI is available as an [npm package](https://www.npmjs.com/package/@mui/
 
 **npm:**
 
-```sh
+```bash
 npm install @mui/material @emotion/react @emotion/styled
 ```
 
 **yarn:**
 
-```sh
+```bash
 yarn add @mui/material @emotion/react @emotion/styled
 ```
 
@@ -69,13 +69,13 @@ Base UI is available as an [npm package](https://www.npmjs.com/package/@mui/base
 
 **npm:**
 
-```sh
+```bash
 npm install @mui/base
 ```
 
 **yarn:**
 
-```sh
+```bash
 yarn add @mui/base
 ```
 
@@ -88,27 +88,27 @@ MUI System is available as an [npm package](https://www.npmjs.com/package/@mui/s
 
 **npm:**
 
-```sh
+```bash
 npm install @mui/system @emotion/react @emotion/styled
 ```
 
 **yarn:**
 
-```sh
+```bash
 yarn add @mui/system @emotion/react @emotion/styled
 ```
 
 Or if you want to use `styled-components` as a styling engine:
 
 **npm:**
 
-```sh
+```bash
 npm install @mui/material @mui/styled-engine-sc styled-components
 ```
 
 **yarn:**
 
-```sh
+```bash
 yarn add @mui/material @mui/styled-engine-sc styled-components
 ```
 

benchmark/browser/README.md

@@ -2,7 +2,7 @@
 
 This project is used when running the following command:
 
-```sh
+```bash
 yarn benchmark:browser
 ```
 
@@ -14,7 +14,7 @@ You should use these numbers exclusively for comparing performance between diffe
 
 For comparable results ask a maintainer to approve the CircleCI job `benchmark`.
 
-```sh
+```bash
 noop (baseline):
   02.53 ±00.11ms
 Grid (html):

benchmark/server/README.md

@@ -4,7 +4,7 @@
 
 _Synthetic benchmark_
 
-```sh
+```bash
 yarn server:core
 
 ButtonBase x 40,724 ops/sec ±1.58% (189 runs sampled)
@@ -19,7 +19,7 @@ Markdown x 954 ops/sec ±1.35% (187 runs sampled)
 
 _Synthetic benchmark_
 
-```sh
+```bash
 yarn server:docs
 
 Markdown x 946 ops/sec ±4.04% (176 runs sampled)
@@ -30,7 +30,7 @@ MarkdownElement x 3,941 ops/sec ±5.53% (185 runs sampled)
 
 _Synthetic benchmark_
 
-```sh
+```bash
 yarn server:styles
 
 Box x 3,850 ops/sec ±3.58% (178 runs sampled)
@@ -48,7 +48,7 @@ Naked x 58,694 ops/sec ±0.86% (188 runs sampled)
 
 _Synthetic benchmark_
 
-```sh
+```bash
 yarn server:system
 
 @styled-system/css x 64,606 ops/sec ±0.45% (188 runs sampled)
@@ -58,7 +58,7 @@ yarn server:system
 
 ## Real-world benchmark
 
-```sh
+```bash
 yarn server:server
 
 bombardier \

docs/README.md

@@ -4,7 +4,7 @@ This is the documentation website of MUI.
 
 To start the docs site in development mode, from the project root, run:
 
-```sh
+```bash
 yarn && yarn docs:dev
 ```
 

docs/data/base/getting-started/quickstart/quickstart-pt.md

@@ -6,13 +6,13 @@
 
 Para instalar e gravar as dependências, no seu `package.json`, execute o seguinte comando **npm**:
 
-```sh
+```bash
 npm install @mui/base
 ```
 
 Com o **yarn**:
 
-```sh
+```bash
 yarn add @mui/base
 ```
 

docs/data/base/getting-started/quickstart/quickstart-zh.md

@@ -6,13 +6,13 @@
 
 把专案安装并保存在您的`package.json`,你可以用**npm**执行以下指令
 
-```sh
+```bash
 npm install @mui/base
 ```
 
 或使用**yarn**
 
-```sh
+```bash
 yarn add @mui/base
 ```
 

docs/data/base/getting-started/quickstart/quickstart.md

@@ -8,19 +8,19 @@
 
 ### With npm
 
-```sh
+```bash
 npm install @mui/base
 ```
 
 ### With yarn
 
-```sh
+```bash
 yarn add @mui/base
 ```
 
 ### With pnpm
 
-```sh
+```bash
 pnpm add @mui/base
 ```
 

docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-pt.md

@@ -28,7 +28,7 @@ The end result of this guide is an interactive media player interface. Here's wh
 
 We'll use [`create-react-app` with typescript](https://create-react-app.dev/docs/adding-typescript/#installation) for this guide. After you have created the project, follow the instructions given on the [Tailwind CSS installation page](https://tailwindcss.com/docs/guides/create-react-app) in order to configure `tailwind`. Next, install `@mui/base` in the project:
 
-```sh
+```bash
 npm install @mui/base
 ```
 

docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-zh.md

@@ -28,7 +28,7 @@ The end result of this guide is an interactive media player interface. Here's wh
 
 We'll use [`create-react-app` with typescript](https://create-react-app.dev/docs/adding-typescript/#installation) for this guide. After you have created the project, follow the instructions given on the [Tailwind CSS installation page](https://tailwindcss.com/docs/guides/create-react-app) in order to configure `tailwind`. Next, install `@mui/base` in the project:
 
-```sh
+```bash
 npm install @mui/base
 ```
 

docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md

@@ -31,7 +31,7 @@ We'll use [`create-react-app` with typescript](https://create-react-app.dev/docs
 After you have created the project, follow the instructions given on the [Tailwind CSS installation page](https://tailwindcss.com/docs/guides/create-react-app) in order to configure `tailwind`.
 Next, install `@mui/base` in the project:
 
-```sh
+```bash
 npm install @mui/base
 ```
 

docs/data/joy/components/text-field/text-field.md

@@ -20,7 +20,7 @@ To learn more why it has been removed, visit the [RFC](https://github.com/mui/ma
 
 Run this [codemod](https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md#joy-text-field-to-input) in your project's terminal:
 
-```sh
+```bash
 npx @mui/codemod v5.0.0/joy-text-field-to-input <path>
 ```
 

docs/data/joy/getting-started/installation/installation-pt.md

@@ -6,7 +6,7 @@
 
 Run the command below to add Joy UI using **npm** to your project.
 
-```sh
+```bash
 npm install @mui/joy @emotion/react @emotion/styled
 npm start
 ```
@@ -15,7 +15,7 @@ npm start
 
 Run the command below to add Joy UI using **yarn** to your project.
 
-```sh
+```bash
 yarn add @mui/joy @emotion/react @emotion/styled
 yarn start
 ```