diff --git a/website/docs/en/config/dev/asset-prefix.mdx b/website/docs/en/config/dev/asset-prefix.mdx
index 468827f99b..41ab2abd9a 100644
--- a/website/docs/en/config/dev/asset-prefix.mdx
+++ b/website/docs/en/config/dev/asset-prefix.mdx
@@ -17,7 +17,7 @@ When `server.base` is `/foo`, `index.html` and other static assets can be access
 
 It should be noted that when customizing the `dev.assetPrefix` option, if you want static assets to be normally accessible through the Rsbuild dev server, `dev.assetPrefix` should contain the same URL prefix as `server.base`. For example:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     assetPrefix: '/foo/bar/',
diff --git a/website/docs/en/config/dev/hmr.mdx b/website/docs/en/config/dev/hmr.mdx
index bcb2ff6683..57509848fb 100644
--- a/website/docs/en/config/dev/hmr.mdx
+++ b/website/docs/en/config/dev/hmr.mdx
@@ -13,7 +13,7 @@ Refer to [Hot Module Replacement](/guide/advanced/hmr) for more information.
 
 When `dev.hmr` is set to `false`, HMR and react-refresh will be disabled and Rsbuild will automatically fall back to [dev.liveReload](/config/dev/live-reload).
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     hmr: false,
diff --git a/website/docs/en/config/dev/live-reload.mdx b/website/docs/en/config/dev/live-reload.mdx
index 870640ceaa..3693bd8147 100644
--- a/website/docs/en/config/dev/live-reload.mdx
+++ b/website/docs/en/config/dev/live-reload.mdx
@@ -13,7 +13,7 @@ Please refer to [Hot Module Replacement](/guide/advanced/hmr) for more informati
 
 To disable live reload, set both `dev.hmr` and `dev.liveReload` to `false`. Then, no WebSocket requests will be made to the dev server on the page, and the page will not automatically refresh when files change.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     hmr: false,
diff --git a/website/docs/en/config/dev/watch-files.mdx b/website/docs/en/config/dev/watch-files.mdx
index f92935a2df..572cc3ab4b 100644
--- a/website/docs/en/config/dev/watch-files.mdx
+++ b/website/docs/en/config/dev/watch-files.mdx
@@ -26,7 +26,7 @@ Paths of the files or directories to watch, supports glob syntax. It can be a si
 
 - Watching a single file:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     watchFiles: {
@@ -38,7 +38,7 @@ export default {
 
 - Using glob to match multiple files:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     watchFiles: {
@@ -50,7 +50,7 @@ export default {
 
 - Watching multiple file paths:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     watchFiles: {
@@ -73,7 +73,7 @@ Specifies whether to trigger a page reload or restart the dev server when a file
 
 This can be used to watch changes to static assets, such as files in the `public` directory.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     watchFiles: {
@@ -115,7 +115,7 @@ Note that the reload-server functionality is provided by Rsbuild CLI. If you are
 
 `watchFiles` is implemented based on [chokidar v4](https://github.com/paulmillr/chokidar#api), and you can pass chokidar options through `options`.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     watchFiles: {
diff --git a/website/docs/en/config/dev/write-to-disk.mdx b/website/docs/en/config/dev/write-to-disk.mdx
index 9027d9f75e..4a8c425ab0 100644
--- a/website/docs/en/config/dev/write-to-disk.mdx
+++ b/website/docs/en/config/dev/write-to-disk.mdx
@@ -15,7 +15,7 @@ You can choose to write the build output to disk, which is usually used for insp
 
 Simply set the `dev.writeToDisk` option to `true`:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     writeToDisk: true,
@@ -33,7 +33,7 @@ You can also set `dev.writeToDisk` to a function to match only certain files. Wh
 
 For example, to write files to disk while excluding hot-update temporary files:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     writeToDisk: (file) => !file.includes('.hot-update.'),
diff --git a/website/docs/en/config/environments.mdx b/website/docs/en/config/environments.mdx
index eaba8c92c7..0708df545c 100644
--- a/website/docs/en/config/environments.mdx
+++ b/website/docs/en/config/environments.mdx
@@ -135,7 +135,7 @@ const nodeConfig = {
 
 Since environment names are used in directory names and object property names, we recommend using only letters, numbers, `-`, `_`, and `$`. When other characters are used, Rsbuild will show a warning.
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   environments: {
     someName: {}, // ✅
diff --git a/website/docs/en/config/html/app-icon.mdx b/website/docs/en/config/html/app-icon.mdx
index 3195803ca3..13bd7aa74c 100644
--- a/website/docs/en/config/html/app-icon.mdx
+++ b/website/docs/en/config/html/app-icon.mdx
@@ -39,7 +39,7 @@ For display on different devices, you will need to prepare several icons of diff
 
 The most commonly used icon sizes are `192x192` and `512x512`, and you can customize the icon sizes and quantities to suit your needs.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     appIcon: {
@@ -131,7 +131,7 @@ export default {
 
 Use `target` to specify the target for the icon:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     appIcon: {
@@ -165,7 +165,7 @@ export default {
 
 The filename of the manifest file.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     appIcon: {
diff --git a/website/docs/en/config/html/crossorigin.mdx b/website/docs/en/config/html/crossorigin.mdx
index c583f077df..77cb4fe086 100644
--- a/website/docs/en/config/html/crossorigin.mdx
+++ b/website/docs/en/config/html/crossorigin.mdx
@@ -10,7 +10,7 @@ Set the [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attribut
 
 ## Example
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     crossorigin: 'anonymous',
diff --git a/website/docs/en/config/html/favicon.mdx b/website/docs/en/config/html/favicon.mdx
index be4cc61aff..ebdbaba5e1 100644
--- a/website/docs/en/config/html/favicon.mdx
+++ b/website/docs/en/config/html/favicon.mdx
@@ -19,7 +19,7 @@ Rsbuild also provides [html.appIcon](/config/html/app-icon) to set the icon of t
 
 Set as a relative path:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     favicon: './src/assets/icon.png',
@@ -92,7 +92,7 @@ When `html.favicon` is of type Function, the function receives an object as inpu
 
 In the context of MPA (Multi-Page Application), you can return different `favicon` based on the entry name, thus generating different tags for each page:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     favicon({ entryName }) {
diff --git a/website/docs/en/config/html/inject.mdx b/website/docs/en/config/html/inject.mdx
index 6a61ceac5a..513a534e08 100644
--- a/website/docs/en/config/html/inject.mdx
+++ b/website/docs/en/config/html/inject.mdx
@@ -34,7 +34,7 @@ The `<script>` tag is inside the head tag by default:
 
 Add the following config to inject `<script>` into the `<body>` tag:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     inject: 'body',
@@ -73,7 +73,7 @@ When `html.inject` is of type Function, the function receives an object as its p
 
 In the context of MPA (Multi-Page Application), you can set different `inject` behaviors based on the entry name:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     inject({ entryName }) {
diff --git a/website/docs/en/config/html/meta.mdx b/website/docs/en/config/html/meta.mdx
index 86e12873ae..614dbef5d6 100644
--- a/website/docs/en/config/html/meta.mdx
+++ b/website/docs/en/config/html/meta.mdx
@@ -34,7 +34,7 @@ When the `value` of a `meta` object is a string, the `key` of the object is auto
 
 To set a description, for example:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     meta: {
@@ -71,7 +71,7 @@ In this case, the `name` and `content` properties will not be set by default.
 
 To set `charset`, for example:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     meta: {
@@ -109,7 +109,7 @@ You can directly modify the configuration object and not return anything, or you
 
 For example, you can directly modify the built-in `meta` configuration object:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     meta({ value }) {
@@ -122,7 +122,7 @@ export default {
 
 In the MPA (Multi-Page Application) scenario, you can return different `meta` configurations based on the entry name, thus generating different `meta` tags for each page:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     meta({ entryName }) {
@@ -151,7 +151,7 @@ Setting the `value` of the `meta` object to `false` means the meta tag will not
 
 To remove the `viewport`, for example:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     meta: {
diff --git a/website/docs/en/config/html/mount-id.mdx b/website/docs/en/config/html/mount-id.mdx
index 8a71e3326a..f6c32678eb 100644
--- a/website/docs/en/config/html/mount-id.mdx
+++ b/website/docs/en/config/html/mount-id.mdx
@@ -15,7 +15,7 @@ By default, the `root` element is included in the HTML template for component mo
 
 Set the `id` to `app`:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     mountId: 'app',
diff --git a/website/docs/en/config/html/output-structure.mdx b/website/docs/en/config/html/output-structure.mdx
index d1f6cd0b8d..19e8fcd1c9 100644
--- a/website/docs/en/config/html/output-structure.mdx
+++ b/website/docs/en/config/html/output-structure.mdx
@@ -16,7 +16,7 @@ By default, the structure of HTML files in the `dist` directory is `flat`:
 
 You can set `html.outputStructure` to `nested`:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     outputStructure: 'nested',
diff --git a/website/docs/en/config/html/tags.mdx b/website/docs/en/config/html/tags.mdx
index 79282010ca..76dc58802f 100644
--- a/website/docs/en/config/html/tags.mdx
+++ b/website/docs/en/config/html/tags.mdx
@@ -351,7 +351,7 @@ type HtmlTagHandler = (
 
 The callback function accepts a tag list as an argument and needs to modify or return a new tag array directly.
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     tags: [
diff --git a/website/docs/en/config/html/template-parameters.mdx b/website/docs/en/config/html/template-parameters.mdx
index 85f40b2d6f..2a098ad099 100644
--- a/website/docs/en/config/html/template-parameters.mdx
+++ b/website/docs/en/config/html/template-parameters.mdx
@@ -34,7 +34,7 @@ If the value of `templateParameters` is an object, it will be merged with the de
 
 For example, if you need to use the `foo` parameter in an HTML template, you can add the following settings:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     templateParameters: {
@@ -78,7 +78,7 @@ When `html.templateParameters` is of type Function, the function receives two pa
 
 In the context of a multi-page application (MPA), you can set different `templateParameters` based on the entry name:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     templateParameters(defaultValue, { entryName }) {
diff --git a/website/docs/en/config/html/template.mdx b/website/docs/en/config/html/template.mdx
index 72799af3db..1c392e91bf 100644
--- a/website/docs/en/config/html/template.mdx
+++ b/website/docs/en/config/html/template.mdx
@@ -20,7 +20,7 @@ If `template` is not specified, the built-in HTML template of Rsbuild will be us
 
 For example, to replace the default HTML template with the `static/index.html` file, you can add the following configuration:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     template: './static/index.html',
@@ -43,7 +43,7 @@ When `html.template` is of type Function, the function receives an object as an
 
 In the MPA (multi-page application) scenario, you can return different `template` paths based on the entry name, thus setting different templates for each page:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     template({ entryName }) {
diff --git a/website/docs/en/config/html/title.mdx b/website/docs/en/config/html/title.mdx
index ce7b4c4dec..39c20ed5f0 100644
--- a/website/docs/en/config/html/title.mdx
+++ b/website/docs/en/config/html/title.mdx
@@ -13,7 +13,7 @@ If the HTML template used in the current project already includes the `<title>`
 
 `html.title` can be directly set as a string:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     title: 'Example',
@@ -42,7 +42,7 @@ When `html.title` is of type Function, the function receives an object as the ar
 
 In the MPA (multi-page application) scenario, you can return different `title` strings based on the entry name, thus generating different `title` tags for each page:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     title({ entryName }) {
@@ -60,7 +60,7 @@ export default {
 
 When `html.title` is set to an empty string, Rsbuild will not inject the `<title>` tag:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     title: '',
diff --git a/website/docs/en/config/output/asset-prefix.mdx b/website/docs/en/config/output/asset-prefix.mdx
index a4634868e5..88eef5c49c 100644
--- a/website/docs/en/config/output/asset-prefix.mdx
+++ b/website/docs/en/config/output/asset-prefix.mdx
@@ -56,7 +56,7 @@ When `server.base` is `/foo`, `index.html` and static assets can be accessed thr
 
 It should be noted that when customizing the `output.assetPrefix` option, if you want static assets to be accessible normally during [Rsbuild preview](/guide/basic/cli#rsbuild-preview), `output.assetPrefix` should contain the same URL prefix as `server.base`. For example:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     assetPrefix: '/foo/bar/',
diff --git a/website/docs/en/config/output/copy.mdx b/website/docs/en/config/output/copy.mdx
index 5664eb1046..95396b7233 100644
--- a/website/docs/en/config/output/copy.mdx
+++ b/website/docs/en/config/output/copy.mdx
@@ -11,7 +11,7 @@ Copies the specified file or directory to the dist directory, implemented based
 
 Copy files from `./src/assets` to the `./dist` directory:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     copy: [
@@ -24,7 +24,7 @@ export default {
 
 Copy files from `./src/assets` to the `./dist/assets` directory:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     copy: [
@@ -37,7 +37,7 @@ export default {
 
 When copying files from the public directory to the dist directory during a production build, the `public/someDir` directory will be ignored:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     copy: [{ from: './public', globOptions: { ignore: ['**/someDir/**'] } }],
diff --git a/website/docs/en/config/output/data-uri-limit.mdx b/website/docs/en/config/output/data-uri-limit.mdx
index f2ac8eb3b6..60bb55f0ad 100644
--- a/website/docs/en/config/output/data-uri-limit.mdx
+++ b/website/docs/en/config/output/data-uri-limit.mdx
@@ -46,7 +46,7 @@ Details:
 
 - Inline all static assets less than 10KiB:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     dataUriLimit: 10 * 1024,
@@ -56,7 +56,7 @@ export default {
 
 - Disable inlining of static assets:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     dataUriLimit: 0,
@@ -66,7 +66,7 @@ export default {
 
 - Inline all static assets:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     dataUriLimit: Number.MAX_SAFE_INTEGER,
@@ -76,7 +76,7 @@ export default {
 
 - Set the threshold for image assets to 5KiB and do not inline video assets:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     dataUriLimit: {
diff --git a/website/docs/en/config/output/emit-assets.mdx b/website/docs/en/config/output/emit-assets.mdx
index 664f55388c..6806758676 100644
--- a/website/docs/en/config/output/emit-assets.mdx
+++ b/website/docs/en/config/output/emit-assets.mdx
@@ -11,7 +11,7 @@ In scenarios such as SSR, you may not need to emit duplicate static assets. You
 
 The following example will emit static assets when building web bundles, and avoid emitting when building node bundles.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   environments: {
     web: {
diff --git a/website/docs/en/config/output/emit-css.mdx b/website/docs/en/config/output/emit-css.mdx
index bc7d1455ff..2f018803e2 100644
--- a/website/docs/en/config/output/emit-css.mdx
+++ b/website/docs/en/config/output/emit-css.mdx
@@ -17,7 +17,7 @@ When `output.emitCss` is `false`, the class name information of CSS Modules will
 
 When building Node.js bundles, set `output.emitCss` to `true` to output CSS files:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     target: 'node',
diff --git a/website/docs/en/config/output/filename-hash.mdx b/website/docs/en/config/output/filename-hash.mdx
index ade0f9dddf..88c5fd525a 100644
--- a/website/docs/en/config/output/filename-hash.mdx
+++ b/website/docs/en/config/output/filename-hash.mdx
@@ -16,7 +16,7 @@ dist/static/js/index.18a568e5.js
 
 You can set `output.filenameHash` to `false` to disable this behavior:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     filenameHash: false,
@@ -37,7 +37,7 @@ The default hash format is `contenthash:8`, which generates an 8-bit hash based
 
 You can set `output.filenameHash` to other formats supported by Rspack and customize the length.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     filenameHash: 'fullhash:16',
diff --git a/website/docs/en/config/output/inject-styles.mdx b/website/docs/en/config/output/inject-styles.mdx
index fc8a971f2c..5a0ed51e0d 100644
--- a/website/docs/en/config/output/inject-styles.mdx
+++ b/website/docs/en/config/output/inject-styles.mdx
@@ -9,7 +9,7 @@ By default, Rsbuild will extract CSS into a separate `.css` file and output it t
 
 ### Example
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     injectStyles: true,
@@ -29,7 +29,7 @@ For production builds, we recommend using Rsbuild's default behavior, which extr
 
 For example:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     injectStyles: process.env.NODE_ENV === 'development',
diff --git a/website/docs/en/config/output/inline-scripts.mdx b/website/docs/en/config/output/inline-scripts.mdx
index dcdac2eba7..2cab61600a 100644
--- a/website/docs/en/config/output/inline-scripts.mdx
+++ b/website/docs/en/config/output/inline-scripts.mdx
@@ -34,7 +34,7 @@ dist/static/js/main.js
 
 After turning on the `output.inlineScripts` option:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineScripts: true,
@@ -71,7 +71,7 @@ When using `output.inlineScripts`, we recommend setting [html.inject](/config/ht
 
 As the default injection position of the script tag is the `<head>` tag, changing the injection position to the `<body>` tag can ensure that the inlined script can access the DOM elements in `<body>`.
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     inject: 'body', // [!code highlight]
@@ -88,7 +88,7 @@ To inline part of the JS files, set `inlineScripts` to a regular expression that
 
 For example, to inline `main.js` into HTML, add the following configuration:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineScripts: /[\\/]main\.\w+\.js$/,
@@ -109,7 +109,7 @@ You can also set `output.inlineScripts` to a function that accepts the following
 
 For example, if we want to inline assets that are smaller than 10 kB, we can add the following configuration:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineScripts({ size }) {
@@ -125,7 +125,7 @@ When you use [dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaS
 
 To inline async chunks into the HTML, change Rspack's default behavior using the [tools.rspack](/config/tools/rspack) config by setting [module.parser.javascript.dynamicImportMode](https://rspack.rs/config/module#moduleparserjavascriptdynamicimportmode) to `'eager'`. In this case, Rspack will not generate separate JS files for dynamic imports.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineScripts: true,
@@ -153,7 +153,7 @@ export default {
 
 Whether to enable the inline scripts feature. If set to `'auto'`, it will be enabled when the `mode` is `'production'`.
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineScripts: {
@@ -170,7 +170,7 @@ export default {
 
 The regular expression or function to match the files that need to be inlined.
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineScripts: {
diff --git a/website/docs/en/config/output/inline-styles.mdx b/website/docs/en/config/output/inline-styles.mdx
index 065c19f982..7baa242814 100644
--- a/website/docs/en/config/output/inline-styles.mdx
+++ b/website/docs/en/config/output/inline-styles.mdx
@@ -34,7 +34,7 @@ dist/static/js/main.js
 
 After enabling the `output.inlineStyles` option:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineStyles: true,
@@ -72,7 +72,7 @@ To inline part of the CSS files, set `inlineStyles` to a regular expression that
 
 For example, to inline `main.css` into HTML, add the following configuration:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineStyles: /[\\/]main\.\w+\.css$/,
@@ -93,7 +93,7 @@ Set `output.inlineStyles` to a function that accepts the following parameters:
 
 To inline assets smaller than 10 kB, add the following configuration:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineStyles({ size }) {
@@ -112,7 +112,7 @@ export default {
 
 Whether to enable the inline styles feature. If set to `'auto'`, it will be enabled when the `mode` is `'production'`.
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineStyles: {
@@ -129,7 +129,7 @@ export default {
 
 The regular expression or function to match the CSS files that need to be inlined.
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineStyles: {
diff --git a/website/docs/en/config/output/source-map.mdx b/website/docs/en/config/output/source-map.mdx
index 91334d4253..9154b37e3c 100644
--- a/website/docs/en/config/output/source-map.mdx
+++ b/website/docs/en/config/output/source-map.mdx
@@ -37,7 +37,7 @@ Rsbuild generates source maps using these rules by default:
 
 If `output.sourceMap` is `true`, source maps are generated according to the [mode](/config/mode), equivalent to:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     sourceMap: {
@@ -50,7 +50,7 @@ export default {
 
 If `output.sourceMap` is `false`, no source map will be generated, equivalent to:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     sourceMap: {
@@ -67,7 +67,7 @@ The source map for JS files is controlled by `sourceMap.js` and accepts any sour
 
 For example, to generate high-quality source maps in all environments:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     sourceMap: {
@@ -79,7 +79,7 @@ export default {
 
 You can also set different source map formats based on the environment.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     sourceMap: {
@@ -104,7 +104,7 @@ The source map for CSS files is controlled by `sourceMap.css`. Setting it to `tr
 
 To generate a source map for CSS files:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     sourceMap: {
@@ -118,7 +118,7 @@ In production builds, it is not recommended to enable both [output.injectStyles]
 
 You can only enable the CSS file source map in development mode:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     injectStyles: true,
diff --git a/website/docs/en/config/output/target.mdx b/website/docs/en/config/output/target.mdx
index f6e9420f62..d91a577b16 100644
--- a/website/docs/en/config/output/target.mdx
+++ b/website/docs/en/config/output/target.mdx
@@ -28,7 +28,7 @@ In addition to `'web'`, `target` can also be set to the following values:
 
 For example, to build for the Node.js environment:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     target: 'node',
@@ -42,7 +42,7 @@ You can use [environments](/config/environments) to build multiple targets in pa
 
 To build `web` and `node` outputs simultaneously, use [environments](/config/environments):
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   environments: {
     web: {
@@ -114,7 +114,7 @@ Rsbuild currently does not support these targets. You can configure these target
 
 For example, setting the `target` to `'electron-main'` will override the default `'web'` set by Rsbuild.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     rspack: {
diff --git a/website/docs/en/config/performance/chunk-split.mdx b/website/docs/en/config/performance/chunk-split.mdx
index 5f1de03a55..12be7d11cb 100644
--- a/website/docs/en/config/performance/chunk-split.mdx
+++ b/website/docs/en/config/performance/chunk-split.mdx
@@ -55,7 +55,7 @@ type ChunkSplit = BaseChunkSplit | SplitBySize | SplitCustom;
 
 By default, Rsbuild uses the `split-by-experience` strategy. To use other chunk splitting strategies, specify them through the `strategy` option, for example:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     chunkSplit: {
@@ -72,7 +72,7 @@ export default {
 
 When `chunkSplit.strategy` is `split-by-size`, you can specify the minimum size of a chunk via `chunkSplit.minSize`. The unit is bytes, and the default value is `10000`. For example:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     chunkSplit: {
@@ -90,7 +90,7 @@ export default {
 
 When `chunkSplit.strategy` is `split-by-size`, you can specify the maximum size of a chunk via `chunkSplit.maxSize`. The unit is bytes, and the default value is `Number.POSITIVE_INFINITY`. For example:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     chunkSplit: {
@@ -110,7 +110,7 @@ Via `chunkSplit.forceSplitting`, you can specify npm packages that should be for
 
 For example, split the `axios` library under node_modules into `axios.js`:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     chunkSplit: {
@@ -132,7 +132,7 @@ Chunks split using the `forceSplitting` configuration will be inserted into the
 
 When `chunkSplit.strategy` is `custom`, you can specify a custom Rspack chunk splitting configuration via `chunkSplit.splitChunks`. This configuration will be merged with the Rspack splitChunks config (the `cacheGroups` config will also be merged). For example:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     chunkSplit: {
@@ -155,7 +155,7 @@ export default {
 
 When `chunkSplit.strategy` is `split-by-experience`, `split-by-module`, `split-by-size`, or `single-vendor`, you can specify a custom Rspack chunk splitting configuration via `chunkSplit.override`. This configuration will be merged with the Rspack splitChunks config (the `cacheGroups` config will also be merged). For example:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     chunkSplit: {
@@ -179,7 +179,7 @@ export default {
 
 Typically, Node bundles do not need to be split to optimize loading performance. If you need to split Node bundles, you can use the [tools.rspack](/config/tools/rspack) configuration to set Rspack's [optimization.splitChunks](https://rspack.rs/plugins/webpack/split-chunks-plugin#optimizationsplitchunks) option:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     rspack: {
diff --git a/website/docs/en/config/performance/dns-prefetch.mdx b/website/docs/en/config/performance/dns-prefetch.mdx
index 9275831e18..11ffed9e1b 100644
--- a/website/docs/en/config/performance/dns-prefetch.mdx
+++ b/website/docs/en/config/performance/dns-prefetch.mdx
@@ -15,7 +15,7 @@ For more information, see [Using dns-prefetch](https://developer.mozilla.org/en-
 
 ## Example
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     dnsPrefetch: ['https://example.com'],
diff --git a/website/docs/en/config/performance/preconnect.mdx b/website/docs/en/config/performance/preconnect.mdx
index 46abcc5b93..4822be79cc 100644
--- a/website/docs/en/config/performance/preconnect.mdx
+++ b/website/docs/en/config/performance/preconnect.mdx
@@ -30,7 +30,7 @@ If a page needs to make connections to many third-party domains, preconnecting t
 
 ## Example
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     preconnect: ['https://example.com/'],
@@ -53,7 +53,7 @@ The generated HTML tag is:
 
 Specify the URL to preconnect to.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     // Equivalent to `preconnect: ['https://example.com/'],`
@@ -73,7 +73,7 @@ export default {
 
 Specify whether to add the `crossorigin` attribute.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     preconnect: [
diff --git a/website/docs/en/config/performance/print-file-size.mdx b/website/docs/en/config/performance/print-file-size.mdx
index 327f1d444a..9e0d097833 100644
--- a/website/docs/en/config/performance/print-file-size.mdx
+++ b/website/docs/en/config/performance/print-file-size.mdx
@@ -36,7 +36,7 @@ The default output log is as follows:
 
 If you do not want to print any information, you can disable it by setting `printFileSize` to `false`:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: false,
@@ -70,7 +70,7 @@ Whether to output the total size of all static assets, or provide a function to
 
 When set to `false`, the total size will not be output:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: {
@@ -86,7 +86,7 @@ If the current build only generates one static asset, the total size will not be
 
 When set to a function, you can customize the total size output format:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: {
@@ -115,7 +115,7 @@ Whether to output the size of each static asset.
 
 If you do not need to view the size of each static asset, you can set `detail` to false. In this case, only the total size will be output:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: {
@@ -134,7 +134,7 @@ Whether to output the gzip-compressed size of each static asset.
 
 If you do not need to view the gzipped size, you can set `compressed` to false. This can save some gzip computation time for large projects:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: {
@@ -178,7 +178,7 @@ If returned `false`, the static asset will be excluded and not included in the t
 
 For example, only output static assets larger than 10 kB:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: {
@@ -190,7 +190,7 @@ export default {
 
 Or only output `.js` files larger than 10 kB:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: {
@@ -216,7 +216,7 @@ Rsbuild defaults to excluding source map, license files, and `.d.ts` type files,
 
 For example, exclude `.html` files in addition to the default:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: {
diff --git a/website/docs/en/config/performance/profile.mdx b/website/docs/en/config/performance/profile.mdx
index 5eeba697b0..af04239779 100644
--- a/website/docs/en/config/performance/profile.mdx
+++ b/website/docs/en/config/performance/profile.mdx
@@ -12,7 +12,7 @@ When enabled:
 
 ## Example
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     profile: true,
diff --git a/website/docs/en/config/performance/remove-console.mdx b/website/docs/en/config/performance/remove-console.mdx
index 78db503be8..f8e01b7396 100644
--- a/website/docs/en/config/performance/remove-console.mdx
+++ b/website/docs/en/config/performance/remove-console.mdx
@@ -9,7 +9,7 @@ Whether to remove `console.[methodName]` in production build.
 
 When `removeConsole` is set to `true`, all types of `console.[methodName]` are removed:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     removeConsole: true,
@@ -21,7 +21,7 @@ export default {
 
 You can also specify to remove only certain types of `console.[methodName]`, such as `console.log` and `console.warn`:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     removeConsole: ['log', 'warn'],
diff --git a/website/docs/en/config/performance/remove-moment-locale.mdx b/website/docs/en/config/performance/remove-moment-locale.mdx
index 96819e6836..1bbc67e175 100644
--- a/website/docs/en/config/performance/remove-moment-locale.mdx
+++ b/website/docs/en/config/performance/remove-moment-locale.mdx
@@ -9,7 +9,7 @@ Whether to remove the locales of [moment.js](https://momentjs.com/).
 
 When `moment.js` is used in the project, it is recommended to enable this option to automatically exclude all locales:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     removeMomentLocale: true,
diff --git a/website/docs/en/config/resolve/alias-strategy.mdx b/website/docs/en/config/resolve/alias-strategy.mdx
index 03c734342c..4a77cb1a46 100644
--- a/website/docs/en/config/resolve/alias-strategy.mdx
+++ b/website/docs/en/config/resolve/alias-strategy.mdx
@@ -30,7 +30,7 @@ For example, if the following configurations are set at the same time:
 
 - `resolve.alias`:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   resolve: {
     alias: {
@@ -50,7 +50,7 @@ Since the tsconfig paths have a higher priority, the following will happen:
 
 If the value of `resolve.aliasStrategy` is set to `prefer-alias`, the `paths` option in `tsconfig.json` will only be used to provide TypeScript type definitions and will not affect the bundling result. In this case, the bundler will only read the `alias` option as the path alias.
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   resolve: {
     aliasStrategy: 'prefer-alias',
@@ -75,7 +75,7 @@ For example, if the following configurations are set at the same time:
 
 - `resolve.alias`:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   resolve: {
     alias: {
@@ -89,7 +89,7 @@ Since the tsconfig paths are only used to provide types, only the `@common` alia
 
 In most cases, you do not need to use `prefer-alias`, but you can consider using it if you need to dynamically generate some alias configurations. For example, generating the `alias` option based on environment variables:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   resolve: {
     alias: {
diff --git a/website/docs/en/config/security/nonce.mdx b/website/docs/en/config/security/nonce.mdx
index b70a03ea5f..93889dbb0b 100644
--- a/website/docs/en/config/security/nonce.mdx
+++ b/website/docs/en/config/security/nonce.mdx
@@ -25,7 +25,7 @@ For more information about nonce, you can refer to:
 
 By default, `nonce` is not enabled by Rsbuild, you can define this value based on your needs:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   security: {
     nonce: 'CSP_NONCE_PLACEHOLDER',
diff --git a/website/docs/en/config/security/sri.mdx b/website/docs/en/config/security/sri.mdx
index ca913bb328..da475360e2 100644
--- a/website/docs/en/config/security/sri.mdx
+++ b/website/docs/en/config/security/sri.mdx
@@ -27,7 +27,7 @@ For more on subresource integrity, see [Subresource Integrity - MDN](https://dev
 
 When using SRI, you need to enable [html.crossorigin](/config/html/crossorigin), which ensures that resources can be properly validated with SRI during cross-origin loading.
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   security: {
     sri: {
@@ -84,7 +84,7 @@ Rsbuild will handle the following `<link>` tags:
 
 Whether to enable SRI. `'auto'` means it is enabled in production mode and disabled in development mode.
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   security: {
     sri: {
@@ -105,7 +105,7 @@ Specifies the algorithm used to compute the integrity hash.
 
 For example, set to `sha512`:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   security: {
     sri: {
diff --git a/website/docs/en/config/server/base.mdx b/website/docs/en/config/server/base.mdx
index 48a33ba4f2..8ff4cabf8f 100644
--- a/website/docs/en/config/server/base.mdx
+++ b/website/docs/en/config/server/base.mdx
@@ -12,7 +12,7 @@ By default, the Rsbuild server's base path is `/`. You can access output files l
 
 If you want to access `index.html` through `http://localhost:3000/foo/`, you can change `server.base` to `/foo`.
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     base: '/foo',
@@ -34,7 +34,7 @@ Then, `index.html` and static assets can be accessed through `http://localhost:3
 
 If you do not want to use this default behavior, you can override it by explicitly setting `dev.assetPrefix` / `output.assetPrefix` :
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     assetPrefix: '/',
diff --git a/website/docs/en/config/server/host.mdx b/website/docs/en/config/server/host.mdx
index 1f025f1bed..733811a0a3 100644
--- a/website/docs/en/config/server/host.mdx
+++ b/website/docs/en/config/server/host.mdx
@@ -11,7 +11,7 @@ You can use `server.host` or the `--host` CLI param to set the host (The priorit
 
 If you want the Rsbuild server to listen only on `localhost`, you can set it to:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     host: 'localhost',
@@ -23,7 +23,7 @@ export default {
 
 If you want the Rsbuild server to listen all IPv6 network interfaces, you can set it to:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     host: '::',
@@ -33,7 +33,7 @@ export default {
 
 If you want the Rsbuild server to listen a specified IPv6 host, you can set it to:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     host: '::1',
diff --git a/website/docs/en/config/server/port.mdx b/website/docs/en/config/server/port.mdx
index cbd037dc72..fa9a4b0e6c 100644
--- a/website/docs/en/config/server/port.mdx
+++ b/website/docs/en/config/server/port.mdx
@@ -17,7 +17,7 @@ npx rsbuild dev --port 8080
 
 Set the port to `8080`:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     port: 8080,
@@ -27,7 +27,7 @@ export default {
 
 Set different port numbers for development and preview servers:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     port: process.env.NODE_ENV === 'development' ? 3000 : 8080,
diff --git a/website/docs/en/config/server/proxy.mdx b/website/docs/en/config/server/proxy.mdx
index 03a0e46bd9..4151d60c06 100644
--- a/website/docs/en/config/server/proxy.mdx
+++ b/website/docs/en/config/server/proxy.mdx
@@ -17,7 +17,7 @@ Configure proxy rules for the dev server or preview server to proxy requests to
 
 ### Basic usage
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     proxy: {
@@ -33,7 +33,7 @@ A request to `/api/users` will now proxy the request to `http://localhost:3000/a
 
 You can also proxy to an online domain name, such as:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     proxy: {
@@ -49,7 +49,7 @@ export default {
 
 If you do not want `/api` to be passed along, we need to rewrite the path:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     proxy: {
@@ -68,7 +68,7 @@ export default {
 
 To proxy WebSocket requests, set `ws` to `true`:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     proxy: {
@@ -146,7 +146,7 @@ export default {
 
 Used to proxy multiple specified paths to the same target.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     proxy: [
diff --git a/website/docs/en/config/server/public-dir.mdx b/website/docs/en/config/server/public-dir.mdx
index fb3ebdc67b..0790fc434a 100644
--- a/website/docs/en/config/server/public-dir.mdx
+++ b/website/docs/en/config/server/public-dir.mdx
@@ -36,7 +36,7 @@ The name of the public directory. The value of `name` can be set to a relative p
 
 - Relative path example:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     publicDir: {
@@ -79,7 +79,7 @@ During dev builds, if you need to copy some static assets to the output director
 
 For example, disable `copyOnBuild`:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     publicDir: {
@@ -97,7 +97,7 @@ By default, when [output.target](/config/output/target) is `'node'`, Rsbuild wil
 
 You can set `copyOnBuild` to `true` to copy files for the `node` target:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     target: 'node',
@@ -126,7 +126,7 @@ Whether to watch the public directory and reload the page when the files change.
 
 Setting `watch` to `true` allows the dev server to watch changes to files in the specified public directory and reload the page when the files are changed:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     publicDir: {
@@ -142,7 +142,7 @@ Note that the `watch` option is only valid in development mode. If [dev.hmr](/co
 
 The `server.publicDir` can be configured as an array, allowing you to serve multiple directories as static assets folders:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     publicDir: [
@@ -162,7 +162,7 @@ export default {
 
 You can set `publicDir` to `false` to disable the static assets serving:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     publicDir: false,
diff --git a/website/docs/en/config/source/define.mdx b/website/docs/en/config/source/define.mdx
index deec2c1e50..c01c5b9c47 100644
--- a/website/docs/en/config/source/define.mdx
+++ b/website/docs/en/config/source/define.mdx
@@ -16,7 +16,7 @@ Each configuration key represents an identifier or multiple identifiers joined w
 
 ## Example
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     define: {
diff --git a/website/docs/en/config/source/pre-entry.mdx b/website/docs/en/config/source/pre-entry.mdx
index dd184a2805..403efc0861 100644
--- a/website/docs/en/config/source/pre-entry.mdx
+++ b/website/docs/en/config/source/pre-entry.mdx
@@ -15,7 +15,7 @@ console.log('I am a polyfill');
 
 Then configure `src/polyfill.ts` to `source.preEntry`:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     preEntry: './src/polyfill.ts',
@@ -29,7 +29,7 @@ Re-run the compilation and visit any page. You can see that the code in `src/pol
 
 You can also configure global styles using `source.preEntry`. This CSS code will be loaded earlier than the page code, such as introducing a `normalize.css` file:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     preEntry: './src/normalize.css',
@@ -41,7 +41,7 @@ export default {
 
 You can add multiple scripts by setting `preEntry` to an array, and they will be executed in array order:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     preEntry: ['./src/polyfill-a.ts', './src/polyfill-b.ts'],
diff --git a/website/docs/en/config/source/transform-import.mdx b/website/docs/en/config/source/transform-import.mdx
index 6d20fde5e4..0114cd4496 100644
--- a/website/docs/en/config/source/transform-import.mdx
+++ b/website/docs/en/config/source/transform-import.mdx
@@ -27,7 +27,7 @@ Transform the import path to modularly import subpaths of third-party packages.
 
 When using the [antd](https://github.com/ant-design/ant-design) component library (versions below v5), you can import components on demand with this config:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     transformImport: [
@@ -58,7 +58,7 @@ import 'antd/es/button/style';
 
 When using lodash, you can automatically refer to the subpath through `transformImport` to reduce bundle size.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     transformImport: [
@@ -96,7 +96,7 @@ import lodash from 'lodash';
 
 If you want to process the code in node_modules through `transformImport`, please add the relevant modules to the [source.include](/config/source/include) config.
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     include: [/node_modules[\\/]some-package[\\/]/],
@@ -224,7 +224,7 @@ Customize the transformed path.
 
 For example, the following config will transform `import { foo } from 'my-lib'` into `import foo from 'my-lib/foo'`.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     transformImport: [
@@ -258,7 +258,7 @@ Customize the transformed style path, the usage is consistent with `customName`.
 
 The `transformImport` can be a function, it will accept the previous value, and you can modify it.
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     transformImport: (imports) => {
@@ -270,7 +270,7 @@ export default {
 
 You can also return a new value as the final result in the function, which will replace the previous value.
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     transformImport: () => {
diff --git a/website/docs/en/config/source/tsconfig-path.mdx b/website/docs/en/config/source/tsconfig-path.mdx
index 97377b715d..c223df2b7c 100644
--- a/website/docs/en/config/source/tsconfig-path.mdx
+++ b/website/docs/en/config/source/tsconfig-path.mdx
@@ -18,7 +18,7 @@ The value of `source.tsconfigPath` can be set to a relative or an absolute path.
 
 - Relative path example:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     tsconfigPath: './tsconfig.custom.json',
diff --git a/website/docs/en/config/tools/css-extract.mdx b/website/docs/en/config/tools/css-extract.mdx
index 75ae8233b2..022ae65634 100644
--- a/website/docs/en/config/tools/css-extract.mdx
+++ b/website/docs/en/config/tools/css-extract.mdx
@@ -39,7 +39,7 @@ The options for [CssExtractRspackPlugin](https://rspack.rs/plugins/rspack/css-ex
 - **Type:** `CssExtractRspackPluginOptions`
 - **Example:**
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     cssExtract: {
@@ -56,7 +56,7 @@ export default {
 - **Type:** `CssExtractRspackLoaderOptions`
 - **Example:**
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     cssExtract: {
diff --git a/website/docs/en/config/tools/css-loader.mdx b/website/docs/en/config/tools/css-loader.mdx
index d2b0b8941b..691447274f 100644
--- a/website/docs/en/config/tools/css-loader.mdx
+++ b/website/docs/en/config/tools/css-loader.mdx
@@ -19,7 +19,7 @@ To modify the options related to CSS Modules, it is recommended to use the [outp
 
 When this value is an Object, it is merged with the default config via deep merge. For example:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     cssLoader: {
@@ -35,7 +35,7 @@ export default {
 
 When the value is a Function, the default config is passed in as the first parameter. You can modify the config object directly, or return an object as the final config. For example:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     cssLoader: (config) => {
diff --git a/website/docs/en/config/tools/html-plugin.mdx b/website/docs/en/config/tools/html-plugin.mdx
index ddcbe3aeb8..aa8f8cd0e4 100644
--- a/website/docs/en/config/tools/html-plugin.mdx
+++ b/website/docs/en/config/tools/html-plugin.mdx
@@ -30,7 +30,7 @@ This is because Rsbuild provides some internal optimization processing for these
 
 When `tools.htmlPlugin` is `Object` type, the value will be merged with the default config via `Object.assign`.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     htmlPlugin: {
@@ -48,7 +48,7 @@ When `tools.htmlPlugin` is a Function:
 - The second parameter is also an object, containing the entry name and the entry value.
 - The Function can return a new object as the final config.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     htmlPlugin(config, { entryName, entryValue }) {
@@ -64,7 +64,7 @@ export default {
 
 Setting `tools.htmlPlugin` to `false` can disable the built-in `html-rspack-plugin` in Rsbuild, and no HTML files will be generated.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     htmlPlugin: false,
@@ -80,7 +80,7 @@ The `filename` option can be used to modify the file name of the HTML output.
 
 For example, in production mode, a `hash` can be added to the file name:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     htmlPlugin(config, { entryName }) {
diff --git a/website/docs/en/config/tools/lightningcss-loader.mdx b/website/docs/en/config/tools/lightningcss-loader.mdx
index 9ee41e1252..1dd1b8f2d7 100644
--- a/website/docs/en/config/tools/lightningcss-loader.mdx
+++ b/website/docs/en/config/tools/lightningcss-loader.mdx
@@ -21,7 +21,7 @@ When `tools.lightningcssLoader` is an object, it will be merged with the default
 
 For example, you can disable the addition of vendor prefixes through `tools.lightningcssLoader.exclude`. In this case, you can use PostCSS's autoprefixer plugin to add vendor prefixes.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     lightningcssLoader: {
@@ -37,7 +37,7 @@ export default {
 
 When `tools.lightningcssLoader` is a function, the default options will be passed in as the first parameter. You can directly modify this object or return a new object as the final options to be used. For example:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     lightningcssLoader: (config) => {
@@ -54,7 +54,7 @@ export default {
 
 Set `tools.lightningcssLoader` to `false` to disable the built-in `lightningcss-loader` in Rsbuild:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     lightningcssLoader: false,
diff --git a/website/docs/en/config/tools/postcss.mdx b/website/docs/en/config/tools/postcss.mdx
index 741849cc31..1d00bba5fa 100644
--- a/website/docs/en/config/tools/postcss.mdx
+++ b/website/docs/en/config/tools/postcss.mdx
@@ -20,7 +20,7 @@ When `tools.postcss` is a function, the default options will be passed in as the
 
 For example, to add a PostCSS plugin, you can call the [addPlugins](#addplugins) utility function:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     postcss: (opts, { addPlugins }) => {
@@ -32,7 +32,7 @@ export default {
 
 To pass parameters to the PostCSS plugin, call the PostCSS plugin as a function:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     postcss: (opts, { addPlugins }) => {
@@ -47,7 +47,7 @@ export default {
 
 You can also modify the default `postcss-loader` options:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     postcss: (opts) => {
@@ -59,7 +59,7 @@ export default {
 
 `tools.postcss` can return a config object and completely replace the default config:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     postcss: () => {
@@ -77,7 +77,7 @@ export default {
 
 When `tools.postcss` is an object, it will be merged with the default configuration using `Object.assign`. Note that `Object.assign` is a shallow copy and will completely overwrite the built-in `presets` or `plugins` array, please use it with caution.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     postcss: {
@@ -98,7 +98,7 @@ export default {
 
 For adding additional PostCSS plugins, You can pass in a single PostCSS plugin, or an array of PostCSS plugins.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     postcss: (config, { addPlugins }) => {
@@ -119,7 +119,7 @@ export default {
 
 For example, use `postcss-plugin-a` for file paths containing `foo`, and use `postcss-plugin-b` for other file paths:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     postcss: {
diff --git a/website/docs/en/config/tools/style-loader.mdx b/website/docs/en/config/tools/style-loader.mdx
index feedcb003e..efac757ef2 100644
--- a/website/docs/en/config/tools/style-loader.mdx
+++ b/website/docs/en/config/tools/style-loader.mdx
@@ -11,7 +11,7 @@ It is worth noting that Rsbuild does not enable `style-loader` by default. You c
 
 When `tools.styleLoader` is an object, it will be merged with the default configuration using `Object.assign`.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     styleLoader: {
@@ -25,7 +25,7 @@ export default {
 
 When `tools.styleLoader` is a function, the default options will be passed in as the first parameter. You can directly modify this object or return a new object as the final options to be used. For example:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     styleLoader: (config) => {
diff --git a/website/docs/en/config/tools/swc.mdx b/website/docs/en/config/tools/swc.mdx
index 056cd3e5d9..2a0b6a3a35 100644
--- a/website/docs/en/config/tools/swc.mdx
+++ b/website/docs/en/config/tools/swc.mdx
@@ -41,7 +41,7 @@ You can set the options of [builtin:swc-loader](https://rspack.rs/guide/features
 
 `tools.swc` can be configured as an object, this object will be deeply merged with the built-in `builtin:swc-loader` option.
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     swc: {
@@ -57,7 +57,7 @@ export default {
 
 `tools.swc` can also be configured as a function, this function takes one argument, which is the built-in `builtin:swc-loader` option. You can modify this object then return a new config. For example:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     swc: (config) => {
diff --git a/website/docs/zh/config/dev/hmr.mdx b/website/docs/zh/config/dev/hmr.mdx
index af1881d732..465e6990ba 100644
--- a/website/docs/zh/config/dev/hmr.mdx
+++ b/website/docs/zh/config/dev/hmr.mdx
@@ -13,7 +13,7 @@
 
 当 `dev.hmr` 设置为 `false` 时，热更新和 react-refresh 将被禁用，Rsbuild 会自动降级到 [dev.liveReload](/config/dev/live-reload)。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     hmr: false,
diff --git a/website/docs/zh/config/dev/live-reload.mdx b/website/docs/zh/config/dev/live-reload.mdx
index 545e53f81a..f9378391a0 100644
--- a/website/docs/zh/config/dev/live-reload.mdx
+++ b/website/docs/zh/config/dev/live-reload.mdx
@@ -13,7 +13,7 @@
 
 如果你需要禁用 live reload，可以将 `dev.hmr` 和 `dev.liveReload` 同时设置为 `false`，此时页面不会发起 WebSocket 请求到 dev server，也不会在文件变更时自动刷新页面。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     hmr: false,
diff --git a/website/docs/zh/config/dev/watch-files.mdx b/website/docs/zh/config/dev/watch-files.mdx
index 4b2e56f62c..4e53e4a673 100644
--- a/website/docs/zh/config/dev/watch-files.mdx
+++ b/website/docs/zh/config/dev/watch-files.mdx
@@ -26,7 +26,7 @@ type WatchFilesConfig = WatchFiles | WatchFiles[];
 
 - 监听单个文件：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     watchFiles: {
@@ -38,7 +38,7 @@ export default {
 
 - 使用 glob 匹配多个文件：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     watchFiles: {
@@ -50,7 +50,7 @@ export default {
 
 - 监听多个文件路径：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     watchFiles: {
@@ -73,7 +73,7 @@ reload-page 表示当文件发生变化时，浏览器打开的页面会自动
 
 这可以用于监听一些静态资源文件的变化，例如 `public` 目录下的文件。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     watchFiles: {
@@ -115,7 +115,7 @@ export default {
 
 `watchFiles` 是基于 [chokidar v4](https://github.com/paulmillr/chokidar#api) 实现的，你可以通过 `options` 传入 chokidar 的选项。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     watchFiles: {
@@ -132,7 +132,7 @@ export default {
 
 `dev.watchFiles` 支持传入一个数组，这允许你同时配置不同 `type` 的监听器，或是为不同的目录配置不同的 `watchOptions`。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     watchFiles: [
diff --git a/website/docs/zh/config/dev/write-to-disk.mdx b/website/docs/zh/config/dev/write-to-disk.mdx
index 0c027519cb..550edeb4b5 100644
--- a/website/docs/zh/config/dev/write-to-disk.mdx
+++ b/website/docs/zh/config/dev/write-to-disk.mdx
@@ -15,7 +15,7 @@
 
 只需要将 `dev.writeToDisk` 配置项设置为 `true` 即可：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     writeToDisk: true,
@@ -33,7 +33,7 @@ export default {
 
 例如将文件写入磁盘，并排除热更新临时文件：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     writeToDisk: (file) => !file.includes('.hot-update.'),
diff --git a/website/docs/zh/config/environments.mdx b/website/docs/zh/config/environments.mdx
index cdd09158d7..45e8cc27e8 100644
--- a/website/docs/zh/config/environments.mdx
+++ b/website/docs/zh/config/environments.mdx
@@ -135,7 +135,7 @@ const nodeConfig = {
 
 由于 environment 名称会用于目录名和对象属性名，因此建议只包含字母、数字、`-`、`_` 和 `$`，使用其他字符时，Rsbuild 会输出 warning 进行提示。
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   environments: {
     someName: {}, // ✅
diff --git a/website/docs/zh/config/html/app-icon.mdx b/website/docs/zh/config/html/app-icon.mdx
index 35bbf73488..8c0537ca88 100644
--- a/website/docs/zh/config/html/app-icon.mdx
+++ b/website/docs/zh/config/html/app-icon.mdx
@@ -39,7 +39,7 @@ type AppIcon = {
 
 最常用的图标大小是 `192x192` 和 `512x512`，你也可以根据需要来自定义图标大小和图标数量。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     appIcon: {
@@ -131,7 +131,7 @@ export default {
 
 使用 `target` 选项来指定图标的目标：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     appIcon: {
@@ -165,7 +165,7 @@ export default {
 
 manifest 文件的文件名。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     appIcon: {
diff --git a/website/docs/zh/config/html/crossorigin.mdx b/website/docs/zh/config/html/crossorigin.mdx
index 5e0ee47455..84b176340d 100644
--- a/website/docs/zh/config/html/crossorigin.mdx
+++ b/website/docs/zh/config/html/crossorigin.mdx
@@ -10,7 +10,7 @@
 
 ## 示例
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     crossorigin: 'anonymous',
diff --git a/website/docs/zh/config/html/favicon.mdx b/website/docs/zh/config/html/favicon.mdx
index e1d6e7f150..4fbd10ef43 100644
--- a/website/docs/zh/config/html/favicon.mdx
+++ b/website/docs/zh/config/html/favicon.mdx
@@ -19,7 +19,7 @@ Rsbuild 还提供了 [html.appIcon](/config/html/app-icon) 来设置 Web 应用
 
 设置为相对路径：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     favicon: './src/assets/icon.png',
@@ -92,7 +92,7 @@ type FaviconFunction = ({ value: string; entryName: string }) => string | void;
 
 在 MPA（多页面应用）场景下，你可以基于入口名称返回不同的 `favicon`，从而为每个页面生成不同的标签：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     favicon({ entryName }) {
diff --git a/website/docs/zh/config/html/inject.mdx b/website/docs/zh/config/html/inject.mdx
index 5abdfba831..dcf5c3b8c8 100644
--- a/website/docs/zh/config/html/inject.mdx
+++ b/website/docs/zh/config/html/inject.mdx
@@ -34,7 +34,7 @@
 
 添加如下配置，可以将 `<script>` 插入至 `<body>` 标签：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     inject: 'body',
@@ -73,7 +73,7 @@ type InjectFunction = ({ value: ScriptInject; entryName: string }) => string | v
 
 在 MPA（多页面应用）场景下，你可以基于入口名称设置不同的 `inject` 方式：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     inject({ entryName }) {
diff --git a/website/docs/zh/config/html/meta.mdx b/website/docs/zh/config/html/meta.mdx
index 1840dbe48e..ec03ae09c2 100644
--- a/website/docs/zh/config/html/meta.mdx
+++ b/website/docs/zh/config/html/meta.mdx
@@ -34,7 +34,7 @@ type MetaOptions = {
 
 比如设置 `description`：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     meta: {
@@ -69,7 +69,7 @@ type MetaOptions = {
 
 比如设置 `charset`：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     meta: {
@@ -107,7 +107,7 @@ type MetaFunction = ({
 
 比如，你可以直接修改内置的 `meta` 配置对象：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     meta({ value }) {
@@ -120,7 +120,7 @@ export default {
 
 在 MPA（多页面应用）场景下，你可以基于入口名称返回不同的 `meta` 配置，从而为每个页面生成不同的 `meta` 标签：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     meta({ entryName }) {
@@ -149,7 +149,7 @@ export default {
 
 比如移除 Rsbuild 预设的 `viewport`：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     meta: {
diff --git a/website/docs/zh/config/html/mount-id.mdx b/website/docs/zh/config/html/mount-id.mdx
index ba4edf4189..48ffa591a6 100644
--- a/website/docs/zh/config/html/mount-id.mdx
+++ b/website/docs/zh/config/html/mount-id.mdx
@@ -15,7 +15,7 @@
 
 修改 DOM 挂载节点 `id` 为 `app`：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     mountId: 'app',
diff --git a/website/docs/zh/config/html/output-structure.mdx b/website/docs/zh/config/html/output-structure.mdx
index 26dfebb6d1..8177fefd55 100644
--- a/website/docs/zh/config/html/output-structure.mdx
+++ b/website/docs/zh/config/html/output-structure.mdx
@@ -16,7 +16,7 @@
 
 你可以将 `html.outputStructure` 配置为 `nested`:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     outputStructure: 'nested',
diff --git a/website/docs/zh/config/html/tags.mdx b/website/docs/zh/config/html/tags.mdx
index b502bbde0e..e1a8c00e44 100644
--- a/website/docs/zh/config/html/tags.mdx
+++ b/website/docs/zh/config/html/tags.mdx
@@ -351,7 +351,7 @@ type HtmlTagHandler = (
 
 回调函数接受 tags 列表作为参数，并需要修改或直接返回新的 tags 数组：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     tags: [
diff --git a/website/docs/zh/config/html/template-parameters.mdx b/website/docs/zh/config/html/template-parameters.mdx
index bca472c3d7..4294429514 100644
--- a/website/docs/zh/config/html/template-parameters.mdx
+++ b/website/docs/zh/config/html/template-parameters.mdx
@@ -34,7 +34,7 @@ type DefaultParameters = {
 
 比如，如果你需要在 HTML 模板中使用 `foo` 参数，可以添加如下设置：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     templateParameters: {
@@ -78,7 +78,7 @@ type TemplateParametersFunction = (
 
 在 MPA（多页面应用）场景下，你可以基于入口名称设置不同的 `templateParameters` 参数：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     templateParameters(defaultValue, { entryName }) {
diff --git a/website/docs/zh/config/html/template.mdx b/website/docs/zh/config/html/template.mdx
index 83537dec42..77ead92f44 100644
--- a/website/docs/zh/config/html/template.mdx
+++ b/website/docs/zh/config/html/template.mdx
@@ -20,7 +20,7 @@
 
 例如，使用 `static/index.html` 文件替代默认 HTML 模板，可以添加如下设置：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     template: './static/index.html',
@@ -43,7 +43,7 @@ type TemplateFunction = ({ value: string; entryName: string }) => string | void;
 
 在 MPA（多页面应用）场景下，你可以基于入口名称返回不同的 `template` 路口，从而为每个页面设置不同的模板：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     template({ entryName }) {
diff --git a/website/docs/zh/config/html/title.mdx b/website/docs/zh/config/html/title.mdx
index 90dc7884c9..479b0c50e8 100644
--- a/website/docs/zh/config/html/title.mdx
+++ b/website/docs/zh/config/html/title.mdx
@@ -13,7 +13,7 @@
 
 当 `html.title` 可以直接设置为一个字符串：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     title: 'Example',
@@ -42,7 +42,7 @@ type TitleFunction = ({ value: string; entryName: string }) => string | void;
 
 在 MPA（多页面应用）场景下，你可以基于入口名称返回不同的 `title` 字符串，从而为每个页面生成不同的 `title` 标签：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     title({ entryName }) {
@@ -60,7 +60,7 @@ export default {
 
 当 `html.title` 设置为空字符串时，Rsbuild 不会注入 `<title>` 标签：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     title: '',
diff --git a/website/docs/zh/config/output/copy.mdx b/website/docs/zh/config/output/copy.mdx
index 185c5a20b9..67399aa1a3 100644
--- a/website/docs/zh/config/output/copy.mdx
+++ b/website/docs/zh/config/output/copy.mdx
@@ -11,7 +11,7 @@
 
 将 `./src/assets` 下的文件拷贝到 `./dist` 目录：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     copy: [
@@ -24,7 +24,7 @@ export default {
 
 将 `./src/assets` 下的文件拷贝到 `./dist/assets` 目录：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     copy: [
@@ -37,7 +37,7 @@ export default {
 
 在拷贝 `public` 下的文件到构建产物目录时，将忽略 `public/someDir` 目录：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     copy: [{ from: './public', globOptions: { ignore: ['**/someDir/**'] } }],
diff --git a/website/docs/zh/config/output/css-modules.mdx b/website/docs/zh/config/output/css-modules.mdx
index 42b59cd776..8141053be9 100644
--- a/website/docs/zh/config/output/css-modules.mdx
+++ b/website/docs/zh/config/output/css-modules.mdx
@@ -278,7 +278,7 @@ export default {
 
 例如，对 `.module.css` 文件使用局部作用域，对其他文件使用全局样式：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     cssModules: {
diff --git a/website/docs/zh/config/output/data-uri-limit.mdx b/website/docs/zh/config/output/data-uri-limit.mdx
index 8df9de7573..a4422e2e7e 100644
--- a/website/docs/zh/config/output/data-uri-limit.mdx
+++ b/website/docs/zh/config/output/data-uri-limit.mdx
@@ -46,7 +46,7 @@ const defaultDatUriLimit = {
 
 - 内联小于 10KiB 的所有静态资源：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     dataUriLimit: 10 * 1024,
@@ -56,7 +56,7 @@ export default {
 
 - 禁用静态资源内联：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     dataUriLimit: 0,
@@ -66,7 +66,7 @@ export default {
 
 - 内联所有静态资源：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     dataUriLimit: Number.MAX_SAFE_INTEGER,
@@ -76,7 +76,7 @@ export default {
 
 - 设置图片资源的阈值为 5KiB，不内联视频资源：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     dataUriLimit: {
diff --git a/website/docs/zh/config/output/emit-assets.mdx b/website/docs/zh/config/output/emit-assets.mdx
index c7c66e35a7..42fe7e73c4 100644
--- a/website/docs/zh/config/output/emit-assets.mdx
+++ b/website/docs/zh/config/output/emit-assets.mdx
@@ -11,7 +11,7 @@
 
 比如，以下例子会在构建 web 产物时输出静态资源，而在构建 node 产物时避免输出。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   environments: {
     web: {
diff --git a/website/docs/zh/config/output/emit-css.mdx b/website/docs/zh/config/output/emit-css.mdx
index 6cc286f342..0a87f5381c 100644
--- a/website/docs/zh/config/output/emit-css.mdx
+++ b/website/docs/zh/config/output/emit-css.mdx
@@ -17,7 +17,7 @@
 
 当构建 Node.js 产物时，如果你需要输出 CSS 文件，可以设置 `output.emitCss` 为 `true`：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     target: 'node',
diff --git a/website/docs/zh/config/output/filename-hash.mdx b/website/docs/zh/config/output/filename-hash.mdx
index 1a6de95cf4..31c5846908 100644
--- a/website/docs/zh/config/output/filename-hash.mdx
+++ b/website/docs/zh/config/output/filename-hash.mdx
@@ -16,7 +16,7 @@ dist/static/js/index.18a568e5.js
 
 你可以将 `output.filenameHash` 设置为 false 来禁用这个行为：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     filenameHash: false,
@@ -37,7 +37,7 @@ hash 的默认格式为 `contenthash:8`，即基于文件内容生成 8 位 hash
 
 你可以将 `output.filenameHash` 设置为 Rspack 支持的其他格式，并自定义长度。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     filenameHash: 'fullhash:16',
diff --git a/website/docs/zh/config/output/inject-styles.mdx b/website/docs/zh/config/output/inject-styles.mdx
index cb8e33b8d1..a380368a8c 100644
--- a/website/docs/zh/config/output/inject-styles.mdx
+++ b/website/docs/zh/config/output/inject-styles.mdx
@@ -9,7 +9,7 @@
 
 ## 示例
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     injectStyles: true,
@@ -29,7 +29,7 @@ export default {
 
 比如：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     injectStyles: process.env.NODE_ENV === 'development',
diff --git a/website/docs/zh/config/output/inline-scripts.mdx b/website/docs/zh/config/output/inline-scripts.mdx
index dab795cc98..355b5f1c71 100644
--- a/website/docs/zh/config/output/inline-scripts.mdx
+++ b/website/docs/zh/config/output/inline-scripts.mdx
@@ -34,7 +34,7 @@ dist/static/js/main.js
 
 开启 `output.inlineScripts` 选项后：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineScripts: true,
@@ -71,7 +71,7 @@ dist/static/css/style.css
 
 因为 script 标签的默认插入位置是 `<head>` 标签，将插入位置修改为 `<body>` 标签后，可以保证 inlined script 能获取到 `<body>` 中的 DOM 元素。
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   html: {
     inject: 'body', // [!code highlight]
@@ -88,7 +88,7 @@ export default {
 
 比如，将产物中的 `main.js` 内联到 HTML 中，你可以添加如下配置：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineScripts: /[\\/]main\.\w+\.js$/,
@@ -109,7 +109,7 @@ export default {
 
 比如，我们希望内联小于 10kB 的资源，可以添加如下配置：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineScripts({ size }) {
@@ -125,7 +125,7 @@ export default {
 
 如果你希望将异步 Chunks 内联到 HTML 中，你可以通过 [tools.rspack](/config/tools/rspack) 配置项来实现修改 Rspack 的默认行为，将 [module.parser.javascript.dynamicImportMode](https://rspack.rs/zh/config/module#moduleparserjavascriptdynamicimportmode) 设置为 `'eager'`，此时 Rspack 不会为 dynamic import 生成单独的 JS 文件。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineScripts: true,
@@ -153,7 +153,7 @@ export default {
 
 是否启用内联。`'auto'` 表示在生产模式时开启，开发模式时关闭。
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineScripts: {
@@ -170,7 +170,7 @@ export default {
 
 用来匹配需要内联的 JS 文件。
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineScripts: {
diff --git a/website/docs/zh/config/output/inline-styles.mdx b/website/docs/zh/config/output/inline-styles.mdx
index af2eb5db14..19400fa75f 100644
--- a/website/docs/zh/config/output/inline-styles.mdx
+++ b/website/docs/zh/config/output/inline-styles.mdx
@@ -34,7 +34,7 @@ dist/static/js/main.js
 
 开启 `output.inlineStyles` 选项后：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineStyles: true,
@@ -72,7 +72,7 @@ dist/static/js/main.js
 
 比如，将产物中的 `main.css` 内联到 HTML 中，你可以添加如下配置：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineStyles: /[\\/]main\.\w+\.css$/,
@@ -93,7 +93,7 @@ export default {
 
 比如，我们希望内联小于 10kB 的资源，可以添加如下配置：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineStyles({ size }) {
@@ -112,7 +112,7 @@ export default {
 
 是否启用内联。`'auto'` 表示在生产模式时开启，开发模式时关闭。
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineStyles: {
@@ -129,7 +129,7 @@ export default {
 
 用来匹配需要内联的 CSS 文件。
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     inlineStyles: {
diff --git a/website/docs/zh/config/output/source-map.mdx b/website/docs/zh/config/output/source-map.mdx
index 621372f1a5..5f6744599e 100644
--- a/website/docs/zh/config/output/source-map.mdx
+++ b/website/docs/zh/config/output/source-map.mdx
@@ -37,7 +37,7 @@ source map 是保存源代码映射关系的信息文件，它记录了编译后
 
 如果 `output.sourceMap` 为 `true`，则会根据 [mode](/config/mode) 生成 JS 和 CSS 文件的 source map，等价于：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     sourceMap: {
@@ -50,7 +50,7 @@ export default {
 
 如果 `output.sourceMap` 为 `false`，则不会生成 JS 和 CSS 文件的 source map，等价于：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     sourceMap: {
@@ -67,7 +67,7 @@ JS 文件的 source map 通过 `sourceMap.js` 来控制，可以传入 Rspack [d
 
 比如，如果你需要在所有模式生成高质量的 source map，可以设置为：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     sourceMap: {
@@ -79,7 +79,7 @@ export default {
 
 你也可以根据 `NODE_ENV` 来设置不同的 source map 格式：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     sourceMap: {
@@ -104,7 +104,7 @@ CSS 文件的 source map 通过 `sourceMap.css` 来控制，设置为 `true` 为
 
 比如，如果需要生成 CSS 文件的 source map，可以设置为：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     sourceMap: {
@@ -118,7 +118,7 @@ export default {
 
 你可以仅在开发模式下开启 CSS 文件的 source map：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     injectStyles: true,
diff --git a/website/docs/zh/config/output/target.mdx b/website/docs/zh/config/output/target.mdx
index a4c881be51..bdb083a31e 100644
--- a/website/docs/zh/config/output/target.mdx
+++ b/website/docs/zh/config/output/target.mdx
@@ -28,7 +28,7 @@ Rsbuild 会读取项目中的 [Browserslist 配置](https://github.com/browsersl
 
 比如构建出适用于 Node.js 环境的产物：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     target: 'node',
@@ -42,7 +42,7 @@ export default {
 
 比如同时构建 `web` 产物和 `node` 产物：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   environments: {
     web: {
@@ -113,7 +113,7 @@ Rspack 支持的 [target](https://rspack.rs/zh/config/target) 类型更为丰富
 
 例如设置 `target` 为 `'electron-main'`，这会覆盖 Rsbuild 默认设置的 `'web'`。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     rspack: {
diff --git a/website/docs/zh/config/performance/chunk-split.mdx b/website/docs/zh/config/performance/chunk-split.mdx
index 1f3df01ac7..2908709731 100644
--- a/website/docs/zh/config/performance/chunk-split.mdx
+++ b/website/docs/zh/config/performance/chunk-split.mdx
@@ -55,7 +55,7 @@ type ChunkSplit = BaseChunkSplit | SplitBySize | SplitCustom;
 
 Rsbuild 默认采用 `split-by-experience` 策略，如果你想使用其他拆包策略，可以通过 `strategy` 选项来指定，比如：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     chunkSplit: {
@@ -72,7 +72,7 @@ export default {
 
 当 `chunkSplit.strategy` 为 `split-by-size` 时，可以通过 `chunkSplit.minSize` 配置项来指定 chunk 的最小大小，单位为字节。默认值为 10000。比如:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     chunkSplit: {
@@ -90,7 +90,7 @@ export default {
 
 当 `chunkSplit.strategy` 为 `split-by-size` 时，可以通过 `chunkSplit.maxSize` 配置项来指定 chunk 的最大大小，单位为字节。默认值为 `Number.POSITIVE_INFINITY`。比如:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     chunkSplit: {
@@ -110,7 +110,7 @@ export default {
 
 比如将 node_modules 下的 `axios` 库拆分到 `axios.js` 中：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     chunkSplit: {
@@ -132,7 +132,7 @@ export default {
 
 当 `chunkSplit.strategy` 为 `custom` 时，可以通过 `chunkSplit.splitChunks` 配置项来指定自定义的 Rspack 拆包配置。此配置会和 Rspack 的 splitChunks 配置进行合并（cacheGroups 配置也会合并）。比如:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     chunkSplit: {
@@ -155,7 +155,7 @@ export default {
 
 当 `chunkSplit.strategy` 为 `split-by-experience`、`split-by-module`、`split-by-size` 或 `single-vendor` 时，可以通过 `chunkSplit.override` 配置项来自定义 Rspack 拆包配置，此配置会和 Rspack 的 splitChunks 配置进行合并（cacheGroups 配置也会合并）。比如:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     chunkSplit: {
@@ -179,7 +179,7 @@ export default {
 
 通常 Node bundles 不需要通过 split chunks 来优化加载性能，如果你需要对 Node bundles 进行拆包，可以使用 [tools.rspack](/config/tools/rspack) 来配置 Rspack 的 [optimization.splitChunks](https://rspack.rs/zh/plugins/webpack/split-chunks-plugin#optimizationsplitchunks) 选项：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     rspack: {
diff --git a/website/docs/zh/config/performance/dns-prefetch.mdx b/website/docs/zh/config/performance/dns-prefetch.mdx
index edd0986c95..259ab75a85 100644
--- a/website/docs/zh/config/performance/dns-prefetch.mdx
+++ b/website/docs/zh/config/performance/dns-prefetch.mdx
@@ -15,7 +15,7 @@
 
 ## 示例
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     dnsPrefetch: ['https://example.com'],
diff --git a/website/docs/zh/config/performance/preconnect.mdx b/website/docs/zh/config/performance/preconnect.mdx
index 4d921d9879..850245deb6 100644
--- a/website/docs/zh/config/performance/preconnect.mdx
+++ b/website/docs/zh/config/performance/preconnect.mdx
@@ -28,7 +28,7 @@ type Preconnect =
 
 ## 示例
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     preconnect: ['https://example.com/'],
@@ -51,7 +51,7 @@ export default {
 
 指定要预连接的 URL。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     // 等价于 `preconnect: ['https://example.com/'],`
@@ -71,7 +71,7 @@ export default {
 
 指定是否添加 `crossorigin` 属性。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     preconnect: [
diff --git a/website/docs/zh/config/performance/print-file-size.mdx b/website/docs/zh/config/performance/print-file-size.mdx
index a5b755acac..51f00915f7 100644
--- a/website/docs/zh/config/performance/print-file-size.mdx
+++ b/website/docs/zh/config/performance/print-file-size.mdx
@@ -36,7 +36,7 @@ type PrintFileSizeOptions =
 
 如果不需要输出任何信息，可以将 `printFileSize` 置为 `false` 将其禁用：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: false,
@@ -70,7 +70,7 @@ type Total =
 
 当设置为 `false` 时，不输出总体积信息：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: {
@@ -86,7 +86,7 @@ export default {
 
 当设置为函数时，可以自定义总体积的输出格式：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: {
@@ -115,7 +115,7 @@ export default {
 
 如果你不需要查看每个静态资源文件的体积，可以把 `detail` 设置为 false，此时仅输出总体积：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: {
@@ -134,7 +134,7 @@ export default {
 
 如果你不需要查看 gzip 压缩后的体积，可以把 `compressed` 设置为 false，这在大型项目中可以节省一些 gzip 计算的耗时：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: {
@@ -178,7 +178,7 @@ type Include = (asset: PrintFileSizeAsset) => boolean;
 
 例如，只输出体积大于 10kB 的静态资源：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: {
@@ -190,7 +190,7 @@ export default {
 
 或者只输出体积大于 10kB 的 `.js` 文件：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: {
@@ -216,7 +216,7 @@ Rsbuild 默认排除 source map、许可证文件和 `.d.ts` 类型文件，因
 
 例如，额外再排除 `.html` 文件：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     printFileSize: {
diff --git a/website/docs/zh/config/performance/profile.mdx b/website/docs/zh/config/performance/profile.mdx
index 78c7a2cc38..9e4ab2cddb 100644
--- a/website/docs/zh/config/performance/profile.mdx
+++ b/website/docs/zh/config/performance/profile.mdx
@@ -12,7 +12,7 @@
 
 ## 示例
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     profile: true,
diff --git a/website/docs/zh/config/performance/remove-console.mdx b/website/docs/zh/config/performance/remove-console.mdx
index 9aa8132903..8a6ff8effc 100644
--- a/website/docs/zh/config/performance/remove-console.mdx
+++ b/website/docs/zh/config/performance/remove-console.mdx
@@ -9,7 +9,7 @@
 
 当 `removeConsole` 被设置为 `true` 时，会移除所有类型的 `console.[methodName]`：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     removeConsole: true,
@@ -21,7 +21,7 @@ export default {
 
 你也可以指定仅移除特定类型的 `console.[methodName]`，比如移除 `console.log` 和 `console.warn`：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     removeConsole: ['log', 'warn'],
diff --git a/website/docs/zh/config/performance/remove-moment-locale.mdx b/website/docs/zh/config/performance/remove-moment-locale.mdx
index b29183b375..eea690b79d 100644
--- a/website/docs/zh/config/performance/remove-moment-locale.mdx
+++ b/website/docs/zh/config/performance/remove-moment-locale.mdx
@@ -9,7 +9,7 @@
 
 当项目中使用了 `moment.js` 时，推荐开启此选项，自动排除所有的语言包文件：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   performance: {
     removeMomentLocale: true,
diff --git a/website/docs/zh/config/resolve/alias-strategy.mdx b/website/docs/zh/config/resolve/alias-strategy.mdx
index bac6363c4b..fc1ea92e9e 100644
--- a/website/docs/zh/config/resolve/alias-strategy.mdx
+++ b/website/docs/zh/config/resolve/alias-strategy.mdx
@@ -30,7 +30,7 @@
 
 - `resolve.alias`:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   resolve: {
     alias: {
@@ -50,7 +50,7 @@ export default {
 
 当 `resolve.aliasStrategy` 的值为 `prefer-alias` 时，`tsconfig.json` 中的 `paths` 选项只用于提供 TypeScript 类型定义，而不会对打包结果产生任何影响。此时，构建工具只会读取 `alias` 选项作为路径别名。
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   resolve: {
     aliasStrategy: 'prefer-alias',
@@ -75,7 +75,7 @@ export default {
 
 - `resolve.alias`:
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   resolve: {
     alias: {
@@ -89,7 +89,7 @@ export default {
 
 大部分情况下你不需要使用 `prefer-alias`，但当你需要动态生成一些别名配置时，可以考虑使用它。比如，基于环境变量来生成 `alias` 选项：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   resolve: {
     alias: {
diff --git a/website/docs/zh/config/security/nonce.mdx b/website/docs/zh/config/security/nonce.mdx
index f077ec1c1f..776588578e 100644
--- a/website/docs/zh/config/security/nonce.mdx
+++ b/website/docs/zh/config/security/nonce.mdx
@@ -25,7 +25,7 @@ nonce 机制在 Content Security Policy（CSP，内容安全策略）中起到
 
 默认情况下，Rsbuild 不会开启 `nonce`，你可以按照需求定义该值：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   security: {
     nonce: 'CSP_NONCE_PLACEHOLDER',
diff --git a/website/docs/zh/config/security/sri.mdx b/website/docs/zh/config/security/sri.mdx
index 41f912de8a..8c0a467601 100644
--- a/website/docs/zh/config/security/sri.mdx
+++ b/website/docs/zh/config/security/sri.mdx
@@ -27,7 +27,7 @@ type SriOptions = {
 
 在使用 SRI 时，你需要启用 [html.crossorigin](/config/html/crossorigin)，这可以确保资源在跨域加载时，SRI 也能正常校验。
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   security: {
     sri: {
@@ -84,7 +84,7 @@ Rsbuild 会处理以下几种 `<link>` 标签：
 
 是否启用 SRI。`'auto'` 表示在生产构建时开启，开发构建时关闭。
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   security: {
     sri: {
@@ -105,7 +105,7 @@ export default {
 
 比如设置为 `sha512`：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   security: {
     sri: {
diff --git a/website/docs/zh/config/server/base.mdx b/website/docs/zh/config/server/base.mdx
index 5452002035..fcee2a68de 100644
--- a/website/docs/zh/config/server/base.mdx
+++ b/website/docs/zh/config/server/base.mdx
@@ -12,7 +12,7 @@
 
 当你希望通过 `http://localhost:3000/foo/` 访问到 `index.html` 时，可以将 `server.base` 修改为 `/foo`。
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     base: '/foo',
@@ -34,7 +34,7 @@ export default {
 
 如果你不希望使用此默认行为，可以通过显式设置 `dev.assetPrefix` / `output.assetPrefix` 来覆盖：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     assetPrefix: '/',
diff --git a/website/docs/zh/config/server/host.mdx b/website/docs/zh/config/server/host.mdx
index 5d956c5444..5d58634a20 100644
--- a/website/docs/zh/config/server/host.mdx
+++ b/website/docs/zh/config/server/host.mdx
@@ -11,7 +11,7 @@
 
 如果你希望 Rsbuild server 只监听 `localhost`，可以设置为：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     host: 'localhost',
@@ -23,7 +23,7 @@ export default {
 
 如果你希望监听所有 IPv6 的网络接口，可以设置为：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     host: '::',
@@ -33,7 +33,7 @@ export default {
 
 如果你希望监听 IPv6 指定的 host，可以设置为：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     host: '::1',
diff --git a/website/docs/zh/config/server/port.mdx b/website/docs/zh/config/server/port.mdx
index bfbe85743e..c93903ff8d 100644
--- a/website/docs/zh/config/server/port.mdx
+++ b/website/docs/zh/config/server/port.mdx
@@ -17,7 +17,7 @@ npx rsbuild dev --port 8080
 
 将端口设置为 `8080`：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     port: 8080,
@@ -27,7 +27,7 @@ export default {
 
 为开发服务器和预览服务器设置不同的端口号：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     port: process.env.NODE_ENV === 'development' ? 3000 : 8080,
diff --git a/website/docs/zh/config/server/proxy.mdx b/website/docs/zh/config/server/proxy.mdx
index 01b666986b..2015b62519 100644
--- a/website/docs/zh/config/server/proxy.mdx
+++ b/website/docs/zh/config/server/proxy.mdx
@@ -17,7 +17,7 @@ type ProxyConfig =
 
 ### 基础用法
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     proxy: {
@@ -33,7 +33,7 @@ export default {
 
 你也可以代理到线上域名，比如:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     proxy: {
@@ -49,7 +49,7 @@ export default {
 
 如果你不想传递 `/api`，可以通过 `pathRewrite` 重写请求路径：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     proxy: {
@@ -68,7 +68,7 @@ export default {
 
 如果你希望代理 WebSocket 请求，可以通过 `ws` 开启：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     proxy: {
@@ -124,7 +124,7 @@ type ProxyConfig =
 
 例如，你可能希望对浏览器请求返回 HTML 页面，而对 API 请求则进行代理转发。你可以这样配置：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     proxy: {
@@ -146,7 +146,7 @@ export default {
 
 用于代理多个指定的路径到同一个目标。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     proxy: [
diff --git a/website/docs/zh/config/server/public-dir.mdx b/website/docs/zh/config/server/public-dir.mdx
index ff433720bf..63c7d247db 100644
--- a/website/docs/zh/config/server/public-dir.mdx
+++ b/website/docs/zh/config/server/public-dir.mdx
@@ -36,7 +36,7 @@ public 目录名称。`name` 的值可以设置为相对路径或绝对路径，
 
 - 相对路径示例：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     publicDir: {
@@ -79,7 +79,7 @@ export default {
 
 比如关闭 `copyOnBuild`：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     publicDir: {
@@ -97,7 +97,7 @@ export default {
 
 你可以将 `copyOnBuild` 设置为 `true` 来为 `node` target 复制文件：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     target: 'node',
@@ -126,7 +126,7 @@ export default {
 
 设置 `watch` 为 `true` 后，开发服务器会监听指定公共目录下的文件变化，并在文件发生变化时重新加载页面：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     publicDir: {
@@ -142,7 +142,7 @@ export default {
 
 `server.publicDir` 可以配置为一个数组，这允许你将多个目录作为静态资源服务的文件夹：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     publicDir: [
@@ -162,7 +162,7 @@ export default {
 
 你可以将 `publicDir` 设置成 `false` 来禁用静态资源服务：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   server: {
     publicDir: false,
diff --git a/website/docs/zh/config/source/define.mdx b/website/docs/zh/config/source/define.mdx
index 7e5849a0e0..33d578f962 100644
--- a/website/docs/zh/config/source/define.mdx
+++ b/website/docs/zh/config/source/define.mdx
@@ -16,7 +16,7 @@
 
 ## 示例
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     define: {
diff --git a/website/docs/zh/config/source/pre-entry.mdx b/website/docs/zh/config/source/pre-entry.mdx
index aed684aac3..f3676e9588 100644
--- a/website/docs/zh/config/source/pre-entry.mdx
+++ b/website/docs/zh/config/source/pre-entry.mdx
@@ -15,7 +15,7 @@ console.log('I am a polyfill');
 
 然后将 `src/polyfill.ts` 配置到 `source.preEntry` 上：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     preEntry: './src/polyfill.ts',
@@ -29,7 +29,7 @@ export default {
 
 你也可以通过 `source.preEntry` 来配置全局样式，这段 CSS 代码会早于页面代码加载，比如引入一个 `normalize.css` 文件：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     preEntry: './src/normalize.css',
@@ -41,7 +41,7 @@ export default {
 
 你可以将 `preEntry` 设置为数组来添加多个脚本，它们会按数组顺序执行：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     preEntry: ['./src/polyfill-a.ts', './src/polyfill-b.ts'],
diff --git a/website/docs/zh/config/source/transform-import.mdx b/website/docs/zh/config/source/transform-import.mdx
index cf088aa744..ce120a1667 100644
--- a/website/docs/zh/config/source/transform-import.mdx
+++ b/website/docs/zh/config/source/transform-import.mdx
@@ -27,7 +27,7 @@ type TransformImport =
 
 在使用 [antd](https://github.com/ant-design/ant-design) 组件库时（低于 v5 版本），你可以通过以下配置来按需引入组件：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     transformImport: [
@@ -60,7 +60,7 @@ import 'antd/es/button/style';
 
 在使用 lodash 时，你可以通过 `transformImport` 来自动引用子路径，减小包体积。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     transformImport: [
@@ -98,7 +98,7 @@ import lodash from 'lodash';
 
 如果你希望通过 `transformImport` 对 node_modules 下的代码进行处理，请将相关模块添加到 [source.include](/config/source/include) 配置中。
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     include: [/node_modules[\\/]some-package[\\/]/],
@@ -226,7 +226,7 @@ import { Button } from 'foo/button';
 
 比如下面的配置，会将 `import { foo } from 'my-lib'` 转换为 `import foo from 'my-lib/foo'`。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     transformImport: [
@@ -260,7 +260,7 @@ export default {
 
 `transformImport` 的值定义为函数时，可以接受原本的 transformImport 配置，并对其进行修改。
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     transformImport: (imports) => {
@@ -272,7 +272,7 @@ export default {
 
 也可以在函数中返回一个新数组作为最终结果，新数组会覆盖原本的 transformImport 配置。
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     transformImport: () => {
diff --git a/website/docs/zh/config/source/tsconfig-path.mdx b/website/docs/zh/config/source/tsconfig-path.mdx
index afd23a0023..999043fb8c 100644
--- a/website/docs/zh/config/source/tsconfig-path.mdx
+++ b/website/docs/zh/config/source/tsconfig-path.mdx
@@ -18,7 +18,7 @@
 
 - 相对路径示例：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   source: {
     tsconfigPath: './tsconfig.custom.json',
diff --git a/website/docs/zh/config/tools/css-extract.mdx b/website/docs/zh/config/tools/css-extract.mdx
index 641e60fe46..98c1d5f242 100644
--- a/website/docs/zh/config/tools/css-extract.mdx
+++ b/website/docs/zh/config/tools/css-extract.mdx
@@ -39,7 +39,7 @@ Rsbuild 默认使用 CssExtractRspackPlugin 插件将 CSS 提取为独立的文
 - **类型：** `CssExtractRspackPluginOptions`
 - **示例：**
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     cssExtract: {
@@ -56,7 +56,7 @@ export default {
 - **类型：** `CssExtractRspackLoaderOptions`
 - **示例：**
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     cssExtract: {
diff --git a/website/docs/zh/config/tools/css-loader.mdx b/website/docs/zh/config/tools/css-loader.mdx
index 4dbc71f15d..8f38155525 100644
--- a/website/docs/zh/config/tools/css-loader.mdx
+++ b/website/docs/zh/config/tools/css-loader.mdx
@@ -20,7 +20,7 @@ Rsbuild 默认使用 [css-loader](https://github.com/webpack-contrib/css-loader)
 
 当此值为 Object 类型时，会与默认配置进行深层合并 (deep merge)。比如：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     cssLoader: {
@@ -36,7 +36,7 @@ export default {
 
 当此值为 Function 类型时，默认配置作为第一个参数传入，你可以直接修改配置对象，也可以返回一个对象作为最终配置。比如：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     cssLoader: (config) => {
diff --git a/website/docs/zh/config/tools/html-plugin.mdx b/website/docs/zh/config/tools/html-plugin.mdx
index cc35282d85..460c628f2e 100644
--- a/website/docs/zh/config/tools/html-plugin.mdx
+++ b/website/docs/zh/config/tools/html-plugin.mdx
@@ -30,7 +30,7 @@ Rsbuild 内部基于 [html-rspack-plugin](https://github.com/rspack-contrib/html
 
 当 `tools.htmlPlugin` 的值为 `Object` 类型时，会与默认配置通过 `Object.assign` 合并。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     htmlPlugin: {
@@ -48,7 +48,7 @@ export default {
 - 第二个参数是也是一个对象，包含了 entry 的名称和 entry 的值。
 - 函数可以 return 一个新的对象作为最终的配置。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     htmlPlugin(config, { entryName, entryValue }) {
@@ -64,7 +64,7 @@ export default {
 
 将 `tools.htmlPlugin` 配置为 `false`，可以禁用 Rsbuild 内置的 `html-rspack-plugin` 插件，此时将不会生成 HTML 文件。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     htmlPlugin: false,
@@ -80,7 +80,7 @@ export default {
 
 例如，在生产模式构建时，可以在文件名上添加 `hash`：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     htmlPlugin(config, { entryName }) {
diff --git a/website/docs/zh/config/tools/lightningcss-loader.mdx b/website/docs/zh/config/tools/lightningcss-loader.mdx
index f516e194de..9b35b2507d 100644
--- a/website/docs/zh/config/tools/lightningcss-loader.mdx
+++ b/website/docs/zh/config/tools/lightningcss-loader.mdx
@@ -21,7 +21,7 @@ const defaultOptions = {
 
 比如，你可以通过 `tools.lightningcssLoader.exclude` 来关闭 vendor prefixes 的添加，此时你可以使用 PostCSS 的 autoprefixer 插件来添加 vendor prefixes。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     lightningcssLoader: {
@@ -37,7 +37,7 @@ export default {
 
 当 `tools.lightningcssLoader` 是一个 function 时，默认选项会作为第一个参数传入，你可以直接修改这个对象，也可以返回一个新的对象作为最终使用的选项。比如：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     lightningcssLoader: (config) => {
@@ -54,7 +54,7 @@ export default {
 
 将 `tools.lightningcssLoader` 设置为 `false`，可以禁用 Rsbuild 内置的 `lightningcss-loader`：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     lightningcssLoader: false,
diff --git a/website/docs/zh/config/tools/postcss.mdx b/website/docs/zh/config/tools/postcss.mdx
index d928edc966..c71a75da4a 100644
--- a/website/docs/zh/config/tools/postcss.mdx
+++ b/website/docs/zh/config/tools/postcss.mdx
@@ -20,7 +20,7 @@ Rsbuild 默认集成 PostCSS，你可以通过 `tools.postcss` 对 [postcss-load
 
 例如，需要新增一个 PostCSS 插件，调用 [addPlugins](#addplugins) 工具函数即可：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     postcss: (opts, { addPlugins }) => {
@@ -32,7 +32,7 @@ export default {
 
 需要给 PostCSS 插件传递参数时，可以将 PostCSS 插件作为一个函数调用：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     postcss: (opts, { addPlugins }) => {
@@ -47,7 +47,7 @@ export default {
 
 也可以修改默认的 `postcss-loader` 选项：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     postcss: (opts) => {
@@ -59,7 +59,7 @@ export default {
 
 `tools.postcss` 可以返回一个配置对象，并完全替换默认配置：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     postcss: () => {
@@ -77,7 +77,7 @@ export default {
 
 当 `tools.postcss` 是一个 object 时，它会与默认配置通过 `Object.assign` 合并。注意 `Object.assign` 是浅拷贝，它会完全覆盖内置的 `plugins` 数组，请谨慎使用。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     postcss: {
@@ -98,7 +98,7 @@ export default {
 
 用于添加额外的 PostCSS 插件，你可以传入单个 PostCSS 插件，也可以传入 PostCSS 插件数组。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     postcss: (config, { addPlugins }) => {
@@ -119,7 +119,7 @@ export default {
 
 例如，为路径中包含 `foo` 的文件使用 `postcss-plugin-a`，为其他文件使用 `postcss-plugin-b`：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     postcss: {
diff --git a/website/docs/zh/config/tools/style-loader.mdx b/website/docs/zh/config/tools/style-loader.mdx
index 11d78a5088..642dd8288b 100644
--- a/website/docs/zh/config/tools/style-loader.mdx
+++ b/website/docs/zh/config/tools/style-loader.mdx
@@ -11,7 +11,7 @@
 
 当 `tools.styleLoader` 是一个 object 时，它会与默认配置通过 `Object.assign` 合并。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     styleLoader: {
@@ -25,7 +25,7 @@ export default {
 
 当 `tools.styleLoader` 是一个 function 时，默认选项会作为第一个参数传入，你可以直接修改这个对象，也可以返回一个新的对象作为最终使用的选项。比如：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     styleLoader: (config) => {
diff --git a/website/docs/zh/config/tools/swc.mdx b/website/docs/zh/config/tools/swc.mdx
index 34f757530d..54307f532f 100644
--- a/website/docs/zh/config/tools/swc.mdx
+++ b/website/docs/zh/config/tools/swc.mdx
@@ -41,7 +41,7 @@ const defaultOptions = {
 
 `tools.swc` 可以配置为一个对象，这个对象将会和内置的 `builtin:swc-loader` 选项进行深层合并。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     swc: {
@@ -57,7 +57,7 @@ export default {
 
 `tools.swc` 也可以配置为一个函数，这个函数接收一个参数，即内置的 `builtin:swc-loader` 选项，你可以对这个对象进行修改，然后返回一份新的配置。比如：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     swc: (config) => {