QiitaやGitHubのコメントで折りたたみ要素を作る方法

git

GitHubのissuesに長いエラーコードを載せたいときや、Qiitaで長いソースコードを参考までに載せたいときなどに折りたたみ要素を作りたい場合があります。

折りたたみ要素は<details>というHTML5タグを利用すると作成できます。

マークダウンのファイルでもHTMLタグを識別してくれるため、例えば以下のようなソースコードを記載すると以下のような表示になります。

<details>
<summary>折りたたみ部分のタイトル</summary>
折りたたまれる詳細情報部分
折りたたまれる詳細情報部分
折りたたまれる詳細情報部分
</details>

なお、GitHub上での場合は上記のソースコードではうまく改行されません。
改行をするためには以下のようにpreタグとcodeタグで囲います。

<details>
<summary>折りたたみ部分のタイトル</summary>
<pre>
<code>
折りたたまれる詳細情報部分
折りたたまれる詳細情報部分
折りたたまれる詳細情報部分
</code>
</pre>
</details>