Some discoveries on how GitHub displays certain markdown syntaxes

github-flavored-markdown-TILs.md

✨ GitHub-Flavored Markdown TILs

Some discoveries on how GitHub displays certain markdown syntaxes

• Diff
• Figma icon + text
• KBD
• Use different images for different themes
• Progressive Disclosure
• Warning/Note Codeblocks
• Footnote

Diff

Add diff after the first triple backticks ```

- "/ui-patterns/progressive-disclosure"
+ "/design/ui-patterns/progressive-disclosure"

Figma icon + text

Personal workflow. This is what I use whe sharing Figma links on GitHub Issues/Discussions

Figma title here

figma-github-raycast-snippet.MP4

Snippet

<span><a href=""><img src="https://user-images.githubusercontent.com/8143661/212871854-1ad48969-c512-4506-b18b-cb12a4349a1f.svg" alt="Figma logo">Link name</a></span>

KBD

Make a text appear like a button

Create gist

Use different images for different themes

Add #gh-dark-mode-only or #gh-light-mode-only at the end of the image URL

Try switching your theme preferences

Progressive disclosure

How to install GitHub's CLI

brew install gh

Warning / Note blockquotes

> [!NOTE]
> New

> [!WARNING]
> Add description on this warning

> [!IMPORTANT]
> Add description on this important note

> [!TIP]
> Add description on this tip

ℹ️ Old syntax was deprecated

Footnote

Here is a simple footnote¹. With some additional text after it. Check this ²

Here is a simple footnote[^1]. With some additional text after it.
Check this [^Footnote]

[^1]: My reference.
[^Footnote]: Yes this can be done but still renders as number

Footnotes

1. My reference. ↩

2. Yes this can be done but still renders as number ↩

Didn't know about the footnote annotations! That's so cool!