Skip to content

Instantly share code, notes, and snippets.

@OleksiyRudenko
Forked from joyrexus/README.md
Last active November 6, 2022 10:28
Show Gist options
  • Save OleksiyRudenko/56adab4c60f39d3d1561fc08692bd41c to your computer and use it in GitHub Desktop.
Save OleksiyRudenko/56adab4c60f39d3d1561fc08692bd41c to your computer and use it in GitHub Desktop.
Collapsable markdown

collapsable markdown?

See this gist source code for details (pun intended :) )

Content wrapped in <p> tag

<details><summary>CLICK ME</summary>
<p>

#### yes, even hidden code blocks!

  `​``python
  # BEWARE when copy-pasting! MD codeblock opening and closing backticks sequences (`​``) contain zero-length space for proper MD formatting
  print("hello world!")
  `​``

[a link](./#)

</p>
</details>
CLICK ME

yes, even hidden code blocks!

print("hello world!")

a link


Content w/out wrapping in <p> tag

<details><summary>### Section header</summary>
  
  no P-tag
  
  #### Subsection

  Multiline
  text.
</details>
### Section header

no P-tag

Subsection

Multiline text.


Content w/out wrapping in <p> tag (<summary> body on its own line)

<details><summary>
### Section header
  </summary>
  
  no P-tag
  
  #### Subsection

  Multiline
  text.
</details>
### Section header

no P-tag

Subsection

Multiline text.


<details> as a list item

* <details><summary>Topic</summary>
  
  - sub-topic
  - sub-topic
  </details>
* <details><summary>Topic with P-tag</summary>
  <p>
  
  - sub-topic (`<p>` wrapping requires empty line after opening `<p>`)
  - sub-topic
  </p>
  </details>
  • Topic
    • sub-topic
    • sub-topic
  • Topic with P-tag

    • sub-topic (<p> wrapping requires empty line after opening <p>)
    • sub-topic

Well, widget control looks much as a bullet itself.


Lists inside <details> body

<details><summary>Topic</summary>
  
- sub-topic
- sub-topic
</details>
<details><summary>Topic with P-tag</summary>
<p>
  
  - sub-topic
  - sub-topic
</p>
</details>
Topic
  • sub-topic
  • sub-topic
Topic with P-tag

  • sub-topic
  • sub-topic


Inline <details>

An attempt to put <details><summary>the control</summary>for the hidden text</details> inline and all in a single row  **fails**.

An attempt to put

the controlfor the hidden text
inline and all in a single row fails.


Inline <details> (multiline)

An attempt to put <details><summary>the control</summary>
for the hidden multiline text 
</details> inline **fails**.

An attempt to put

the control for the hidden multiline text

inline **fails**.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment