Markdown Showcase （MDXスタイル集）

見出しサンプル（H2）

小見出し（H3）

さらに小見出し（H4）

より細かい見出し（H5）

最小見出し（H6）

基本的なテキスト装飾

本文は通常の段落です。

改行するとこのように自動的にレイアウトが調節されます。

太字・斜体・下線・取り消し線

太字のテキストと斜体のテキストです。

下線（underline）、そして打ち消し線（strikethrough）も使えます。

インラインコードブロック・リンク

インラインコードブロック inline code や、リンク（Example）も利用できます。

直接 https://example.com とアドレスを書いても https://example.com のように自動リンクが生成されます。

MDXでは、アドレスは <hello@example.com> などの記法は使えません。 通常の記法で [hello@example.com](mailto:hello@example.com) としてください。

引用・脚注・定義リスト

引用（Blockquote）

Markdown は文章構造を明確にしつつ、読みやすさを保てるシンプルな記法です。

— Harunosuke Markdown Guide

学びは一生続く旅である。

これは複数段落の引用の例です。本文とのコントラストや余白を確認できます。

Harunosuke

脚注

脚注は本文中から参照できます。たとえば「Markdown の脚注は便利¹」のように書いておくと、ページ末尾に自動で注釈がまとめられます。

定義リスト

定義リストも利用できます：

用語A

意味や説明を書きます。複数行の場合は改行しながら記述できます。

用語B

別の用語を定義するときも同じ形式で追記します。

リスト表示

順序なしリスト（Unordered List）

• 箇条書き 1
• 箇条書き 2
• 箇条書き 3

順序ありリスト（Ordered List）

1. 手順 1
2. 手順 2
3. 手順 3

ul ネストリスト

• レベル 1 項目 1
• レベル 1 項目 2
  • レベル 2 項目 A
  • レベル 2 項目 B
    • レベル 3 項目 i
    • レベル 3 項目 ii
      • レベル 4 項目 α
      • レベル 4 項目 β
        • レベル 5 項目
        • レベル 5 項目
    • レベル 3 項目 iii
  • レベル 2 項目 C
• レベル 1 項目 3
  • レベル 2 項目 D
    • レベル 3 項目 iv
    • レベル 3 項目 v

ol ネストリスト

1. 第一章
2. 第二章
   1. 第一節
   2. 第二節
      1. サブセクション 1
      2. サブセクション 2
         1. 詳細項目 A
         2. 詳細項目 B
            1. さらに詳細な項目
            2. 最も深い項目
   3. 第三節
3. 第三章

タスクリスト（Task List）

• 未完了のタスク
• 完了済みのタスク
• 途中のタスク

総入れ子

1. レベル 1 項目 1
   • レベル 2 項目 1
   • レベル 2 項目 2
     • レベル 3 項目 i
       • レベル 4 項目 α
         1. レベル 5 項目
         2. レベル 5 項目
       • レベル 4 項目 β
     • レベル 3 項目 ii
2. レベル 1 項目 2
   • レベル 2 項目 3
   • レベル 2 項目 4

水平線

上の段落と下の段落の間に水平線を挿入します。

水平線が正常に表示されるかテストしています。

コードブロックのテスト

JavaScript（言語のみ）

function greet(name) {
    console.log(`Hello, ${name}!`);
}
    
greet("World");

Python（ファイル名付き）

def greet(name):
    print(f"Hello, {name}!")
    
if __name__ == "__main__":
    greet("Python")

JavaScript（ファイル名のみ）

function greet(name) {
    console.log(`Hello, ${name}!`);
}
    
greet("World");

TypeScript（複雑な例）

interface User {
    id: number;
    name: string;
    email: string;
}
    
class UserService {
    private users: User[] = [];
    
    addUser(user: User): void {
        this.users.push(user);
    }
    
    getUserById(id: number): User | undefined {
        return this.users.find(user => user.id === id);
    }
}

表

表はレスポンシブデザインによってモバイルでも読みやすくなっています。 フォントサイズも少し小さくして可読性を確保しています。

また、表のサイズによっては横スクロールが自動的に可能になります。

幅の広い表（横スクロールテスト用）

テーブルアライメント例

数値データの表

技術仕様の表

基本的なマークダウン記法まとめ

このテスト記事では以下の要素を確認しました：

• 見出し（h1〜h6）
• テキスト装飾（太字、斜体、取り消し線、リンク、インラインコード）
• リスト（順序あり・なし）
• 引用ブロック
• 水平線
• コードブロック（言語のみ・ファイル名付き）
• 表

すべてが正常に表示されていれば、マークダウン処理は正常に動作しています！

ここからはコンポーネント挿入による装飾などをテストします。

コールアウト（Callouts）

コードブロック（Code Blocks）

// TypeScript example
type User = { id: string; name: string };
    
function greet(user: User) {
    return `Hello, ${user.name}!`;
}
    
console.log(greet({ id: "u1", name: "Harunosuke" }));

# Shell example
rg -n "pattern" src

画像（Image）

画像の表示

埋め込み（Embeds）

YouTube

Twitter（シンプルブロック引用）

これは SNS 埋め込みの簡易例です。公式ウィジェットスクリプトが読み込まれていない環境では 通常の引用として表示されますが、リンクを辿れば投稿にアクセスできます。

https://twitter.com/jack/status/20

数式（MathJax）

インライン: は有名な恒等式です。

ディスプレイ:

様々な数式表示：

これは他の記事で書かれた定理のコンポーネントによる再利用です。

リンクプレビュー（Link Preview）

代替 URL 例