Skip to content

Instantly share code, notes, and snippets.

@tavianator
Created November 29, 2023 18:24
Show Gist options
  • Save tavianator/23dd28ad683b1768bc876926069ae28f to your computer and use it in GitHub Desktop.
Save tavianator/23dd28ad683b1768bc876926069ae28f to your computer and use it in GitHub Desktop.
GitHub markdown tricks

GitHub markdown tricks


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">

Collapsible sections

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>

```

Nesting

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>

Code in tables

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment