i18n(ja): Update components.mdx (#1206)

Co-authored-by: HiDeoo <[email protected]>

docs/src/content/docs/ja/guides/components.mdx

@@ -13,7 +13,7 @@ description: StarlightにおけるMDXでのコンポーネントの利用。
 
 ```mdx
 ---
-# src/content/docs/index.mdx
+# src/content/docs/example.mdx
 title: Welcome to my docs
 ---
 
@@ -33,7 +33,7 @@ StarlightはAstro製であるため、[サポート対象のUIフレームワー
 
 Starlightは、Markdownコンテンツにデフォルトのスタイルを適用します。たとえば、要素間にマージンを追加します。これらのスタイルがコンポーネントの見た目と競合する場合は、`not-content`クラスをコンポーネントに設定してスタイルを無効化してください。
 
-```astro
+```astro 'class="not-content"'
 ---
 // src/components/Example.astro
 ---
@@ -54,6 +54,8 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 `<Tabs>`と`<TabItem>`コンポーネントを使用して、タブインターフェースを表示できます。各`<TabItem>`は、ユーザーに表示する`label`を必要とします。
 
 ```mdx
+# src/content/docs/example.mdx
+
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 <Tabs>
@@ -78,6 +80,8 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
 `<Card>`は`title`を必須とし、また任意で[Starlightの組み込みアイコンの1つ](#すべてのアイコン)を名前に設定した`icon`属性を含められます。
 
 ```mdx
+# src/content/docs/example.mdx
+
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
 <Card title="確認しよう">強調したい興味深いコンテンツ。</Card>
@@ -125,6 +129,8 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
 十分なスペースがある場合、`<CardGrid>`により複数の`<LinkCard>`をグループ化して、カードを並べて表示できます。
 
 ```mdx
+# src/content/docs/example.mdx
+
 import { LinkCard, CardGrid } from '@astrojs/starlight/components';
 
 <LinkCard
@@ -170,6 +176,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" />