# Collapsed Sections to HTML ## `
` Block (Raw HTML in Markdown) ### Markdown ````md
Tips for collapsed sections ### You can add a header You can add text within a collapsed section. You can add an image or a code block, too. ```ruby puts "Hello World" ```
```` --- ### Parsed HTML ```html
Tips for collapsed sections

You can add a header

You can add text within a collapsed section.

You can add an image or a code block, too.


puts "Hello World"
``` #### Notes: * Markdown **inside `
`** is still parsed normally. * Syntax highlighting is preserved via `class="language-ruby"`. --- ## Open by Default (`open` attribute) ### Markdown ````md
Tips for collapsed sections ### You can add a header You can add text within a collapsed section. You can add an image or a code block, too. ```ruby puts "Hello World" ```
```` ### Parsed HTML ```html
Tips for collapsed sections

You can add a header

You can add text within a collapsed section.

You can add an image or a code block, too.


puts "Hello World"
``` ## Key Rules * `
` and `` are **raw HTML**, not Markdown syntax * Markdown inside `
` **is still parsed** * Syntax highlighting works normally inside collapsed sections * Use `` as the **clickable label** ## Paragraphs with Inline HTML & SVG ### Markdown ```md You can streamline your Markdown by creating a collapsed section with the `
` tag. ``` ### Parsed HTML ```html

You can streamline your Markdown by creating a collapsed section with the <details> tag.

``` --- ### Markdown (inline SVG preserved) ```md Any Markdown within the `
` block will be collapsed until the reader clicks to expand the details. ``` ### Parsed HTML ```html

Any Markdown within the <details> block will be collapsed until the reader clicks to expand the details.

```