i18n(zh-cn): Update mdx.mdx (#6072)

* i18n(zh-cn): update mdx.mdx

* Update mdx.mdx

---------

Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>

src/content/docs/zh-cn/guides/integrations-guide/mdx.mdx

@@ -6,7 +6,7 @@ githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/int
 category: other
 i18nReady: true
 ---
-
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
 此 **[Astro 集成][astro-integration]** 能够使用 [MDX](https://mdxjs.com/) 组件，并允许你通过 `.mdx` 文件创建页面。
 
@@ -16,41 +16,61 @@ MDX 允许你在 Astro 项目的 [Markdown 内容中使用变量、JSX 表达式
 
 ## 安装
 
-### 快速安装
-
-`astro add` 命令行工具为你自动进行安装。在一个新的终端窗口中运行下列其中一个命令。（如果你不确定你使用的是哪个包管理器，请运行第一个命令）。然后按照提示，在终端中输入“y”（意思是“是”），每一条都是如此。
-
-```sh
-# Using NPM
-npx astro add mdx
-# Using Yarn
-yarn astro add mdx
-# Using PNPM
-pnpm astro add mdx
-```
+Astro 包含了一个 `astro add` 命令，用于自动设置官方集成。如果你愿意，可以改为[手动安装集成](#手动安装)。
+
+在新的终端窗口中运行下面其中一个命令。
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npx astro add mdx
+    ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm astro add mdx
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn astro add mdx
+  ```
+  </Fragment>
+ </PackageManagerTabs>
 
 如果你遇到任何问题，[请随时在 GitHub 上向我们报告](https://github.com/withastro/astro/issues)并尝试下面的手动安装步骤。
 
 ### 手动安装
 
-首先，用你的包管理器安装 `@astrojs/mdx` 包。如果你使用的是 npm 或者不确定哪个包管理器，在终端运行这个：
-
-```sh
-npm install @astrojs/mdx
-```
-
-然后，使用 `integrations` 属性将这个集成应用到你的 `astro.config.*` 文件：
-
-```diff lang="js" "mdx()"
-  // astro.config.mjs
-  import { defineConfig } from 'astro/config';
-+ import mdx from '@astrojs/mdx';
-
-  export default defineConfig({
-    // ...
-    integrations: [mdx()],
-    //             ^^^^^
-  });
+首先，安装 `@astrojs/mdx` 包： 
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npm install @astrojs/mdx
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm add @astrojs/mdx
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn add @astrojs/mdx
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+然后，使用 `integrations` 属性将集成应用到你的 `astro.config.*` 文件中：
+
+```js title="astro.config.mjs" ins={2} ins="mdx()"
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+export default defineConfig({
+  // ...
+  integrations: [mdx()],
+});
 ```
 
 ### 编辑器集成
@@ -84,14 +104,14 @@ Astro 的 MDX 集成为标准的 MDX 增加了额外的功能，包括 Markdown
 
 所有 [`markdown` 配置选项](/zh-cn/reference/configuration-reference/#markdown-选项)都可以在 MDX 集成中单独配置。这包括 remark 和 rehype 插件、语法高亮等。选项将默认为你的 Markdown 配置中的选项（[请参阅 `extendMarkdownConfig` 选项](#extendmarkdownconfig)来修改此选项）。
 
-```js
-// astro.config.mjs
+```js title="astro.config.mjs"
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import remarkToc from 'remark-toc';
 import rehypeMinifyHtml from 'rehype-minify-html';
 
 export default defineConfig({
+  // ...
   integrations: [
     mdx({
       syntaxHighlight: 'shiki',
@@ -120,12 +140,12 @@ MDX 将默认扩展[你的项目现有的 Markdown 配置](/zh-cn/reference/conf
 
 例如，假设你需要禁用 GitHub-Flavored Markdown，并为 MDX 文件应用一套不同的注释插件。你可以像这样应用这些选项，`extendMarkdownConfig` 默认为启用：
 
-```js
-// astro.config.mjs
+```js title="astro.config.mjs"
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
 export default defineConfig({
+  // ...
   markdown: {
     syntaxHighlight: 'prism',
     remarkPlugins: [remarkPlugin1],
@@ -147,12 +167,12 @@ export default defineConfig({
 
 你可能还需要在 MDX 中禁用 `markdown` 配置扩展。为此，将 `extendMarkdownConfig` 设置为 `false`：
 
-```js
-// astro.config.mjs
+```js title="astro.config.mjs"
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
 export default defineConfig({
+  // ...
   markdown: {
     remarkPlugins: [remarkPlugin1],
   },
@@ -180,12 +200,12 @@ export default defineConfig({
 
 默认情况下是禁用的。要启用 MDX 优化，请在 MDX 集成配置中添加以下内容：
 
-```js
-// astro.config.mjs
+```js title="astro.config.mjs"
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
 export default defineConfig({
+  // ...
   integrations: [
     mdx({
       optimize: true,
@@ -215,12 +235,12 @@ import Heading from '../Heading.astro';
 
 要使用 `customComponentNames` 属性配置此优化，指定应视为自定义组件的 HTML 元素名称数组：
 
-```js
-// astro.config.mjs
+```js title="astro.config.mjs"
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
 export default defineConfig({
+  // ...
   integrations: [
     mdx({
       optimize: {
@@ -240,20 +260,6 @@ export default defineConfig({
 
 * [Astro MDX 启动模板](https://github.com/withastro/astro/tree/latest/examples/with-mdx)显示了如何在你的 Astro 项目中使用 MDX 文件。
 
-## 故障排除
-
-如需帮助，请查看 [Discord](https://astro.build/chat) 上的 `#support` 频道。我们友好的支持小组成员将在这里提供帮助！
-
-你也可以查看我们的 [Astro 集成文档][astro-integration]，了解更多关于集成的信息。
-
-## 贡献
-
-这个项目由 Astro 的核心团队维护，欢迎你提交 issue 或 PR！
-
-## 更改日志
-
-有关该集成的变化历史，请参阅 [CHANGELOG.md](https://github.com/withastro/astro/tree/main/packages/integrations/mdx/CHANGELOG.md)。
-
 [astro-integration]: /zh-cn/guides/integrations-guide/
 
 [astro-ui-frameworks]: /zh-cn/core-concepts/framework-components/#使用框架组件