MDX記法ガイド - 記事の書き方

このブログでは、MDX形式で記事を書くことができます。MDXはMarkdownにJSXを組み合わせたもので、通常のMarkdown記法に加えてカスタムコンポーネントを使うことができます。

基本のMarkdown記法

見出し

見出しは # の数で階層を表します。

# 見出し1（H1）
## 見出し2（H2）
### 見出し3（H3）
#### 見出し4（H4）

テキストの装飾

**太字** または __太字__
*イタリック* または _イタリック_
~~取り消し線~~
`インラインコード`

結果: 太字、イタリック、取り消し線、インラインコード

リスト

箇条書きリスト

- 項目1
- 項目2
  - ネストした項目
  - ネストした項目
- 項目3

• 項目1
• 項目2
  • ネストした項目
  • ネストした項目
• 項目3

番号付きリスト

1. 最初の項目
2. 2番目の項目
3. 3番目の項目

1. 最初の項目
2. 2番目の項目
3. 3番目の項目

リンクと画像

[リンクテキスト](https://example.com)
![画像の説明](/images/example.jpg)

引用

> これは引用文です。
> 複数行にまたがることもできます。

これは引用文です。 複数行にまたがることもできます。

コードブロック

言語を指定してシンタックスハイライトを適用できます。

```javascript
function hello() {
  console.log("Hello, World!");
}
```

function hello() {
  console.log("Hello, World!");
}

テーブル

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| A   | B   | C   |
| D   | E   | F   |

水平線

---

カスタムコンポーネント

このブログでは、以下のカスタムコンポーネントを使うことができます。

Callout（コールアウト）

重要な情報を目立たせるためのコンポーネントです。5つのタイプがあります。

<Callout type="info">
  情報を伝えるコールアウトです。
</Callout>

<Callout type="tip">
  役立つヒントを伝えるコールアウトです。
</Callout>

<Callout type="warning">
  注意が必要な内容を伝えるコールアウトです。
</Callout>

<Callout type="error">
  エラーや危険な操作について伝えるコールアウトです。
</Callout>

<Callout type="success">
  成功や完了を伝えるコールアウトです。
</Callout>

カスタムタイトルも設定できます：

<Callout type="info" title="カスタムタイトル">
  タイトルを変更したコールアウトです。
</Callout>

Card（カード）

情報をカード形式で表示します。

<Card title="カードタイトル" icon="📝">
  カードの内容をここに書きます。
</Card>

リンク付きカードも作成できます：

<Card title="外部リンク" href="https://astro.build" icon="🚀">
  クリックするとリンク先に移動します。
</Card>

CardGrid（カードグリッド）

複数のカードをグリッド表示します。

<CardGrid cols={2}>
  <Card title="カード1" icon="1️⃣">
    1つ目のカード
  </Card>
  <Card title="カード2" icon="2️⃣">
    2つ目のカード
  </Card>
</CardGrid>

cols={3} で3列表示も可能です：

Steps（ステップ）

手順を順番に説明するためのコンポーネントです。

<Steps>
  <Step title="プロジェクトを作成" step={1}>
    まず新しいプロジェクトを作成します。
  </Step>
  <Step title="依存関係をインストール" step={2}>
    必要なパッケージをインストールします。
  </Step>
  <Step title="開発サーバーを起動" step={3}>
    開発サーバーを起動して確認します。
  </Step>
</Steps>

Tabs（タブ）

コンテンツをタブで切り替えて表示します。

<Tabs items={["JavaScript", "TypeScript", "Python"]}>
  <TabPanel>
    JavaScriptのコード例です。
  </TabPanel>
  <TabPanel>
    TypeScriptのコード例です。
  </TabPanel>
  <TabPanel>
    Pythonのコード例です。
  </TabPanel>
</Tabs>

function greet(name) {
  return `Hello, ${name}!`;
}

function greet(name: string): string {
  return `Hello, ${name}!`;
}

def greet(name):
    return f"Hello, {name}!"

記事のフロントマター

各記事の先頭には、以下のようなフロントマターを記述します：

---
title: '記事のタイトル'
description: '記事の説明文（SEOに使用されます）'
date: 2024-04-16
tags: ['タグ1', 'タグ2']
image: '/images/og-image.jpg'  # オプション: OGP画像
draft: true  # オプション: 下書き状態にする
---

コンポーネントのインポート

記事でカスタムコンポーネントを使うには、フロントマターの直後にインポート文を追加します：

---
title: '記事タイトル'
---

import Callout from '@/components/mdx/Callout.astro';
import Card from '@/components/mdx/Card.astro';
import CardGrid from '@/components/mdx/CardGrid.astro';
import Steps from '@/components/mdx/Steps.astro';
import Step from '@/components/mdx/Step.astro';
import Tabs from '@/components/mdx/Tabs.astro';
import TabPanel from '@/components/mdx/TabPanel.astro';

本文をここに書きます...

以上がこのブログで使える記法とコンポーネントの一覧です。これらを組み合わせて、読みやすく美しい記事を作成してください。