この記事は、Markdown で書ける各要素がサイト上でどのように表示されるかを一覧で確認するためのサンプルです。新しいスタイルを当てたときの崩れチェックなどに使ってください。

見出し (Headings)

以下は h1 から h6 までの見出しです。本文中では通常 h2 以降を使います。

見出し 1 (h1)

見出し 2 (h2)

見出し 3 (h3)

見出し 4 (h4)

見出し 5 (h5)

見出し 6 (h6)

段落とテキスト装飾 (Paragraphs & Inline)

これは通常の段落です。Markdown では空行で段落を区切ります。文章が長くなった場合に行間や折り返しが読みやすいかどうかを確認できます。日本語と English text が混在した場合の字間もチェックしましょう。

文中の装飾として、太字 (bold)、斜体 (italic)、太字斜体、打ち消し線 (strikethrough)、そして インラインコード (inline code) が使えます。リンクは こちらが通常リンク です。

改行を含む段落のテスト。 この行は前の行のすぐ下に改行されています（行末スペース 2 つ）。

引用 (Blockquote)

これは引用です。長めの文章を引用したときに、左側のラインやインデント、文字色がどう表示されるかを確認します。

ネストした引用もテストします。引用の中の引用です。

引用内でも 太字 や code などのインライン装飾が使えます。

リスト (Lists)

箇条書き (Unordered)

• 親項目 1
• 親項目 2
  • 子項目 2-1
  • 子項目 2-2
    • 孫項目 2-2-1
• 親項目 3

番号付き (Ordered)

1. 最初のステップ
2. 次のステップ
   1. サブステップ A
   2. サブステップ B
3. 最後のステップ

タスクリスト (Task list)

• 完了したタスク
• 未完了のタスク
• もうひとつの未完了タスク

コード (Code)

文中の const x = 1; のようなインラインコードに加えて、コードブロックも確認します。

// JavaScript のシンタックスハイライト確認
function greet(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

greet("world");

/* CSS のコードブロック */
.prose-article {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text);
}

言語指定なしのプレーンなコードブロック。
インデントや等幅フォントの表示を確認します。
  ネストされた行。

テーブル (Table)

左寄せ・中央寄せ・右寄せのテスト:

水平線 (Horizontal Rule)

下に水平線が入ります。

水平線の上下に余白が取れているか確認します。

画像 (Image)

画像のキャプション代わりの段落。画像の最大幅や角丸が適用されるかを確認します。

ネストした複合要素

1. 番号付きリストの中に引用:

   リスト項目内の引用です。

2. 番号付きリストの中に箇条書き:
   • ネストされた箇条書き 1
   • ネストされた箇条書き 2

以上で主要な Markdown 要素の確認は完了です。