Markdown Elements Test

これはMarkdownの主要な要素をテストするためのドキュメントです。各要素のスタイリングを確認してください。

見出しレベル (Headings)

上記は H2 見出しです。以下に H3 と H4 を示します。

H3 見出し - サブセクション

H4 見出し - 詳細項目

---

テキスト装飾 (Text Formatting)

通常のテキストに加えて、太字（Bold）、斜体（Italic）、そして 太字斜体 を使用できます。

また、インラインコード はこのように表示されます。取り消し線 も使えます。

これはリンクテキストの例です。

---

リスト (Lists)

順序なしリスト

• 最初の項目
• 2番目の項目
• 3番目の項目
• 4番目の項目

順序付きリスト

1. ステップ1: 環境構築
2. ステップ2: 依存関係のインストール
3. ステップ3: 設定ファイルの編集
4. ステップ4: ビルドと確認

---

引用ブロック (Blockquotes)

デザインとは、単に見た目や感触のことではない。 デザインとは、どう機能するかだ。 — Steve Jobs

複数行の引用も正しく表示されるべきです。

これは別の引用です。 シンプルさは究極の洗練である。

---

コードブロック (Code Blocks)

JavaScript

// フィボナッチ数列の計算
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(`Fibonacci(10) = ${result}`);

TypeScript

interface BlogPost {
  title: string;
  description: string;
  pubDate: Date;
  category: 'Technical Art' | 'Photography' | 'Development';
  status: 'PUBLISHED' | 'DRAFT';
}

const post: BlogPost = {
  title: 'Test Post',
  description: 'A test post',
  pubDate: new Date(),
  category: 'Development',
  status: 'PUBLISHED',
};

CSS

.prose {
  color: var(--color-muted-foreground);
  line-height: 1.7;
}

.prose h2 {
  margin-top: 2rem;
  color: var(--color-foreground);
}

Shell

# Astro プロジェクトのセットアップ
npm create astro@latest my-blog
cd my-blog
npm install
npm run dev

---

画像 (Images)

以下はテスト画像です。

上記は円形のパターンを示すテスト画像です。

こちらはグラデーションを使用したテスト画像です。

---

テーブル (Tables)

プロパティ	型	説明
title	string	記事のタイトル
description	string	記事の説明文
pubDate	Date	公開日時
category	enum	カテゴリ
status	enum	公開ステータス

より複雑なテーブル:

Framework	Language	Stars	特徴
Astro	JavaScript	40k+	静的サイト生成に最適
Next.js	JavaScript	120k+	フルスタックReact
Nuxt	JavaScript	50k+	Vue.jsベース
SvelteKit	JavaScript	17k+	コンパイル型

---

混合コンテンツ (Mixed Content)

以下は、複数の要素を組み合わせた例です。

セットアップ手順

1. リポジトリをクローン

   git clone https://github.com/example/repo.git

2. 依存関係をインストール

   npm install

3. 環境変数を設定

   • .env.example を .env にコピー
   • 必要な値を入力

4. 開発サーバーを起動

   npm run dev

注意: Node.js 18以上が必要です。

---

長文テスト (Long Paragraph)

これは長い段落のテストです。ブログ記事では、ある程度の長さの文章が含まれることが一般的です。この段落は、テキストの読みやすさ、行間、そして全体的なタイポグラフィのバランスを確認するためのものです。適切な行の長さ、文字間隔、そして行間は、読者が内容を快適に消費できるかどうかに大きく影響します。

デザインにおいて、タイポグラフィは最も重要な要素の一つです。フォントの選択、サイズ、ウェイト、そして色のコントラストは、すべて読みやすさに寄与します。このブログでは、Geist Sans と VT323 フォントを組み合わせて、モダンでテクニカルな雰囲気を演出しています。

---

最終確認

すべての要素が正しく表示されていれば、このテストは成功です。

• 見出し (H2, H3, H4)
• テキスト装飾 (Bold, Italic, Code)
• リスト (UL, OL)
• 引用ブロック
• コードブロック
• 画像
• テーブル
• 水平線

EOF