Qiitaのdetails,summary要素とMarkdownの相性調査

追記

初版: 2016年10月21日
追記: 2018年10月17日

現在でも閲覧されることがあるようなので、古い記事ですが使い方について追記します。

下記本文では
「<details>には空行を含めてはいけないためMarkdownが利用できない」
としていますが、現在ではMarkdwonが利用出来る方法があり、紹介もされ広まっています。

冗長に書き直すよりQiitaのチートシートの引用が明確なので、そちらを参照してください。

Markdown記法 チートシート#Details - 折りたたみ - Qiita

折りたたんだ部分で Markdown を使いたい場合は、折りたたまれる部分全体を <div> で囲ってください。（\` は実際は \ を含みません。また <div> とコードブロックの間には空白行が一つ以上必要です。）

<details><summary>サンプルコード</summary><div>
>
\```rb
puts 'Hello, World'
\```
</div></details>

サンプルコード

> ```rb puts 'Hello, World' ```

>

---

新機能の使い方調査

details,summary要素に対応し、投稿内で指定箇所を折りたためるようになりました - Qiita Blog

で何を折りたためるか調査。

---

まとめ

• <details>には空行を含めてはいけない
  • それに伴い空行必須なor変換結果で空行ができるMarkdownが利用出来ない
    (コードブロック、引用、リスト、チェックボックスそしてテーブル)
• スライドモードではサマリーしか確認できない
  記事内のスライドはこの事の確認のためだけです

あくまで文章を記述しましょう。

---

紹介サンプルのスライド動作

どんどん共有しましょう

プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。

記述

<details open>
<summary>どんどん共有しましょう</summary>
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
</details>

スライド内では開けませんし、閉じた状態で表示されます。
open属性によりデフォルトは変わるそうですが、Firefox 49では属性の影響はない模様。

---

コード形式

`どんどん共有しましょう`

プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。

記述

<details>
<summary>`どんどん共有しましょう`</summary>

```
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
```

</details>

コードブロックを有効にすると、details扱いにならない。

---

コード形式2

`どんどん共有しましょう`

``` プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。 ```

記述

<details>
<summary>`どんどん共有しましょう`</summary>
```
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
```
</details>

コードブロックを引っ付ければ、details扱いになるが、コードブロックの要件を満たさなくなる。

---

コード形式3

`どんどん共有しましょう`

プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。

記述

<details>
<summary>`どんどん共有しましょう`</summary>
<pre>
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
<pre>
</details>

マークダウンは改行必須なものの、直接タグを打てば大丈夫です。
ただ、ハイライトは難しいでしょう。

---

引用

どんどん共有しましょう

>プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。

記述

<details>
<summary>どんどん共有しましょう</summary>
>プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
</details>

こちらは<blockquote>の前に空の<p>要素が生成されるせいか、含まれません。
<blockquote>で囲むだけなので、手打ちでも良いでしょう。

どんどん共有しましょう

プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。

<details>
<summary>`どんどん共有しましょう`</summary>
<blockquote>プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。</blockquote>
</details>

---

見出し

どんどん共有しましょう

# プログラミングに関することをどんどん投稿して、 ## 知識を記録、共有しましょう。

記述

<details>
<summary>どんどん共有しましょう</summary>
# プログラミングに関することをどんどん投稿して、
## 知識を記録、共有しましょう。
</details>

<details>の外に飛び出します。しかし使うシーンもないでしょう。

---

装飾

どんどん共有しましょう

*プログラミングに関することをどんどん投稿して、* **知識を記録、共有しましょう。** _プログラミングに関することをどんどん投稿して、_ ~~知識を記録、共有しましょう。~~

記述

<details>
<summary>どんどん共有しましょう</summary>
*プログラミングに関することをどんどん投稿して、*
**知識を記録、共有しましょう。**
_プログラミングに関することをどんどん投稿して、_
~~知識を記録、共有しましょう。~~
</details>

問題なし。

---

リンク

どんどん共有しましょう

[プログラミングに関することをどんどん投稿して、](http://qiita.com) 

記述

<details>
<summary>どんどん共有しましょう</summary>
[プログラミングに関することをどんどん投稿して、](http://qiita.com)
![computer_hub_loop_setsuzoku.png](https://qiita-image-store.s3.amazonaws.com/0/62354/aa3ad0ce-21c3-6168-95ad-d0a9d80f8a9e.png)
</details>

問題なし。

---

その他

リストやチェックボックス、テーブルも改行が必要なので不可です。