Callout Syntax Comprehensive Test

Calloutコンポーネントの挙動を、JSX構文とObsidian構文の両面から検証します。

##JSX構文でのCallout

###デフォルト（note）

<Callout>
これはJSX構文で直接書いたCalloutです。正しく表示されるはずです。
</Callout>

###カスタムタイトル指定

<Callout type="info" title="カスタムタイトル">
タイトル付きのCalloutです。
</Callout>

###折りたたみ対応

<Callout type="warning" collapsible>
折りたたみ可能なCalloutです。
</Callout>

##Obsidian構文でのCallout

Obsidianと同じ構文がそのまま使えます！

###基本的なCallout

> [!note]
> これはObsidian構文を使ったCalloutです。
> [!type] で始まる引用ブロックが自動的にCalloutコンポーネントに変換されます。

[!info] 補足情報や追加の説明を提供する際に使用します。

[!tip] ベストプラクティスや便利なヒントを共有する際に使用します。

[!success] 成功事例や正しい実装方法を示す際に使用します。

[!warning] 注意が必要な事項や潜在的な問題について警告します。

[!danger] 破壊的な操作や重大なリスクを伴う内容を強調します。

[!error] エラーメッセージや失敗したケースを示す際に使用します。

[!question] FAQ項目や読者への質問、考えるべきポイントを提示する際に使用します。

###カスタムタイトル

[!info] カスタムヘッダー タイトルをカスタマイズすることができます。

[!tip] プロのヒント タイトル部分に任意のテキストを指定できます。

###折りたたみ機能

[!note]+ 展開状態（デフォルト） + を付けると、初期状態が展開された折りたたみ可能なCalloutになります。

[!warning]- 折りたたみ状態 - を付けると、初期状態が折りたたまれたCalloutになります。クリックして展開してください。

[!tip]+ クリックして折りたたんでみてください この内容は最初から表示されていますが、クリックすると折りたたむことができます。

###実用例：研究プロジェクト

[!todo] Background

• 近年、iPS細胞（人工多能性幹細胞）から特定の細胞への分化誘導技術は、再生医療や疾患モデリングにおいて重要な基盤技術となっている
• この分化過程を理解するために、シングルセルRNAシーケンシング（scRNA-seq）を用いた網羅的な遺伝子発現解析が広く行われている
• 特に、分化過程を経時的に追跡するタイムコースデータは、細胞運命決定の分子メカニズムを解明する上で非常に価値が高い
• さらに、遺伝子ノックアウトや化合物添加などの摂動（Perturbation）を加えたデータセットは、特定の遺伝子やシグナル伝達経路の機能を理解し、因果関係を推論するための強力なツールとなる

[!abstract] Purpose 本調査の目的は、iPS細胞から分化タイムコースscRNA-seqデータ、および何らかのPerturbationが加えられたscRNA-seqデータセットを可能な限り網羅的に収集し、利用可能な公開データセットを特定することです。

[!check] Results Summary 本調査により、合計40以上のiPS細胞分化に関連するscRNA-seqデータセットを同定しました。

• 総計150万細胞以上のデータが利用可能
• タイムコースデータ、Perturbationデータ、およびその両方を含むデータセットに大別される
• 心筋細胞、神経細胞、肝細胞、造血ベータ細胞、網膜オルガノイドなど、多様な細胞種への分化データが含まれている

###複雑なコンテンツ

[!example] コードブロック付きCallout

Callout内にコードブロックも含められます：

function processData(data: string[]): number {
  return data.filter(x => x.length > 0).length;
}

さらに、複数の段落も含められます。

[!important] 重要な技術的詳細

以下のような要素を含めることができます：

1. 番号付きリスト
2. インラインコード: const result = await fetchData()
3. リンク: 公式ドキュメント

機能	サポート
リスト	✅
コード	✅
表	✅

###Obsidianエイリアス対応

以下のObsidianエイリアスも使用できます：

[!todo] todo は info にマッピングされます

[!important] important は warning にマッピングされます

[!check] check は success にマッピングされます

[!bug] bug は error にマッピングされます

[!quote] quote は note にマッピングされます

###構文まとめ

# 基本構文
> [!type] タイトル（オプション）
> 内容
 
# サポートされているタイプ
note, info, tip, success, warning, danger, error, question, abstract, example
 
# Obsidianエイリアス
todo → info
important → warning
check, done → success
help, faq → question
bug, failure, fail, missing → error
quote, cite → note
 
# 折りたたみ機能
> [!type]+ 展開状態
> [!type]- 折りたたみ状態

##まとめ

Obsidianユーザーなら馴染みのある構文がそのまま使えます！既存のObsidianノートをコピー&ペーストするだけで、美しいCalloutとして表示されます。🎉