The above heading with badges aligned with the horizontal rule is made with this code:
<h1 align="center">
GitHub markdown tricks<br>
<img src="https://img.shields.io/badge/badge-left-blue" align="left">
<img src="https://img.shields.io/badge/badge-right-green" align="right">
</h1>
<br clear="all">If some details might not be relevant to every reader, you can make them collapsible with the <details> tag:
See code
<details open>
<summary>See code</summary>
<p></p>
```markdown
<quine>
```
---
</details>The blank lines above and below the content let you use regular markdown formatting inside the <details>.
For the <summary>, you'll have to use HTML tags if you want any formatting.
The empty <p></p> fixes the vertical spacing, otherwise it looks a little too tight:
See code
<details open>
<summary>See code</summary>
```Since <details> are not indented, nesting them can look confusing:
Outer
Outer details.
Inner
Inner details.
To add some indentation, you can use a <ul> tag:
Preview
See code
<details open>
<summary>Preview</summary>
<ul>
<p></p>
<details open>
<summary>See code</summary>
<ul>
<p></p>
```markdown
<quine>
```
</ul>
</details>
</ul>
</details>You can use manual HTML tables to put some code snippets side-by-side:
<table>
<tbody>
<tr>
<td>
```markdown
<quine column="left">
```
</td> |
<td>
```markdown
<quine column="right">
```
</td>
</tr>
</tbody>
</table> |
But it looks better on even-numbered rows because the cell background color will match the code block. So add a heading row!
| Left | Right |
|---|---|
<table>
<tbody>
<tr>
<th>Left</th>
<th>Right</th>
</tr>
<tr>
<td valign="top">
```markdown
<quine column="left">
```
</td> |
<td valign="top">
```markdown
<quine column="right">
```
</td>
</tr>
</tbody>
</table> |