thinkverse / useful-gh-markdown

Useful GitHub flavored markdown snippets

Useful GitHub Flavored Markdown Snippets

Alerts

Previously knows as "Enhanced Blockquotes."

You can read about Alerts in the documentation.

• Works on GitHub mobile app.

> [!NOTE]
> BLOCKQUOTE_TEXT

Note

This repository contains GitHub Flavored Markdown.

> [!WARNING]
> BLOCKQUOTE_TEXT

Warning

This only works on GitHub, or services where this is supported.

July 2023 Update!

As of July 2023, we got a new IMPORTANT type and a new ![TYPE] syntax. You can read more about it in the discussion.

> [!IMPORTANT]
> BLOCKQUOTE_TEXT

November 2023 Update!

As of November 2023, we have two more types: TIP and CAUTION.

> [!TIP]
> BLOCKQUOTE_TEXT

Tip

This became available on 14th November 2023.

> [!CAUTION]
> BLOCKQUOTE_TEXT

Caution

Might not be supported on other platforms.

Context-based images

HTML version

• Works on GitHub mobile app.

Specify an image to display based on the preferred color scheme. Change your color scheme from light to dark or vice-versa to see the image change.

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="IMAGE_URL">
  <img alt="IMAGE_ALT" src="IMAGE_URL">
</picture>

Source: Specify theme context for images in Markdown GA

Markdown version

• Works on GitHub mobile app.

GitHub also supports themed images in Markdown, by appending #gh-dark-mode-only or #gh-light-mode-only at the end of an image url.

![IMAGE_ALT](IMAGE_URL#gh-dark-mode-only)
![IMAGE_ALT](IMAGE_URL#gh-light-mode-only)

Source: Specify theme context for images in Markdown

Fence blocks for Math

• Works on GitHub mobile app.

You can specify a math-specific fence block with ```math, it even supports LaTeX expressions, read more about it in the documentation.

```math
\sqrt{3}
```

$$\sqrt{3}$$

Source: Fenced block syntax for mathematical expressions