chore: update

Author: SoonIter

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

@@ -243,19 +243,19 @@ If you want JSON / YAML / TOML files to be output to the distribution directory
 
 For example, the following configuration will output all JSON files in the `src` directory as-is:
 
-```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/en/guide/advanced/module-federation.mdx

@@ -30,7 +30,7 @@ import { PackageManagerTabs } from '@theme';
 
 Then register the plugin in the `rslib.config.ts` file:
 
-```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';
@@ -118,31 +118,31 @@ with Hot Module Replacement (HMR).
 Set up the host app to consume the Rslib Module Federation library. Check out the [@module-federation/rsbuild-plugin
 ](https://www.npmjs.com/package/@module-federation/rsbuild-plugin) for more information.
 
-```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,
-        },
-      },
-      // Enable this when the output of Rslib is build under 'production' mode, while the host app is 'development'.
-      // Reference: 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]
+      // Enable this when the output of Rslib is build under 'production' mode, while the host app is 'development'. // [!code highlight]
+      // Reference: https://lib.rsbuild.dev/guide/advanced/module-federation#faqs // [!code highlight]
+      shareStrategy: 'loaded-first', // [!code highlight]
+    }), // [!code highlight]
   ],
 });
 ```
@@ -182,7 +182,7 @@ First, set up Storybook with the Rslib project. You can refer to the [Storybook
 
 2. Then set up the Storybook configuration file `.storybook/main.ts`, specify the stories and addons, and set the framework with corresponding framework integration.
 
-   ```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';
 
@@ -200,7 +200,7 @@ First, set up Storybook with the Rslib project. You can refer to the [Storybook
        options: {},
      },
      addons: [
-       {
+       { // [!code highlight:20]
          name: getAbsolutePath('storybook-addon-rslib'),
          options: {
            rslib: {
@@ -231,10 +231,10 @@ First, set up Storybook with the Rslib project. You can refer to the [Storybook
 
 Import components from remote module.
 
-```ts title="stories/index.stories.tsx" {2-3}
+```ts title="stories/index.stories.tsx"
 import React from 'react';
-// Load your remote module here, Storybook will act as the host app.
-import { Counter } from 'rslib-module';
+// Load your remote module here, Storybook will act as the host app. // [!code highlight]
+import { Counter } from 'rslib-module'; // [!code highlight]
 
 const Component = () => <Counter />;
 

website/docs/en/guide/advanced/output-compatibility.mdx

@@ -35,8 +35,8 @@ And install [core-js-pure](https://www.npmjs.com/package/core-js-pure) as the ru
 
 Configure the Babel plugin with polyfill options, set the [targets](https://babeljs.io/docs/options#targets) field to specify the target browser version.
 
-```ts title="rslib.config.ts" {1,11-24}
-import { pluginBabel } from '@rsbuild/plugin-babel';
+```ts title="rslib.config.ts"
+import { pluginBabel } from '@rsbuild/plugin-babel'; // [!code highlight]
 import { defineConfig } from '@rslib/core';
 
 export default defineConfig({
@@ -46,20 +46,20 @@ export default defineConfig({
     },
   ],
   plugins: [
-    pluginBabel({
-      babelLoaderOptions: {
-        plugins: [
-          [
-            require('babel-plugin-polyfill-corejs3'),
-            {
-              method: 'usage-pure',
-              targets: { ie: '10' },
-              version: '3.29',
-            },
-          ],
-        ],
-      },
-    }),
+    pluginBabel({ // [!code highlight]
+      babelLoaderOptions: { // [!code highlight]
+        plugins: [ // [!code highlight]
+          [ // [!code highlight]
+            require('babel-plugin-polyfill-corejs3'), // [!code highlight]
+            { // [!code highlight]
+              method: 'usage-pure', // [!code highlight]
+              targets: { ie: '10' }, // [!code highlight]
+              version: '3.29', // [!code highlight]
+            }, // [!code highlight]
+          ], // [!code highlight]
+        ], // [!code highlight]
+      }, // [!code highlight]
+    }), // [!code highlight]
   ],
 });
 ```

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

@@ -97,18 +97,18 @@ The following Rslib config is an example to build a UMD library.
 - `output.externals.react: 'React'`: specify the external dependency `react` could be accessed by `window.React`.
 - `runtime: 'classic'`: use the classic runtime of React to support applications that using React version under 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',
@@ -122,7 +122,7 @@ export default defineConfig({
   plugins: [
     pluginReact({
       swcReactOptions: {
-        runtime: 'classic',
+        runtime: 'classic', // [!code highlight]
       },
     }),
   ],

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

@@ -27,18 +27,18 @@ To compile React (JSX and TSX), you need to register the Rsbuild [React Plugin](
 
 For example, register in `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 @@ By default, Rsbuild uses the new JSX transform, which is `runtime: 'automatic'`.
 
 To change the JSX transform, you can pass the [swcReactOptions](https://rsbuild.dev/plugins/list/plugin-react#swcreactoptionsruntime) option to the React plugin. For example, to use the 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 @@ When `runtime` is set to `'automatic'`, you can specify the import path of the J
 
 For example, when using [Emotion](https://emotion.sh/), you can set `importSource` to `'@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]
     }),
   ],
 });