diff --git a/docs/src/content/docs/zh-cn/guides/components.mdx b/docs/src/content/docs/zh-cn/guides/components.mdx
index 66082ba6bf8..1f863138fe3 100644
--- a/docs/src/content/docs/zh-cn/guides/components.mdx
+++ b/docs/src/content/docs/zh-cn/guides/components.mdx
@@ -16,7 +16,7 @@ Starlight 支持在 [MDX](https://mdxjs.com/) 文件中使用组件，并提供
 
 ```mdx
 ---
-# src/content/docs/index.mdx
+# src/content/docs/example.mdx
 title: 欢迎来到我的文档
 ---
 
@@ -37,7 +37,7 @@ Starlight 为你的 Markdown 内容应用了默认样式，例如在元素之间
 
 如果这些样式与你的组件的外观冲突，请在组件上设置 `not-content` 类来禁用它们。
 
-```astro
+```astro 'class="not-content"'
 ---
 // src/components/Example.astro
 ---
@@ -60,6 +60,8 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 每个 `<TabItem>` 必须有一个 `label` 来显示给用户。
 
 ```mdx
+# src/content/docs/example.mdx
+
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 <Tabs>
@@ -85,6 +87,8 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
 `<Card>` 需要一个 `title`，并且可以选择包含一个 `icon` 属性，该属性设置为 [Starlight 内置图标](#所有图标) 之一的名称。
 
 ```mdx
+# src/content/docs/example.mdx
+
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
 <Card title="看看这个">你想要突出显示的有趣内容。</Card>
@@ -133,6 +137,8 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
 当有足够的空间时，将多个 `<LinkCard>` 组件组合在 `<CardGrid>` 中，以便并排显示卡片。
 
 ```mdx
+# src/content/docs/example.mdx
+
 import { LinkCard, CardGrid } from '@astrojs/starlight/components';
 
 <LinkCard
@@ -172,6 +178,8 @@ Starlight 提供了一组常用的图标，你可以使用 `<Icon>` 组件在你
 每个 `<Icon>` 都需要一个 [`name`](#所有图标)，并且可以选择包含 `label`、`size` 和 `color` 属性。
 
 ```mdx
+# src/content/docs/example.mdx
+
 import { Icon } from '@astrojs/starlight/components';
 
 <Icon name="star" color="goldenrod" size="2rem" />
diff --git a/docs/src/content/docs/zh-cn/guides/css-and-tailwind.mdx b/docs/src/content/docs/zh-cn/guides/css-and-tailwind.mdx
index 08088bd2fd6..b0c527ed04f 100644
--- a/docs/src/content/docs/zh-cn/guides/css-and-tailwind.mdx
+++ b/docs/src/content/docs/zh-cn/guides/css-and-tailwind.mdx
@@ -22,7 +22,7 @@ description: 了解如何使用自定义 CSS 设置你的 Starlight 网站的样
 
 2. 在 `astro.config.mjs` 中的 `customCss` 数组中添加你的 CSS 文件的路径：
 
-   ```js
+   ```diff lang="js"
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import starlight from '@astrojs/starlight';
@@ -32,8 +32,8 @@ description: 了解如何使用自定义 CSS 设置你的 Starlight 网站的样
    		starlight({
    			title: 'Docs With Custom CSS',
    			customCss: [
-   				// 你的自定义 CSS 文件的相对路径
-   				'./src/styles/custom.css',
+   +				// 你的自定义 CSS 文件的相对路径
+   +				'./src/styles/custom.css',
    			],
    		}),
    	],
diff --git a/docs/src/content/docs/zh-cn/guides/customization.mdx b/docs/src/content/docs/zh-cn/guides/customization.mdx
index c180f4769c4..50aab6bb8d9 100644
--- a/docs/src/content/docs/zh-cn/guides/customization.mdx
+++ b/docs/src/content/docs/zh-cn/guides/customization.mdx
@@ -27,7 +27,7 @@ Starlight 提供了合理的默认样式和功能，因此你可以快速开始
 
 2. 在 `astro.config.mjs` 中，将 logo 的路径添加到 Starlight 的 [`logo.src`](/zh-cn/reference/configuration/#logo) 选项：
 
-   ```js
+   ```diff lang="js"
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import starlight from '@astrojs/starlight';
@@ -37,7 +37,7 @@ Starlight 提供了合理的默认样式和功能，因此你可以快速开始
    		starlight({
    			title: '带有我的标志的页面',
    			logo: {
-   				src: './src/assets/my-logo.svg',
+   +				src: './src/assets/my-logo.svg',
    			},
    		}),
    	],
@@ -48,7 +48,7 @@ Starlight 提供了合理的默认样式和功能，因此你可以快速开始
 如果你的 logo 图像已经包含了网站标题，你可以通过设置 `replacesTitle` 选项来在视觉上隐藏标题文本。
 标题文本仍包含在屏幕阅读器中，以便标题保持可访问性。
 
-```js
+```js {5}
 starlight({
   title: '带有我的 logo 的页面',
   logo: {
@@ -77,12 +77,12 @@ starlight({
 
 2. 在 `astro.config.mjs` 中，将 logo 变体的路径添加为 `light` 和 `dark` 选项，而不是 `src`：
 
-   ```js
+   ```diff lang="js"
    starlight({
      title: '带有我的标志的页面',
      logo: {
-       light: './src/assets/light-logo.svg',
-       dark: './src/assets/dark-logo.svg',
+   +    light: './src/assets/light-logo.svg',
+   +    dark: './src/assets/dark-logo.svg',
      },
    }),
    ```
@@ -91,7 +91,7 @@ starlight({
 
 Starlight 内置了生成站点地图（sitemap）的支持。通过在 `astro.config.mjs` 中把 `site` 字段设置为你的 URL 来启用站点地图生成：
 
-```js
+```js {4}
 // astro.config.mjs
 export default defineConfig({
 	site: 'https://stargazers.club',
@@ -106,7 +106,7 @@ export default defineConfig({
 你可以通过在页面的正文中设置 [`template: splash`](/zh-cn/reference/frontmatter/#template) 来应用更宽的页面布局，而去除侧边栏。
 这对于主页面特别有效，你可以在本站点的[主页](/zh-cn/)上看到它的效果。
 
-```md
+```md {5}
 ---
 # src/content/docs/index.md
 
@@ -124,7 +124,7 @@ Starlight 在每个页面上显示目录，使读者更容易跳转到他们正
 <Tabs>
   <TabItem label="Frontmatter">
 
-```md
+```md {4-6}
 ---
 # src/content/docs/example.md
 title: 只在目录中包含 H2 的页面
@@ -137,13 +137,13 @@ tableOfContents:
   </TabItem>
   <TabItem label="全局配置">
 
-```js
+```js {7}
 // astro.config.mjs
 
 defineConfig({
 	integrations: [
 		starlight({
-			title: '',
+			title: '具有自定义目录配置的文档',
 			tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 2 },
 		}),
 	],
@@ -158,7 +158,7 @@ defineConfig({
 <Tabs>
   <TabItem label=" frontmatter ">
 
-```md
+```md {4}
 ---
 # src/content/docs/example.md
 title: 没有目录的页面
@@ -169,7 +169,7 @@ tableOfContents: false
   </TabItem>
   <TabItem label="全局配置">
 
-```js
+```js {7}
 // astro.config.mjs
 
 defineConfig({
@@ -192,7 +192,7 @@ Starlight 内置了对通过 Starlight 集成中的 [`social`](/zh-cn/reference/
 你可以在 [配置参考](/zh-cn/reference/configuration/#social) 中找到完整的支持链接图标列表。
 如果你需要支持其他服务，请在 GitHub 或 Discord 上告诉我们！
 
-```js
+```js {9-12}
 // astro.config.mjs
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
@@ -225,7 +225,7 @@ Starlight 可以在每个页面的页脚中显示“编辑此页”链接。这
 
 下面的示例显示了为 Starlight 文档配置的编辑链接，这些文档位于 GitHub 上名为 `withastro/starlight` 的存储库的 `main` 分支的 `docs/` 子目录中：
 
-```js
+```js {9-11}
 // astro.config.mjs
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
@@ -259,8 +259,9 @@ Starlight 网站默认显示一个简单的 404 页面。你可以通过向 `src
 
 你可以在 404 页面中使用 Starlight 的所有页面布局和自定义技术。例如，默认的404页面在 frontmatter 中使用 [`splash`](#页面布局) 模板和 [`hero`](/zh-cn/reference/frontmatter/#hero) 组件：
 
-```md
+```md {4,6-8}
 ---
+# src/content/docs/404.md
 title: '404'
 template: splash
 editUrl: false
@@ -312,7 +313,7 @@ hero:
 
 3. 将 `font-face.css` 文件的路径添加到 Starlight 的 `astro.config.mjs` 配置文件中的 `customCss` 数组中：
 
-   ```js
+   ```diff lang="js"
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import starlight from '@astrojs/starlight';
@@ -322,8 +323,8 @@ hero:
    		starlight({
    			title: '使用自定义字体的页面',
    			customCss: [
-   				// @font-face CSS文件的相对路径。
-   				'./src/fonts/font-face.css',
+   +			// @font-face CSS文件的相对路径。
+   +			'./src/fonts/font-face.css',
    			],
    		}),
    	],
@@ -368,7 +369,7 @@ hero:
 
 3.  将 Fontsource 的 CSS 文件添加到 Starlight 的 `astro.config.mjs` 配置文件中的 `customCss` 数组中：
 
-    ```js
+    ```diff lang="js"
     // astro.config.mjs
     import { defineConfig } from 'astro/config';
     import starlight from '@astrojs/starlight';
@@ -378,9 +379,9 @@ hero:
     		starlight({
     			title: '使用自定义字体的文档',
     			customCss: [
-    				// 用于普通和半粗字重的Fontsource文件。
-    				'@fontsource/ibm-plex-serif/400.css',
-    				'@fontsource/ibm-plex-serif/600.css',
+    +				// 用于普通和半粗字重的 Fontsource 文件。
+    +				'@fontsource/ibm-plex-serif/400.css',
+    +				'@fontsource/ibm-plex-serif/600.css',
     			],
     		}),
     	],
diff --git a/docs/src/content/docs/zh-cn/guides/sidebar.mdx b/docs/src/content/docs/zh-cn/guides/sidebar.mdx
index b54c6469964..7fd59555c7a 100644
--- a/docs/src/content/docs/zh-cn/guides/sidebar.mdx
+++ b/docs/src/content/docs/zh-cn/guides/sidebar.mdx
@@ -59,7 +59,7 @@ import SidebarPreview from '../../../../components/sidebar-preview.astro';
 
 使用具有 `label` 和 `link` 属性的对象添加一个指向内部或外部页面的链接。
 
-```js
+```js "label:" "link:"
 starlight({
 	sidebar: [
 		// 指向 CSS & Styling 指南的链接
@@ -88,7 +88,7 @@ starlight({
 `label` 将用作分组的标题。
 将链接或子组添加到 `items` 数组中。
 
-```js
+```js /^\s*(label:|items:)/
 starlight({
 	sidebar: [
 		// 一个名为 "Guides" 的链接分组
@@ -140,7 +140,7 @@ Starlight 可以根据文档目录在侧边栏中自动生成一个分组。当
 
 使用具有 `label` 和 `autogenerate` 属性的对象添加自动生成的分组。`autogenerate` 的配置必须指定用于侧边栏条目的 `directory` 。例如，使用以下配置：
 
-```js
+```js  "label:" "autogenerate:"
 starlight({
 	sidebar: [
 		{
@@ -193,8 +193,9 @@ starlight({
 
 侧边栏 frontmatter 选项允许你设置 [自定义标签](/zh-cn/reference/frontmatter/#label) 或者为链接添加 [徽章](/zh-cn/reference/frontmatter/#badge)，[隐藏](/zh-cn/reference/frontmatter/#hidden) 侧边栏中的链接，或者定义 [自定义排序权重](/zh-cn/reference/frontmatter/#order)。
 
-```md
+```md "sidebar:"
 ---
+# src/content/docs/example.md
 title: 我的页面
 sidebar:
   # 为链接设置自定义标签
@@ -235,7 +236,7 @@ sidebar:
 
 链接、分组、自动生成的分组都可以包含一个 `badge` 属性，以在它们的标签旁边显示徽章。
 
-```js
+```js {10,17}
 starlight({
 	sidebar: [
 		{
@@ -301,7 +302,7 @@ starlight({
 `text` 属性表示要显示的内容（例如 "New"）。
 通过将 `variant` 属性设置为以下值之一：`note`、`tip`、`danger`、`caution` 或 `success`，可以覆盖 `default` 样式，默认样式使用你的网站的强调色。
 
-```js
+```js {10}
 starlight({
 	sidebar: [
 		{
@@ -342,7 +343,7 @@ starlight({
 
 在下面的例子中，通过 `attrs` 添加了一个 `target="_blank"` 属性，使得链接在新标签页中打开，并应用了一个自定义的 `style` 属性使链接标签变为斜体：
 
-```js
+```js {10}
 starlight({
 	sidebar: [
 		{
@@ -386,7 +387,7 @@ starlight({
 
 `label` 属性将用于默认语言和没有翻译的语言。
 
-```js
+```js {5-7,11-13,18-20}
 starlight({
 	sidebar: [
 		{
@@ -433,7 +434,7 @@ starlight({
 
 链接分组可以通过将 `collapsed` 属性设置为 `true` 来默认折叠。
 
-```js
+```js {5-6}
 starlight({
 	sidebar: [
 		{
@@ -466,7 +467,7 @@ starlight({
 
 [自动生成的分组](#自动生成的分组) 遵循其父级分组的 `collapsed` 值：
 
-```js
+```js {5-6}
 starlight({
 	sidebar: [
 		{
@@ -503,7 +504,7 @@ starlight({
 
 这个行为可以通过定义 `autogenerate.collapsed` 属性来覆盖。
 
-```js
+```js {5-7} "collapsed: true"
 starlight({
 	sidebar: [
 		{
diff --git a/docs/src/content/docs/zh-cn/manual-setup.mdx b/docs/src/content/docs/zh-cn/manual-setup.mdx
index 4c1cef8f0e9..4c2fadf2522 100644
--- a/docs/src/content/docs/zh-cn/manual-setup.mdx
+++ b/docs/src/content/docs/zh-cn/manual-setup.mdx
@@ -44,7 +44,7 @@ Starlight 集成在 `astro.config.mjs` 文件中配置。
 
 添加一个 `title` 以开始：
 
-```js {7-9}
+```js ins={8}
 // astro.config.mjs
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';