docs: fixed command line display (#2312)

module-federation · Apr 10, 2024 · 180d54a · 180d54a
1 parent e133f80
commit 180d54a
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 92 deletions.
diff --git a/apps/website-new/docs/en/guide/basic/rspack.mdx b/apps/website-new/docs/en/guide/basic/rspack.mdx
@@ -16,19 +16,16 @@ Requires Rspack version 0.5.0 or above
 
 You can install the plugin with the following commands:
 
-```bash
-# For npm users
-npm add @module-federation/enhanced --save
-
-# For yarn users
-yarn add @module-federation/enhanced --save
-
-# For pnpm users
-pnpm add @module-federation/enhanced --save
-
-# For bun users
-bun add @module-federation/enhanced --save
-```
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs
+  command={{
+    npm: 'npm add @module-federation/enhanced --save',
+    yarn: 'yarn add @module-federation/enhanced --save',
+    pnpm: 'pnpm add @module-federation/enhanced --save',
+    bun: 'bun add @module-federation/enhanced --save',
+  }}
+/>
 
 ### Register the Plugin
 

diff --git a/apps/website-new/docs/en/guide/basic/runtime.mdx b/apps/website-new/docs/en/guide/basic/runtime.mdx
@@ -13,19 +13,16 @@ Before reading this section, it is assumed that you have already understood:
 
 ## Install Dependencies
 
-```bash
-# For npm users
-npm add @module-federation/enhanced --save
-
-# For yarn users
-yarn add @module-federation/enhanced --save
-
-# For pnpm users
-pnpm add @module-federation/enhanced --save
-
-# For bun users
-bun add @module-federation/enhanced --save
-```
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs
+  command={{
+    npm: 'npm add @module-federation/enhanced --save',
+    yarn: 'yarn add @module-federation/enhanced --save',
+    pnpm: 'pnpm add @module-federation/enhanced --save',
+    bun: 'bun add @module-federation/enhanced --save',
+  }}
+/>
 
 ## API
 

diff --git a/apps/website-new/docs/en/guide/basic/webpack.mdx b/apps/website-new/docs/en/guide/basic/webpack.mdx
@@ -12,19 +12,16 @@
 
 You can install the plugin with the following commands:
 
-```bash
-# For npm users
-npm add @module-federation/enhanced --save
-
-# For yarn users
-yarn add @module-federation/enhanced --save
-
-# For pnpm users
-pnpm add @module-federation/enhanced --save
-
-# For bun users
-bun add @module-federation/enhanced --save
-```
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs
+  command={{
+    npm: 'npm add @module-federation/enhanced --save',
+    yarn: 'yarn add @module-federation/enhanced --save',
+    pnpm: 'pnpm add @module-federation/enhanced --save',
+    bun: 'bun add @module-federation/enhanced --save',
+  }}
+/>
 
 ### Register the Plugin
 

diff --git a/apps/website-new/docs/en/guide/start/quick-start.mdx b/apps/website-new/docs/en/guide/start/quick-start.mdx
@@ -8,19 +8,18 @@ Before reading this guide, please first read the [Setting Up Environment](./sett
 
 Use [Rsbuild](https://rsbuild.dev/) to create a producer and call the following command:
 
-```bash
-# For npm users
-npm create rsbuild@latest
 
-# For yarn users
-yarn create rsbuild
+import { PackageManagerTabs } from '@theme';
 
-# For pnpm users
-pnpm create rsbuild@latest
+<PackageManagerTabs
+  command={{
+    npm: 'npm create rsbuild@latest',
+    yarn: 'yarn create rsbuild',
+    pnpm: 'pnpm create rsbuild@latest',
+    bun: 'bun create rsbuild@latest',
+  }}
+/>
 
-# For bun users
-bun create rsbuild@latest
-```
 
 > Complete the project creation according to the prompts.
 
@@ -34,23 +33,26 @@ bun create rsbuild@latest
 
 Following the steps above for initializing the project, we created a `React` project named `federation_provider`. Execute the following commands in sequence:
 
-```bash
-# For npm users
+<PackageManagerTabs
+  command={{
+    npm: `
 cd federation_provider
 npm add @module-federation/enhanced
-
-# For yarn users
+    `,
+    yarn: `
 cd federation_provider
 yarn add @module-federation/enhanced
-
-# For pnpm users
+    `,
+    pnpm: `
 cd federation_provider
 pnpm add @module-federation/enhanced
-
-# For bun users
+    `,
+    bun: `
 cd federation_provider
 bun add @module-federation/enhanced
-```
+    `,
+  }}
+/>
 
 ### 3. Exporting Modules by the Producer
 
@@ -98,19 +100,14 @@ export default defineConfig({
 
 ### 4. Starting the Producer
 
-```bash
-# For npm users
-npm run dev
-
-# For yarn users
-yarn run dev
-
-# For pnpm users
-pnpm run dev
-
-# For bun users
-bun run dev
-```
+<PackageManagerTabs
+  command={{
+    npm: `npm run dev`,
+    yarn: `yarn run dev`,
+    pnpm: `pnpm run dev`,
+    bun: `bun run dev`,
+  }}
+/>
 
 ```zsh
 ➜  federation_provider npm run dev
@@ -136,19 +133,15 @@ After the project starts, the `Manifest Link: http://localhost:3000/mf-manifest.
 
 Use [Rsbuild](https://rsbuild.dev/) to create a consumer and call the following command:
 
-```bash
-# For npm users
-npm create rsbuild@latest
-
-# For yarn users
-yarn create rsbuild
+<PackageManagerTabs
+  command={{
+    npm: 'npm create rsbuild@latest',
+    yarn: 'yarn create rsbuild',
+    pnpm: 'pnpm create rsbuild@latest',
+    bun: 'bun create rsbuild@latest',
+  }}
+/>
 
-# For pnpm users
-pnpm create rsbuild@latest
-
-# For bun users
-bun create rsbuild@latest
-```
 
 > Complete the project creation according to the prompts.
 
@@ -162,23 +155,27 @@ bun create rsbuild@latest
 
 Following the steps above for initializing the project, we created a `React` project named `federation_consumer`. Execute the following commands in sequence:
 
-```bash
-# For npm users
+<PackageManagerTabs
+  command={{
+    npm: `
 cd federation_consumer
 npm add @module-federation/enhanced
-
-# For yarn users
+    `,
+    yarn: `
 cd federation_consumer
 yarn add @module-federation/enhanced
-
-# For pnpm users
+    `,
+    pnpm: `
 cd federation_consumer
 pnpm add @module-federation/enhanced
-
-# For bun users
+    `,
+    bun: `
 cd federation_consumer
 bun add @module-federation/enhanced
-```
+    `,
+  }}
+/>
+
 
 ### 3. Consuming the Producer