docs: support latest theme (#39)

vuepress · Sep 23, 2024 · 08b7485 · 08b7485
1 parent f192231
commit 08b7485
Show file tree

Hide file tree

Showing 10 changed files with 587 additions and 600 deletions.
diff --git a/docs/guide/bundler.md b/docs/guide/bundler.md
@@ -6,8 +6,9 @@ VuePress supports using [Webpack](https://webpack.js.org/) or [Vite](https://vit
 
 When installing the [vuepress](https://www.npmjs.com/package/vuepress) package, no bundlers will be installed. You need to choose a bundler to install.
 
-<CodeGroup>
-  <CodeGroupItem title="pnpm" active>
+::: code-tabs#shell
+
+@tab pnpm
 
 ```bash
 # install vite bundler
@@ -16,9 +17,7 @@ pnpm add -D vuepress@next @vuepress/bundler-vite@next
 pnpm add -D vuepress@next @vuepress/bundler-webpack@next
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="yarn">
+@tab yarn
 
 ```bash
 # install vite bundler
@@ -27,9 +26,7 @@ yarn add -D vuepress@next @vuepress/bundler-vite@next
 yarn add -D vuepress@next @vuepress/bundler-webpack@next
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="npm">
+@tab npm
 
 ```bash
 # install vite bundler
@@ -38,8 +35,7 @@ npm install -D vuepress@next @vuepress/bundler-vite@next
 npm install -D vuepress@next @vuepress/bundler-webpack@next
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
+:::
 
 ## Use a Bundler
 

diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
@@ -28,31 +28,27 @@ You can try VuePress directly in your browser on [StackBlitz](https://stackblitz
 
 You can use [create-vuepress](https://www.npmjs.com/package/create-vuepress) to generate a template directly.
 
-<CodeGroup>
-  <CodeGroupItem title="pnpm" active>
+::: code-tabs#shell
+
+@tab pnpm
 
 ```bash
 pnpm create vuepress vuepress-starter
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="yarn">
+@tab yarn
 
 ```bash
 yarn create vuepress vuepress-starter
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="npm">
+@tab npm
 
 ```bash
 npm init vuepress vuepress-starter
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
+:::
 
 #### Setup Manually
 
@@ -67,39 +63,36 @@ cd vuepress-starter
 
 - Initialize your project
 
-<CodeGroup>
-  <CodeGroupItem title="pnpm" active>
+::: code-tabs#shell
+
+@tab pnpm
 
 ```bash
 git init
 pnpm init
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="yarn">
+@tab yarn
 
 ```bash
 git init
 yarn init
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="npm">
+@tab npm
 
 ```bash
 git init
 npm init
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
+:::
 
 - Install VuePress
 
-<CodeGroup>
-  <CodeGroupItem title="pnpm" active>
+::: code-tabs#shell
+
+@tab pnpm
 
 ```bash
 # install vuepress and vue
@@ -108,9 +101,7 @@ pnpm add -D vuepress@next vue
 pnpm add -D @vuepress/bundler-vite@next @vuepress/theme-default@next
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="yarn">
+@tab yarn
 
 ```bash
 # install vuepress
@@ -119,9 +110,7 @@ yarn add -D vuepress@next
 yarn add -D @vuepress/bundler-vite@next @vuepress/theme-default@next
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="npm">
+@tab npm
 
 ```bash
 # install vuepress
@@ -130,8 +119,7 @@ npm install -D vuepress@next
 npm install -D @vuepress/bundler-vite@next @vuepress/theme-default@next
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
+:::
 
 - Create `docs` directory and `docs/.vuepress` directory
 
@@ -205,63 +193,55 @@ You can add some [scripts](https://classic.yarnpkg.com/en/docs/package-json#toc-
 
 Then, run `docs:dev` script to start the dev server:
 
-<CodeGroup>
-  <CodeGroupItem title="pnpm" active>
+::: code-tabs#shell
+
+@tab pnpm
 
 ```bash
 pnpm docs:dev
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="yarn">
+@tab yarn
 
 ```bash
 yarn docs:dev
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="npm">
+@tab npm
 
 ```bash
 npm run docs:dev
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
+:::
 
 VuePress will start a hot-reloading development server at [http://localhost:8080](http://localhost:8080). When you modify your markdown files, the content in the browser will be auto updated.
 
 ### Build Your Site
 
 To build your site, run `docs:build` script:
 
-<CodeGroup>
-  <CodeGroupItem title="pnpm" active>
+::: code-tabs#shell
+
+@tab pnpm
 
 ```bash
 pnpm docs:build
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="yarn">
+@tab yarn
 
 ```bash
 yarn docs:build
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="npm">
+@tab npm
 
 ```bash
 npm run docs:build
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
+:::
 
 You will see the generated static files in the `docs/.vuepress/dist` directory. You can check out [deployment](./deployment.md) for how to deploy them.
 

diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md
@@ -501,5 +501,8 @@ If you want to use those tags anyway, try either of the following workarounds:
 
 - Adding a [v-pre](https://vuejs.org/api/built-in-directives.html#v-pre) directive to skip the compilation of the element and its children. Notice that the template syntax would also be invalid.
 - Using [compilerOptions.isCustomElement](https://vuejs.org/api/application.html#app-config-compileroptions) to tell Vue template compiler not try to resolve them as components.
-  - For `@bundler-webpack`, set [vue.compilerOptions](../reference/bundler/webpack.md#vue)
-  - For `@bundler-vite`, set [vuePluginOptions.template.compilerOptions](../reference/bundler/vite.md#vuepluginoptions)
+  - For `@vuepress/bundler-webpack`, set [vue.compilerOptions](../reference/bundler/webpack.md#vue)
+  - For `@vuepress/bundler-vite`, set [vuePluginOptions.template.compilerOptions](../reference/bundler/vite.md#vuepluginoptions)
+
+[prismjs]: https://ecosystem.vuejs.press/plugins/markdown/prismjs.html
+[shiki]: https://ecosystem.vuejs.press/plugins/markdown/shiki.html
diff --git a/docs/guide/migration.md b/docs/guide/migration.md
@@ -314,7 +314,7 @@ Removed.
 
 #### Built-in Components
 
-- `<CodeGroup />` and `<CodeBlock />` renamed to `<CodeGroup />` and `<CodeGroupItem />`
+- `<CodeGroup />` and `<CodeBlock />` are replaced by [code tab feature](https://ecosystem.vuejs.press/themes/default/markdown.html#code-tabs)
 - `<Badge />`
   - `$badgeErrorColor` palette variable renamed to `$badgeDangerColor`
   - `type` prop only accepts `tip`, `warning` and `danger` now

diff --git a/docs/zh/guide/bundler.md b/docs/zh/guide/bundler.md
@@ -6,8 +6,9 @@ VuePress 支持使用 [Vite](https://vitejs.dev/) 或 [Webpack](https://webpack.
 
 在安装 [vuepress](https://www.npmjs.com/package/vuepress) 包时，并不会自动安装打包工具，你需要选择并安装一个打包工具。
 
-<CodeGroup>
-  <CodeGroupItem title="pnpm" active>
+::: code-tabs#shell
+
+@tab pnpm
 
 ```bash
 # 安装 vite 打包工具
@@ -16,9 +17,7 @@ pnpm add -D vuepress@next @vuepress/bundler-vite@next
 pnpm add -D vuepress@next @vuepress/bundler-webpack@next
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="yarn">
+@tab yarn
 
 ```bash
 # 安装 vite 打包工具
@@ -27,9 +26,7 @@ yarn add -D vuepress@next @vuepress/bundler-vite@next
 yarn add -D vuepress@next @vuepress/bundler-webpack@next
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="npm">
+@tab npm
 
 ```bash
 # 安装 vite 打包工具
@@ -38,8 +35,7 @@ npm install -D vuepress@next @vuepress/bundler-vite@next
 npm install -D vuepress@next @vuepress/bundler-webpack@next
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
+:::
 
 ## 使用打包工具