docs: update config file examples with title

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/',

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,

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,

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: {

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.'),

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: {}, // ✅

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: {

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',

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 }) {

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 }) {

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: {

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',

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',

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: [

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 }) {

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 }) {

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: '',

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/',

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/**'] } }],

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: {

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: {

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',