H1 見出し

本文テキストです。Markdown の基本的なレンダリング確認用です。

H2 見出し

これは段落です。日本語、English text, 数字 12345、記号 !?@#$%^&*() を含みます。

H3 見出し

太字、斜体、太字かつ斜体、取り消し線、inline code の確認です。

H4 見出し

リンクの確認です。

Astro 公式サイト

外部リンク target 確認用

H5 見出し

画像の確認です。

H6 見出し

段落

これは通常の段落です。長めの文章を入れて、行間、文字サイズ、最大幅、折り返しを確認します。Astro と Tailwind CSS Typography を組み合わせた場合、.prose クラスによって段落、見出し、リスト、引用、コードブロックなどに標準的なスタイルが適用されます。

これは別の段落です。段落間の余白を確認します。

改行を確認します。
この行は前の行から Markdown の強制改行で続いています。

強調

これは太字です

これは斜体です

これは太字かつ斜体です

これは取り消し線です

これはインラインコードです

リスト

箇条書きリスト

• アイテム 1
• アイテム 2
• アイテム 3
  • ネスト 1
  • ネスト 2
    • ネスト 2-1
    • ネスト 2-2
• アイテム 4

番号付きリスト

1. 最初の項目
2. 2番目の項目
3. 3番目の項目
   1. ネストされた番号付き項目
   2. ネストされた番号付き項目
4. 4番目の項目

チェックリスト

• 完了済みタスク
• 未完了タスク
• Astro の確認
• Tailwind CSS Typography の調整

引用

これは引用文です。 複数行の引用を確認します。

引用内の見出し

引用内の段落です。

• 引用内リスト 1
• 引用内リスト 2

引用内コード

コード

インラインコード

本文中に const message = "Hello Astro"; のようなコードを含めます。

コードブロック

const siteName = "Astro Site";

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

console.log(greet(siteName));

type User = {
  id: number;
  name: string;
  isAdmin: boolean;
};

const user: User = {
  id: 1,
  name: "Taro",
  isAdmin: false,
};

<article class="prose">
  <h1>Hello Astro</h1>
  <p>This is a paragraph.</p>
</article>

.prose img {
  border-radius: 0.75rem;
}

npm create astro@latest
npm install @tailwindcss/typography
npm run dev

テーブル

整列付きテーブル

区切り線

上の要素

下の要素

別の区切り線

HTML 混在

定義リスト風

HTML の dl を使った定義リストです。

Astro

静的サイト生成やコンテンツサイトに向いた Web フレームワーク。

Tailwind CSS Typography

Markdown や CMS コンテンツ向けのタイポグラフィプリセット。

数式風テキスト

インライン数式風: E = mc^2

ブロック数式風:

a^2 + b^2 = c^2

エスケープ

*これは斜体になりません*

# これは見出しになりません

`これはコードになりません`

URL 自動リンク確認

https://example.com

mailto:test@example.com

脚注

これは脚注付きの文章です。¹

長いコンテンツ

セクション A

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

セクション B

日本語の長文確認です。これは日本語の文章が連続した場合の行間、文字間、折り返し、段落幅を確認するためのテキストです。Markdown の本文として自然に読めるかどうかを確認します。

セクション C

• 長いリスト項目の確認です。これは一行が長くなった場合に、どのように折り返されるかを確認するためのテキストです。
• もう一つの長いリスト項目です。余白、行間、マーカー位置、ネスト時の表示崩れを確認します。

画像とキャプション風

画像キャプション風のテキストです。

Markdown 内リンク

上の H2 見出しへ戻る

最後の見出し

以上で Markdown レンダリングテストは終了です。