GitHub <details> rendering feature examples

github-details-examples.md

summary text. **Not render bold text on GitHub**

This is hidden details text without <div>.

This is hidden details text within <div>.

Can write many things.

---

italic

bold

---

URL link

---

image

---

bullet points lists

• bullet 1
• bullet 2

dashed (hyphen, minus-signs) lists

• dashed 1
• dashed 2

plused (plus-sign) lists

• plus 1
• plus 2

numbered lists

1. One
2. Two
3. Three

---

one-liner code

code fence

---

Header section (Structured documents)

Text in section

sub-section

Text in sub-section

details in details

Multi-segment 1

aaa

Multi-segment 2

bbb

---

Start with the dropdown shown instead of hidden

not hidden

Surprise?

raw-github-details-examples

<details>
  <summary>summary text. **Not render bold text on GitHub**</summary>

This is hidden details text without `<div>`.

<div>
This is hidden details text within <code>&lt;div&gt;</code>.

Can write many things.

---

*italic*

**bold**

---

[URL link](http://example.com)

---
image

![image](https://cdn1.iconfinder.com/data/icons/simple-icons/256/github-256-black.png)

---

bullet points lists

* bullet 1
* bullet 2

dashed (hyphen, minus-signs) lists

* dashed 1
* dashed 2

plused (plus-sign) lists

+ plus 1
+ plus 2

numbered lists

1. One
2. Two
3. Three

---

`one-liner code`

```
code fence
```

---

# Header section (Structured documents)

Text in section

## sub-section

Text in sub-section

<details>
  <summary>details in details</summary>
    <div>
      <details>
        <summary>
          Multi-segment 1
        </summary>
        <div>
          aaa
        </div>
      </details>
      <details>
        <summary>
          Multi-segment 2
        </summary>
        <div>
          bbb
        </div>
      </details>
    </div>
  </details>
  </div>
</details>

---

<details open>
  <summary>Start with the dropdown shown instead of hidden</summary>

```
not hidden
```

:octocat: Surprise? :octocat:

</details>