GitHub Markdownの折りたたみ：
書く方法と、読む方法

折りたたみを「書く」のか、「読む」のか

自分のREADMEに折りたたみを追加したい

details / summaryを原文に追加する方法へ。変更をコミットすると、GitHubで読む人にも折りたたみが表示されます。Chrome拡張は不要です。

他の人の長いREADMEを読みやすくしたい

wowMDで読み手の表示を整理する方法へ。公開GitHub Markdownを、目次とH2セクションの折りたたみで読み進めます。リポジトリの編集権限は不要です。

details / summaryでREADMEを折りたたむ

<details>で閉じたい内容を囲み、<summary>にクリックして開くためのラベルを書きます。次の例をREADMEのMarkdownに貼り付け、GitHubのプレビューで確認できます。

<details>
<summary>セットアップの手順を表示</summary>

### セットアップ

1. リポジトリを取得します。
2. 依存パッケージをインストールします。

```sh
npm install
```

</details>

<summary>の後と</details>の前に空行を入れると、内側の見出し・リスト・コードをMarkdownとして書きやすくなります。ラベルは「詳細」よりも、開いたときに何が読めるかが分かる文章にしましょう。

npm install

最初から開いておく場合は、開始タグを<details open>にします。長いコードブロックも、上の例のようにブロック全体を囲めます。

これはREADMEの内容を変更する方法です。GitHub以外のMarkdownビューアではHTMLタグの扱いが異なる場合があるため、配布先でも表示を確認してください。

参考：GitHub公式ドキュメント「セクションを折りたたんで情報を整理する」

原文を変えずに、長いREADMEを折りたたんで読む

他の人のREADMEを読むときは、原文にタグを追加できないこともあります。wowMD Chrome拡張は、対応する公開GitHub Markdownを読みやすいビューで開き、H2見出しごとに表示を折りたためます。

1. wowMDをChromeに追加する。ChromeウェブストアのwowMDページからインストールします。
2. 公開GitHubの長いREADMEやMarkdownファイルを開く。対応する文書に「Better View」が表示されたらクリックします。すべてのページに表示されるボタンではなく、短い文書などでは表示されない場合があります。
3. 目次で章を選び、H2見出し横のボタンで開閉する。今は読まない章を閉じて、必要な部分に集中します。より広い画面で読みたいときは「Open full reader」を開きます。

折りたたみは読み手のビューに適用されます。GitHub上のMarkdownを変更したり、変更をコミットしたりすることはありません。READMEに含まれるコードは閲覧用に表示され、コードを実行する機能ではありません。

対応範囲は公開リポジトリのREADMEと.md・.markdownファイルです。非公開リポジトリ、Issue、プルリクエスト、Wiki、GitHub以外のサイトは対象外です。ローカルファイルや注釈・エクスポートが必要な場合は、別のwowMD Proを使います。

うまく折りたためないとき

detailsの中のコードや見出しが崩れる

開始・終了タグが対になっているか、コードフェンスが閉じているか、タグの前後に空行があるかを確認します。コードフェンスの内側にdetailsタグを書くと、タグ自体がコードとして表示されるので、折りたたみにはなりません。

「Better View」が表示されない

拡張が有効か、公開リポジトリのREADMEまたはMarkdownファイルを開いているかを確認してください。短い文書や対応外のページでは表示されない場合があります。拡張のポップアップでも対応範囲を確認できます。

wowMDで折りたたんだ状態は、他の人にも見える？

他の人のGitHub表示は変わりません。READMEを読む全員に開閉できる区画を用意したいなら、原文にdetails / summaryを書く方法を選んでください。