fix: yarn create command in PackageManagerTabs

e2e/fixtures/package-manager-tabs/doc/index.mdx

@@ -0,0 +1,11 @@
+import { PackageManagerTabs } from '@theme';
+
+# Hello World
+
+## PackageManagerTabs A
+
+<PackageManagerTabs command="create rspress@latest" />
+
+## PackageManagerTabs B
+
+<PackageManagerTabs command="install rspress -D" />

e2e/fixtures/package-manager-tabs/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@rspress-fixture/rspress-package-manager-tabs",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rspress dev",
+    "build": "rspress build",
+    "preview": "rspress preview"
+  },
+  "dependencies": {
+    "rspress": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.17"
+  }
+}

e2e/fixtures/package-manager-tabs/rspress.config.ts

@@ -0,0 +1,6 @@
+import * as path from 'node:path';
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+});

e2e/tests/package-manager-tabs.test.ts

@@ -0,0 +1,92 @@
+import { expect, test } from '@playwright/test';
+import path from 'node:path';
+import { getPort, killProcess, runDevCommand } from '../utils/runCommands';
+
+const fixtureDir = path.resolve(__dirname, '../fixtures');
+
+test.describe('tabs-component test', async () => {
+  let appPort;
+  let app;
+
+  test.beforeAll(async () => {
+    const appDir = path.join(fixtureDir, 'package-manager-tabs');
+    appPort = await getPort();
+    app = await runDevCommand(appDir, appPort);
+  });
+
+  test.afterAll(async () => {
+    if (app) {
+      await killProcess(app);
+    }
+  });
+
+  test('Index page', async ({ page }) => {
+    await page.goto(`http://localhost:${appPort}`);
+
+    const tabs = await page.$$('[class^="tab_"] > div > span');
+    const tabsText = await Promise.all(
+      tabs.map(element => element.textContent()),
+    );
+
+    expect(tabsText).toEqual([
+      'npm',
+      'yarn',
+      'pnpm',
+      'bun',
+      'npm',
+      'yarn',
+      'pnpm',
+      'bun',
+    ]);
+
+    const clickTabs = await page.$$('[class^="tab_"]');
+
+    await clickTabs[0].click();
+    const npmSpanElements = await page.$$('code > span > span');
+    const npmCode = await Promise.all(
+      npmSpanElements.map(element => element.textContent()),
+    );
+    expect(npmCode).toEqual([
+      'npm create rspress@latest',
+      'npm install rspress ',
+      '-',
+      'D',
+    ]);
+
+    await clickTabs[1].click();
+    const yarnSpanElements = await page.$$('code > span > span');
+    const yarnCode = await Promise.all(
+      yarnSpanElements.map(element => element.textContent()),
+    );
+    expect(yarnCode).toEqual([
+      'yarn create rspress',
+      'yarn add rspress ',
+      '-',
+      'D',
+    ]);
+
+    await clickTabs[2].click();
+    const pnpmSpanElements = await page.$$('code > span > span');
+    const pnpmCode = await Promise.all(
+      pnpmSpanElements.map(element => element.textContent()),
+    );
+    expect(pnpmCode).toEqual([
+      'pnpm create rspress@latest',
+      'pnpm install rspress ',
+      '-',
+      'D',
+    ]);
+
+    await clickTabs[3].click();
+    const bunSpanElements = await page.$$('code > span > span');
+    const bunCode = await Promise.all(
+      bunSpanElements.map(element => element.textContent()),
+    );
+    expect(bunCode).toEqual([
+      'bun create rspress@latest',
+      'bun add rspress ',
+      '-',
+      'D',
+    ]);
+  });
+});

packages/theme-default/src/components/PackageManagerTabs/index.tsx

@@ -23,9 +23,15 @@ export interface PackageManagerTabProps {
 }
 
 function normalizeCommand(command: string): string {
+  // If command is yarn create foo@latest, remove `@latest`
+  if (command.startsWith('yarn create')) {
+    return command.replace(/(yarn create [^\s]+)@latest/, '$1');
+  }
+
   if (!command?.includes('install')) {
     return command;
   }
+
   // If command include `install` and package name, replace `install` with `add`
   const pureCommand = command
     .split(' ')