アドベントカレンダーで久しぶりにQiita記事を書きまして、ソースコードの全文を掲載するときに長過ぎるので↓の記事を参考に折りたたみ表示にしてみました。
ただこれ見た目がかなり微妙だと思ってまして、普段Qiitaの記事を読んでいても見落としてしまうことがたまによくあります。
なのでなんとかこれを目立たせようと試行錯誤した軌跡をここに残します。
**「ソースコードを表示（折りたたみ）」**という文字をクリックすると展開されMarkdownのソースが見れます。
通常の見え方
ソースコードを表示（折りたたみ）
<details><summary>ソースコードを表示（折りたたみ）</summary><div>
<!-- ソースコードとか -->
</div></details>
太字にする
ソースコードを表示（折りたたみ）
<details><summary><b>ソースコードを表示（折りたたみ）</b></summary><div>
<!-- ソースコードとか -->
</div></details>
上下を線で挟む
これだけでもわりと目につくようになると思います。
----------------------------------------
ソースコードを表示（折りたたみ）
------------------------------------------
<details><summary><b>----------------------------------------<br> ソースコードを表示（折りたたみ）<br> ------------------------------------------</b></summary><div>
<!-- ソースコードとか -->
</div></details>
=======================
ソースコードを表示（折りたたみ）
========================
<details><summary><b>=======================<br> ソースコードを表示（折りたたみ）<br> ========================</b></summary><div>
<!-- ソースコードとか -->
</div></details>
━━━━━━━━━━━━━━━━━
ソースコードを表示（折りたたみ）
━━━━━━━━━━━━━━━━━━
<details><summary><b>━━━━━━━━━━━━━━━━━<br> ソースコードを表示（折りたたみ）<br>━━━━━━━━━━━━━━━━━━</b></summary><div>
<!-- ソースコードとか -->
</div></details>
■■■■■■■■■■■■■■■■■■■
ソースコードを表示（折りたたみ）
■■■■■■■■■■■■■■■■■■■■
<details><summary><b>■■■■■■■■■■■■■■■■■■■<br> ソースコードを表示（折りたたみ）<br>■■■■■■■■■■■■■■■■■■■■</b></summary><div>
<!-- ソースコードとか -->
</div></details>
ボックス表示（ボタンっぽく）
「▶」がなかなか憎い横幅で上下の幅を合わせるのが難しい…
枠線
──────────────────┐
│ ソースコードを表示（折りたたみ） │
└──────────────────┘
<details><summary><b>──────────────────┐<br>│ ソースコードを表示（折りたたみ） │<br>└──────────────────┘</b></summary><div>
<!-- ソースコードとか -->
</div></details>
太線
━━━━━━━━━━━━━━━━━━┓
┃ ソースコードを表示（折りたたみ） ┃
┗━━━━━━━━━━━━━━━━━━┛
<details><summary><b>━━━━━━━━━━━━━━━━━━┓<br>┃ ソースコードを表示（折りたたみ） ┃<br>┗━━━━━━━━━━━━━━━━━━┛</b></summary><div>
<!-- ソースコードとか -->
</div></details>
角丸
角丸にすると角の幅合ってない感を少し誤魔化せる。
ちなみに太線じゃない角丸文字は無さそう。
━━━━━━━━━━━━━━━━━━╮
┃ ソースコードを表示（折りたたみ） ┃
╰━━━━━━━━━━━━━━━━━━╯
<details><summary><b>━━━━━━━━━━━━━━━━━━╮<br>┃ ソースコードを表示（折りたたみ） ┃<br>╰━━━━━━━━━━━━━━━━━━╯</b></summary><div>
<!-- ソースコードとか -->
</div></details>
破線
破線にすることでさらにつなぎ目が自然になる…気がする。
╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╮
╏ ソースコードを表示（折りたたみ） ╏
╰╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╯
<details><summary><b>╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╮<br>╏ ソースコードを表示（折りたたみ） ╏<br>╰╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╯</b></summary><div>
<!-- ソースコードとか -->
</div></details>
全体的に「▶」の横にずらす
╭╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╮
╏ ソースコードを表示（折りたたみ） ╏
╰╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╯
<details><summary><b>╭╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╮<br> ╏ ソースコードを表示（折りたたみ） ╏<br> ╰╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╯</b></summary><div>
<!-- ソースコードとか -->
</div></details>
参考：Qiitaでのボックス文字の見え方
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| U+250x | ─ | ━ | │ | ┃ | ┄ | ┅ | ┆ | ┇ | ┈ | ┉ | ┊ | ┋ | ┌ | ┍ | ┎ | ┏ |
| U+251x | ┐ | ┑ | ┒ | ┓ | └ | ┕ | ┖ | ┗ | ┘ | ┙ | ┚ | ┛ | ├ | ┝ | ┞ | ┟ |
| U+252x | ┠ | ┡ | ┢ | ┣ | ┤ | ┥ | ┦ | ┧ | ┨ | ┩ | ┪ | ┫ | ┬ | ┭ | ┮ | ┯ |
| U+253x | ┰ | ┱ | ┲ | ┳ | ┴ | ┵ | ┶ | ┷ | ┸ | ┹ | ┺ | ┻ | ┼ | ┽ | ┾ | ┿ |
| U+254x | ╀ | ╁ | ╂ | ╃ | ╄ | ╅ | ╆ | ╇ | ╈ | ╉ | ╊ | ╋ | ╌ | ╍ | ╎ | ╏ |
| U+255x | ═ | ║ | ╒ | ╓ | ╔ | ╕ | ╖ | ╗ | ╘ | ╙ | ╚ | ╛ | ╜ | ╝ | ╞ | ╟ |
| U+256x | ╠ | ╡ | ╢ | ╣ | ╤ | ╥ | ╦ | ╧ | ╨ | ╩ | ╪ | ╫ | ╬ | ╭ | ╮ | ╯ |
| U+257x | ╰ | ╱ | ╲ | ╳ | ╴ | ╵ | ╶ | ╷ | ╸ | ╹ | ╺ | ╻ | ╼ | ╽ | ╾ | ╿ |
その他装飾
色をつけてみる
╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╮
╏ ソースコードを表示（折りたたみ） ╏
╰╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╯
<details><summary><b><font color="#409202">╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╮<br>╏ <font color="#409202">ソースコードを表示（折りたたみ）</font> ╏<br>╰╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╯</font></b></summary><div>
<!-- ソースコードとか -->
</div></details>
「▶」のあとに改行をいれる
「▶」のあとに改行すると上下の幅は当然ぴったりに。
「▶」の浮き具合がはんぱないけど。
╭╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╮
╏ ソースコードを表示（折りたたみ） ╏
╰╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╯
<details><summary><br><b>╭╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╮<br>╏ ソースコードを表示（折りたたみ） ╏<br>╰╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╯</b></summary><div>
<!-- ソースコードとか -->
</div></details>
突然の折りたたみ
人人人人人人人人人人人人人人人人人人人人人人人＿
＞ 突然のソースコードを表示（折りたたみ） ＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣
<details><summary><b>人人人人人人人人人人人人人人人人人人人人人人人＿<br>＞ 突然のソースコードを表示（折りたたみ） ＜<br>￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣</b></summary><div>
<!-- ソースコードとか -->
</div></details>