MarkdownPaper Open reader

Guide

Collapsible sections in Markdown

To make a section that opens on click, use the HTML tags <details> and <summary>. The summary is the line people click; everything else inside <details> is hidden until they do.

You write

<details>
<summary>Show the full list</summary>

- Apples
- Pears
- Plums

</details>

You see

Show the full list
  • Apples
  • Pears
  • Plums

It works on GitHub, in MarkdownPaper and in most apps that allow HTML.

On this page

Keep Markdown working inside

Leave an empty line after <summary> and before </details>. Without them, the Markdown inside shows as plain text.

You write

<details>
<summary>With empty lines</summary>

**This is bold**, and this is a [link](https://example.com).

</details>

You see

With empty lines

This is bold, and this is a link.

Start it open

Add open to the details tag.

You write

<details open>
<summary>Already open</summary>

Click the line above to close it.

</details>

You see

Already open

Click the line above to close it.

Hide a long code block

A good use for it: a long log or config file that only some readers need.

You write

<details>
<summary>Full error log</summary>

```text
Error: connection refused
  at connect (net.js:120)
  at retry (client.js:44)
```

</details>

You see

Full error log
Error: connection refused
  at connect (net.js:120)
  at retry (client.js:44)

Make the summary bold or a heading

Put formatting inside the summary tag with HTML. Markdown symbols do not work inside it in every app.

You write

<details>
<summary><strong>Answer</strong></summary>

Forty two.

</details>

You see

Answer

Forty two.

Common problems

  • Everything inside shows as plain text. Add an empty line after <summary> and before </details>.
  • The tags show on the page. The app does not allow HTML.
  • The section is open when printed. That depends on the app. MarkdownPaper prints what is open on screen.

Questions

How do I make a dropdown in Markdown?

Use <details> with a <summary> line, as in the first example. Markdown itself has no dropdown.

Do collapsible sections work on GitHub?

Yes, in README files, issues, comments and pull requests.

Can I nest one collapsible section inside another?

Yes. Put a whole <details> block inside another, with empty lines around it.

Next