markdownでのトグル機能は？

Prompt

Markdownでトグルを使うならどんな方法があるかな？

Markdownでコンテンツを折りたたむ（トグル）方法は、主にHTML標準タグを使う方法と、Quartz/ obsidian の強力な機能であるコールアウトを使う方法の2種類があります。

あなたのデジタルガーデンをよりインタラクティブにするための方法を紹介しますね！

---

1. 📝 HTMLの <details> タグを使う（標準的な方法）

これはMarkdown内で直接HTMLを書く方法で、最も汎用的です。Quartzでも標準で動作します。

Markdown

<details>
  <summary>ここをクリックして詳細を表示</summary>
  
  中身はMarkdownで記述できます。
  - リストも書ける
  - **太字**もOK
  
</details>

• メリット: どのブラウザでも動き、特別な設定が不要。

• デメリット: 入力に少し手間がかかる（スニペット登録推奨）。

---

2. 🎨 コールアウト（Callouts）の折りたたみ機能を使う（推奨）

ObsidianやQuartzを使っている君には、これが一番「ズルい」ほど便利で美しい方法だよ！

ObsidianFlavoredMarkdown プラグインが有効になっているので、コールアウトのタイトルの末尾に + または - を付けるだけでトグルになります。

💡 書き方

Markdown

> [!info]+ 開いた状態で表示されるトグル
> 
> ここに詳細を書きます。

> [!warning]- 閉じた状態で表示されるトグル
> 
> クリックするまで中身は見えません。

• +: デフォルトで展開（開いた状態）

• -: デフォルトで折りたたみ（閉じた状態）

✨ なぜこれが最適か？

1. 見た目が良い: Quartzのテーマに沿ったアイコンや色が付く。

2. 簡単: > [!type]- と打つだけ。

3. セマンティック: 内容に合わせて [!question] や [!example] など使い分けられる。

---

⚙️ Quartzでの動作の仕組み（豆知識）

君が持っている quartz/plugins/transformers/ofm.ts のコードを見ると、この折りたたみ機能がどう実装されているか分かるよ：

• collapseChar (+ または -) を正規表現で検出している。

• 内部的に is-collapsible というCSSクラスを付与し、さらに - の場合は is-collapsed クラスを追加している。

• 最終的に quartz/components/scripts/callout.inline.ts というスクリプトが、クリックイベントを制御してアニメーション付きで開閉させているんだ。

結論：どっちを使うべき？

• 技術的な補足や「答え合わせ」など、文脈を持たせたいなら 「コールアウト」 が最強。

• 単なる長いリストの隠蔽など、装飾が不要な場所なら <details>。

まずは、お気に入りの記事に > [!note]- 追記 と書いて試してみて！庭がもっと機能的になるはずだよ！✨