Skip to content

i18n(ja): add markdown-content.mdx and update mdx.mdx #13970

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
morinokami merged 3 commits into from
Jun 6, 2026
Merged

i18n(ja): add markdown-content.mdx and update mdx.mdx #13970

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b51ba38
i18n(ja): add `markdown-content.mdx`
morinokami Jun 2, 2026
3e6339a
fix broken linkes and update `mdx.mdx`
morinokami Jun 2, 2026
b7dfb3b
Merge branch 'main' into i18n-ja-markdown-content-1
morinokami Jun 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/content/docs/ja/basics/layouts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ const { title, description, publishDate, viewCount } = Astro.props;

ページレイアウトは、ページフォーマットをもたない個別のMarkdownページにとって特に便利です。

Astroは、[ファイルベースルーティングを使用して`src/pages/`内に配置される個別の`.md`ファイル](/ja/guides/markdown-content/#individual-markdown-pages)向けに、特別な`layout`フロントマタープロパティを提供しています。これにより、ページレイアウトとして使用する`.astro`コンポーネントを指定できます。このコンポーネントを使用すると、メタタグ(例: `<meta charset="utf-8">`)やスタイルなどの`<head>`コンテンツをMarkdownページに提供できます。デフォルトでは、指定されたコンポーネントはMarkdownファイルからデータに自動的にアクセスできます。
Astroは、[ファイルベースルーティングを使用して`src/pages/`内に配置される個別の`.md`ファイル](/ja/guides/markdown-content/#個別のmarkdownページ)向けに、特別な`layout`フロントマタープロパティを提供しています。これにより、ページレイアウトとして使用する`.astro`コンポーネントを指定できます。このコンポーネントを使用すると、メタタグ(例: `<meta charset="utf-8">`)やスタイルなどの`<head>`コンテンツをMarkdownページに提供できます。デフォルトでは、指定されたコンポーネントはMarkdownファイルからデータに自動的にアクセスできます。

ただし[コンテンツコレクション](/ja/guides/content-collections/)を使ってコンテンツをクエリ・レンダリングする場合、このプロパティは特別なものとして認識されません。

Expand Down Expand Up @@ -192,7 +192,7 @@ Markdownレイアウトは、`Astro.props`を介して次の情報にアクセ
- **`compiledContent()`** - MarkdownドキュメントをHTML文字列にコンパイルして返すasync関数。

:::note
Markdownレイアウトは、`Astro.props`からMarkdownファイルの[利用可能なプロパティ](/ja/guides/markdown-content/#available-properties)すべてにアクセスできますが、**2つの重要な違いがあります:**
Markdownレイアウトは、`Astro.props`からMarkdownファイルの[利用可能なプロパティ](/ja/guides/markdown-content/#利用可能なプロパティ)すべてにアクセスできますが、**2つの重要な違いがあります:**

* 見出し情報（つまり`h1 -> h6`要素）は、`getHeadings()`関数ではなく、`headings`配列を介して利用できます。

Expand Down
77 changes: 51 additions & 26 deletions src/content/docs/ja/guides/integrations-guide/mdx.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ Astroには、公式インテグレーションのセットアップを自動化
yarn astro add mdx
```
</Fragment>
</PackageManagerTabs>
</PackageManagerTabs>

問題が発生した場合は、[GitHubで報告してください](https://github.com/withastro/astro/issues)。そして、以下の手動インストール手順を試してください。

Expand Down Expand Up @@ -96,9 +96,9 @@ MDXインテグレーションを追加すると、JSX変数、式、コンポ

`.mdx`ファイルは、AstroのHTMLライクな構文ではなく、[MDX構文](https://mdxjs.com/docs/what-is-mdx/#mdx-syntax)で記述する必要があります。

### コンテンツコレクションでMDXを使用する
### コンテンツコレクションでローカルのMDXを使用する

コンテンツコレクションにMDXファイルを含めるには、[コレクションローダー](/ja/guides/content-collections/#build-time-collection-loaders)が`.mdx`ファイルからコンテンツをロードするように設定されていることを確認してください。
コンテンツコレクションにローカルのMDXファイルを含めるには、[コレクションローダー](/ja/guides/content-collections/#build-time-collection-loaders)が`.mdx`ファイルからコンテンツをロードするように設定されていることを確認してください。

```js title="src/content.config.ts" ins="mdx"
import { defineCollection } from 'astro:content';
Expand Down Expand Up @@ -214,12 +214,12 @@ export const components = {blockquote: Blockquote}
カスタムコンポーネントとして上書きできるHTML要素の完全なリストについては、[MDXのウェブサイト](https://mdxjs.com/table-of-components/)を参照してください。

:::note
MDXファイル内で定義およびエクスポートされたカスタムコンポーネントは、常にインポートしてから 、`components`プロパティを介して`<Content />`コンポーネントに渡す必要があります。
MDXファイル内で定義およびエクスポートされたカスタムコンポーネントは、常にインポートしてから、`components`プロパティを介して`<Content />`コンポーネントに渡す必要があります。
:::

#### `components`をMDXコンテンツに渡す

コンテンツコレクションによるMDXエントリなど、インポートしたMDXコンテンツを`<Content />`コンポーネントでレンダリングする場合`components`propsを介してカスタムコンポーネントを渡すことができます。これらのコンポーネントは、`<Content />`コンポーネントで使用できるようにするために、まずインポートする必要があります。
コンテンツコレクションによるMDXエントリなど、インポートしたMDXコンテンツを`<Content />`コンポーネントでレンダリングする場合、`components`propsを介してカスタムコンポーネントを渡すことができます。これらのコンポーネントは、`<Content />`コンポーネントで使用できるようにするために、まずインポートする必要があります。

`components`オブジェクトは、HTML要素名(`h1`、`h2`、`blockquote`など)をカスタムコンポーネントにマッピングします。また、スプレッド演算子(`...`)を使用して、[MDXファイル自体からエクスポートされたすべてのコンポーネント](#html要素へのカスタムコンポーネントの割り当て)を含めることもできます。これらはMDXファイルから`components`としてインポートする必要があります。

Expand Down Expand Up @@ -255,16 +255,18 @@ MDXインテグレーションをインストールすると、Astroプロジェ
次のオプションを使用して、MDXのレンダリング方法を設定できます。

* [Markdown設定から継承されたオプション](#markdown設定から継承されたオプション)
* [`processor`](#processor)
* [`extendMarkdownConfig`](#extendmarkdownconfig)
* [`recmaPlugins`](#recmaplugins)
* [`optimize`](#optimize)

### Markdown設定から継承されたオプション

すべての[`markdown`設定オプション](/ja/reference/configuration-reference/#markdown-options)は、MDXインテグレーションで個別に設定できます。これには、remarkおよびrehypeプラグイン、構文ハイライトなどが含まれます。オプションは、Markdown設定のオプションにデフォルト設定されます（これを変更するには、[`extendMarkdownConfig`オプション](#extendmarkdownconfig)を参照してください）。
すべての[`markdown`設定オプション](/ja/reference/configuration-reference/#markdown-options)は、MDXインテグレーションで個別に設定できます。これには[Markdownプロセッサ](#processor)や構文ハイライトなどが含まれます。オプションは、Markdown設定のオプションにデフォルト設定されます（これを変更するには、[`extendMarkdownConfig`オプション](#extendmarkdownconfig)を参照してください）。

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import { unified } from '@astrojs/markdown-remark';
import mdx from '@astrojs/mdx';
import remarkToc from 'remark-toc';
import rehypePresetMinify from 'rehype-preset-minify';
Expand All @@ -275,21 +277,44 @@ export default defineConfig({
mdx({
syntaxHighlight: 'shiki',
shikiConfig: { theme: 'dracula' },
remarkPlugins: [remarkToc],
rehypePlugins: [rehypePresetMinify],
remarkRehype: { footnoteLabel: 'Footnotes' },
gfm: false,
processor: unified({
remarkPlugins: [remarkToc],
rehypePlugins: [rehypePresetMinify],
remarkRehype: { footnoteLabel: 'Footnotes' },
gfm: false
}),
}),
],
});
```

:::caution
MDXは、remarkおよびrehypeプラグインを文字列として渡すことをサポートしていません。代わりに、プラグイン関数をインストール、インポート、および適用する必要があります。
:::

<ReadMore>オプションの完全なリストについては、[Markdownオプションのリファレンス](/ja/reference/configuration-reference/#markdown-options)を参照してください。</ReadMore>

### `processor`

<p>

**Type:** `MarkdownProcessor`<br />
**Default:** [`markdown.processor`](/ja/reference/configuration-reference/#markdownprocessor)から継承<br />
<Since v="6.0.0" pkg="@astrojs/mdx" />
</p>

デフォルトでは、`.mdx`ファイルは`.md`ファイルと同じ[Markdownプロセッサ](/ja/guides/markdown-content/#markdownプロセッサの選択)でレンダリングされます。`.mdx`ファイルにのみ別のプロセッサ、または同じプロセッサを異なるオプションで使用したい場合は、`processor`を設定します。

たとえば、`.md`ファイルにはデフォルトのremark/rehypeプロセッサを使い続けながら、`.mdx`ファイルは`@astrojs/markdown-satteri`を使って[Sätteri](https://satteri.bruits.org/)でレンダリングするには、次のようにします。

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import { satteri } from '@astrojs/markdown-satteri';
import mdx from '@astrojs/mdx';

export default defineConfig({
integrations: [
mdx({ processor: satteri() }),
],
});
```

### `extendMarkdownConfig`

<p>
Expand All @@ -301,28 +326,27 @@ MDXは、remarkおよびrehypeプラグインを文字列として渡すこと

MDXは、デフォルトで[プロジェクトの既存のMarkdown設定](/ja/reference/configuration-reference/#markdown-options)を拡張します。個々のオプションを上書きするには、MDX設定で同等のオプションを指定します。

たとえば、GitHub-Flavored Markdownを無効にし、MDXファイルに別のremarkプラグインのセットを適用する必要があるとします。`extendMarkdownConfig`をデフォルトで有効にしたまま、これらのオプションを次のように適用できます。
たとえば、`.mdx`ファイルに別の構文ハイライターと別のプラグインのセットが必要だとします。`extendMarkdownConfig`をデフォルトで有効にしたまま、これらのオプションを次のように適用できます。

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import { unified } from '@astrojs/markdown-remark';
import mdx from '@astrojs/mdx';

export default defineConfig({
// ...
markdown: {
syntaxHighlight: 'prism',
remarkPlugins: [remarkPlugin1],
gfm: true,
processor: unified({ remarkPlugins: [remarkPlugin1] }),
},
integrations: [
mdx({
// Markdownから継承された`syntaxHighlight`
// Markdownの`syntaxHighlight`が上書きされ、
// `.mdx`ファイルでは代わりにShikiが使われます。
syntaxHighlight: 'shiki',

// Markdownの`remarkPlugins`は無視され、
// `remarkPlugin2`のみが適用されます。
remarkPlugins: [remarkPlugin2],
// `gfm`は`false`に上書きされます
gfm: false,
// `markdown.processor`は、このオプションによって`.mdx`ファイル用に上書きされます
processor: unified({ remarkPlugins: [remarkPlugin2] }),
}),
],
});
Expand All @@ -332,18 +356,19 @@ MDXで`markdown`設定の拡張を無効にする必要がある場合もあり

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import { unified } from '@astrojs/markdown-remark';
import mdx from '@astrojs/mdx';

export default defineConfig({
// ...
markdown: {
remarkPlugins: [remarkPlugin1],
processor: unified({ remarkPlugins: [remarkPlugin] }),
},
integrations: [
mdx({
// Markdown設定は無視されます
// Markdown設定は無視されるようになります
extendMarkdownConfig: false,
// `remarkPlugins`は適用されません
// デフォルトの`unified()`プロセッサが使われます
}),
],
});
Expand Down
Loading
Loading