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

# 追記

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

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

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

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

[Markdown記法 チートシート#Details - 折りたたみ  - Qiita](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#details---%E6%8A%98%E3%82%8A%E3%81%9F%E3%81%9F%E3%81%BF)

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

***

# 新機能の使い方調査

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

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

***

# まとめ

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

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


***

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

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

## 記述

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

```


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



***

# コード形式


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

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

</details>

## 記述

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

    </details>

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

***

# コード形式2

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

</details>

## 記述

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

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

***

# コード形式3

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

</details>

## 記述

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

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


***

# 引用

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

## 記述

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

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

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

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


***

# 見出し

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

## 記述

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

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


***

# 装飾

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

## 記述

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

問題なし。


***

# リンク

<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>

## 記述

    <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>

問題なし。


***

# その他

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


[details,summary要素に対応し、投稿内で指定箇所を折りたためるようになりました - Qiita Blog]:http://blog.qiita.com/post/151329031329/detailssummarysupport