【Markdown】文章を折りたたむ方法

記述方法

Markdownでは以下のように記述することで文章を折りたためます。

sample.md

<details>
  <summary>見出し（クリックすると以下の文章が展開される）</summary>

  折りたたまれる内容
</details>

注意事項

<summary></summary>の後に空行を挿入しないとスタイルが適用されません。

sample.md

<details>
  <summary>空行なし(クリックしてください)</summary>
  ### Heading
  1. Foo
  2. Bar
     * Baz
     * Qux
      
  ### Some Code
  ```js
  function logSomething(something) {
    console.log('Something', something);
  }
  ```
</details>

上記のように空行を挿入しないと以下のようになります。

空行なし(クリックしてください)

### Heading 1. Foo 2. Bar *Baz * Qux ### Some Code ```js function logSomething(something) { console.log('Something', something); } ```

sample.md

<details>
  <summary>空行あり(クリックしてください)</summary>
  
  ### Heading
  1. Foo
  2. Bar
     * Baz
     * Qux
  
  ### Some Code
  ```js
  function logSomething(something) {
    console.log('Something', something);
  }
  ```
</details>

空行を挿入した場合には以下のように表示されます。

空行あり(クリックしてください)

Heading

1. Foo
2. Bar
   • Baz
   • Qux

Some Code

function logSomething(something) {
  console.log('Something', something);
}

デフォルトで展開

<details open>と記述するとデフォルトで展開された状態にできます。

sample.md

<details open>
  <summary>デフォルトで展開</summary>
  
  ### Sample
  1. Foo
  2. Bar
     * Baz
     * Qux
  
  ### Sample Code
  ```js
  function logSomething(something) {
    console.log('Something', something);
  }
  ```
</details>

Qiitaでは展開されなかったので画像を添付します。