MDXブログ機能のデモ

このブログではMDXを使って、リッチなコンテンツを書くことができます。

コールアウト

重要な情報を目立たせるためのコールアウトコンポーネントです。

コードブロック

シンタックスハイライト付きのコードブロックです。右上のボタンでコピーできます。

interface User {
  id: string;
  name: string;
  email: string;
}

async function getUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

インラインコードも使えます: const x = 1 のように書きます。

テーブル

タスクリスト

• MDX統合
• Calloutコンポーネント
• コードブロックのコピーボタン
• ダークモード対応（予定）

引用

シンプルに書けて、美しく表示される。 それがこのブログの目標です。

リンクカード

画像

通常のMarkdown記法で画像を挿入できます。

まとめ

このブログでは以下の機能が使えます：

1. Markdown - 基本的な記法すべて
2. GFM - テーブル、タスクリスト、取り消し線
3. MDX - Astroコンポーネントの埋め込み
4. シンタックスハイライト - Shikiによる美しいコードハイライト
5. コールアウト - 4種類（info, tip, warning, danger）
6. リンクカード - 外部リンクの美しい表示

書きやすく、読みやすいブログを目指しています。