chore: update

Author: SoonIter

website/docs/zh/config/lib/umd-name.mdx

@@ -15,12 +15,12 @@ UMD 包的模块名称不能与全局变量名称冲突。
 
 UMD 包将会挂载到 `global.MyLibrary`。
 
-```ts title="rslib.config.ts" {5}
+```ts title="rslib.config.ts"
 export default {
   lib: [
     {
       format: 'umd',
-      umdName: 'MyLibrary',
+      umdName: 'MyLibrary', // [!code highlight]
     },
   ],
 };

website/docs/zh/guide/advanced/json-files.mdx

@@ -240,19 +240,19 @@ Rslib 支持在不同的打包模式下，JSON / YAML / TOML 文件以不同的
 
 例如下面的配置将会将 `src` 目录下的所有 JSON 文件按原样输出：
 
-```ts title="rslib.config.ts" {7,11-12}
+```ts title="rslib.config.ts"
 export default defineConfig({
   lib: [
     {
       bundle: false,
       source: {
         entry: {
-          index: ['./src/**', '!./src/**/*.json'],
+          index: ['./src/**', '!./src/**/*.json'], // [!code highlight]
         },
       },
       output: {
-        copy: [{ from: './**/*.json', context: './src' }],
-        externals: [/.*\.json$/],
+        copy: [{ from: './**/*.json', context: './src' }], // [!code highlight]
+        externals: [/.*\.json$/], // [!code highlight]
       },
     },
   ],

website/docs/zh/guide/advanced/module-federation.mdx

@@ -30,14 +30,15 @@ import { PackageManagerTabs } from '@theme';
 
 然后在 `rslib.config.ts` 中注册插件:
 
-```ts title='rslib.config.ts' {8-43}
+```ts title='rslib.config.ts'
 import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { defineConfig } from '@rslib/core';
 
 export default defineConfig({
   lib: [
     // ... 其他 format
+    // [!code highlight:35]
     {
       format: 'mf',
       output: {
@@ -116,31 +117,31 @@ Rslib 支持宿主应用和 Rslib 模块联邦项目同时开发。
 设置宿主应用消费 Rslib 的模块联邦库。查看[@module-federation/rsbuild-plugin
 ](https://www.npmjs.com/package/@module-federation/rsbuild-plugin) 获取更多信息。
 
-```ts title="rsbuild.config.ts" {8-24}
+```ts title="rsbuild.config.ts"
 import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
 import { defineConfig } from '@rsbuild/core';
 import { pluginReact } from '@rsbuild/plugin-react';
 
 export default defineConfig({
   plugins: [
     pluginReact(),
-    pluginModuleFederation({
-      name: 'rsbuild_host',
-      remotes: {
-        rslib: 'rslib@http://localhost:3001/mf/mf-manifest.json',
-      },
-      shared: {
-        react: {
-          singleton: true,
-        },
-        'react-dom': {
-          singleton: true,
-        },
-      },
-      // 开启这个当 Rslib 产物为 'production' 模式， 但是宿主应用是 'development' 模式。
-      // 参考链接: https://lib.rsbuild.dev/guide/advanced/module-federation#faqs
-      shareStrategy: 'loaded-first',
-    }),
+    pluginModuleFederation({ // [!code highlight]
+      name: 'rsbuild_host', // [!code highlight]
+      remotes: { // [!code highlight]
+        rslib: 'rslib@http://localhost:3001/mf/mf-manifest.json', // [!code highlight]
+      }, // [!code highlight]
+      shared: { // [!code highlight]
+        react: { // [!code highlight]
+          singleton: true, // [!code highlight]
+        }, // [!code highlight]
+        'react-dom': { // [!code highlight]
+          singleton: true, // [!code highlight]
+        }, // [!code highlight]
+      }, // [!code highlight]
+      // 开启这个当 Rslib 产物为 'production' 模式， 但是宿主应用是 'development' 模式。 // [!code highlight]
+      // 参考链接: https://lib.rsbuild.dev/guide/advanced/module-federation#faqs // [!code highlight]
+      shareStrategy: 'loaded-first', // [!code highlight]
+    }), // [!code highlight]
   ],
 });
 ```
@@ -181,7 +182,7 @@ Rslib 支持使用 Storybook 开发 Rslib 模块联邦项目。
 
 2. 然后创建 Storybook 配置文件 `.storybook/main.ts`，指定 stories 和 addons，并设置 framework 和相应的 framework 集成。
 
-```ts title=".storybook/main.ts" {18-38}
+```ts title=".storybook/main.ts"
 import { dirname, join } from 'node:path';
 import type { StorybookConfig } from 'storybook-react-rsbuild';
 
@@ -199,7 +200,7 @@ const config: StorybookConfig = {
     options: {},
   },
   addons: [
-    {
+    { // [!code highlight:20]
       name: getAbsolutePath('storybook-addon-rslib'),
       options: {
         rslib: {
@@ -230,10 +231,10 @@ export default config;
 
 从远程模块引入组件
 
-```ts title="stories/index.stories.tsx" {2-3}
+```ts title="stories/index.stories.tsx"
 import React from 'react';
-// 在这里加载远程模块，Storybook 相当于宿主应用.
-import { Counter } from 'rslib-module';
+// 在这里加载远程模块，Storybook 相当于宿主应用. // [!code highlight]
+import { Counter } from 'rslib-module'; // [!code highlight]
 
 const Component = () => <Counter />;
 

website/docs/zh/guide/basic/output-format.mdx

@@ -92,18 +92,18 @@ StackOverflow 上的详细回答：[什么是通用模块定义 (UMD)？](https:
 - `output.externals.react: 'React'`: 指定外部依赖 `react` 可以通过 `window.React` 访问。
 - `runtime: 'classic'`: 使用 React 的 classic 运行时，以支持使用 React 版本低于 18 的应用程序。
 
-```ts title="rslib.config.ts" {7-12,22}
+```ts title="rslib.config.ts"
 import { pluginReact } from '@rsbuild/plugin-react';
 import { defineConfig } from '@rslib/core';
 
 export default defineConfig({
   lib: [
     {
-      format: 'umd',
-      umdName: 'RslibUmdExample',
+      format: 'umd', // [!code highlight]
+      umdName: 'RslibUmdExample', // [!code highlight]
       output: {
         externals: {
-          react: 'React',
+          react: 'React', // [!code highlight]
         },
         distPath: {
           root: './dist/umd',
@@ -117,7 +117,7 @@ export default defineConfig({
   plugins: [
     pluginReact({
       swcReactOptions: {
-        runtime: 'classic',
+        runtime: 'classic', // [!code highlight]
       },
     }),
   ],

website/docs/zh/guide/solution/react.mdx

@@ -27,18 +27,18 @@ import { PackageManagerTabs } from '@theme';
 
 例如，在 `rslib.config.ts` 中注册:
 
-```ts title="rslib.config.ts" {2,8-11}
+```ts title="rslib.config.ts"
 import { defineConfig } from '@rslib/core';
-import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginReact } from '@rsbuild/plugin-react'; // [!code highlight]
 
 export default defineConfig({
   lib: [
     // ...
   ],
   output: {
-    target: 'web',
+    target: 'web', // [!code highlight]
   },
-  plugins: [pluginReact(/** options here */)],
+  plugins: [pluginReact(/** options here */)], // [!code highlight]
 });
 ```
 
@@ -53,7 +53,7 @@ React 引入了一个 [新的 JSX transform](https://legacy.reactjs.org/blog/202
 
 要更改 JSX transform，可以传递 [swcReactOptions](https://rsbuild.dev/zh/plugins/list/plugin-react#swcreactoptionsruntime) 给 React plugin. 比如要使用 classic runtime 时:
 
-```ts title="rslib.config.ts" {13-15}
+```ts title="rslib.config.ts"
 import { pluginReact } from '@rsbuild/plugin-react';
 import { defineConfig } from '@rslib/core';
 
@@ -66,9 +66,9 @@ export default defineConfig({
   },
   plugins: [
     pluginReact({
-      swcReactOptions: {
-        runtime: 'classic',
-      },
+      swcReactOptions: { // [!code highlight]
+        runtime: 'classic', // [!code highlight]
+      }, // [!code highlight]
     }),
   ],
 });
@@ -83,7 +83,7 @@ export default defineConfig({
 
 例如，当使用 [Emotion](https://emotion.sh/)，你可以设置 `importSource` 为 `'@emotion/react'`:
 
-```ts title="rslib.config.ts" {13-15}
+```ts title="rslib.config.ts"
 import { pluginReact } from '@rsbuild/plugin-react';
 import { defineConfig } from '@rslib/core';
 
@@ -96,9 +96,9 @@ export default defineConfig({
   },
   plugins: [
     pluginReact({
-      swcReactOptions: {
-        importSource: '@emotion/react',
-      },
+      swcReactOptions: { // [!code highlight]
+        importSource: '@emotion/react', // [!code highlight]
+      }, // [!code highlight]
     }),
   ],
 });