eze-kiel / github-markdown

Additional Markdown for GitHub

GitHub Markdown

Here are a few markdown additions and hints for GitHub Markdown.

Also check out this Gist for mor information about GitHub markdown.

Blockquotes

Badges

You can use these additional badges to give your makrdown more structure and statement. The badges are always 21px high and 100px wide. The SVG consists of the symbol and the text behind it. You can find the Octicon symbols here. The fontstack I used can be found here. The badges adapt to the selected theme.

Info Badge

> <picture>
>   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/light-theme/info.svg">
>   <img alt="Info" src="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/dark-theme/info.svg">
> </picture><br>
>
> Info

Info

Note Badge

> <picture>
>   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/light-theme/note.svg">
>   <img alt="Note" src="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/dark-theme/note.svg">
> </picture><br>
>
> Note

Note

Example Badge

> <picture>
>   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/light-theme/example.svg">
>   <img alt="Example" src="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/dark-theme/example.svg">
> </picture><br>
>
> Example

Example

Tip Badge

> <picture>
>   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/light-theme/tip.svg">
>   <img alt="Tip" src="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/dark-theme/tip.svg">
> </picture><br>
>
> Tip

Tip

Issue Badge

> <picture>
>   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/light-theme/issue.svg">
>   <img alt="Issue" src="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/dark-theme/issue.svg">
> </picture><br>
>
> Issue

Issue

Success Badge

> <picture>
>   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/light-theme/success.svg">
>   <img alt="Success" src="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/dark-theme/success.svg">
> </picture><br>
>
> Success

Success

Solution Badge

> <picture>
>   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/light-theme/solution.svg">
>   <img alt="Solution" src="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/dark-theme/solution.svg">
> </picture><br>
>
> Solution

Solution

Check Badge

> <picture>
>   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/light-theme/check.svg">
>   <img alt="Check" src="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/dark-theme/check.svg">
> </picture><br>
>
> Check

Check

Complete Badge

> <picture>
>   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/light-theme/complete.svg">
>   <img alt="Complete" src="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/dark-theme/complete.svg">
> </picture><br>
>
> Complete

Complete

Warning Badge

> <picture>
>   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/light-theme/warning.svg">
>   <img alt="Warning" src="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/dark-theme/warning.svg">
> </picture><br>
>
> Warning

Warning

Error Badge

> <picture>
>   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/light-theme/error.svg">
>   <img alt="Error" src="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/dark-theme/error.svg">
> </picture><br>
>
> Error

Error

Danger Badge

> <picture>
>   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/light-theme/danger.svg">
>   <img alt="Danger" src="https://raw.githubusercontent.com/Mqxx/GitHub-Markdown/main/blockquotes/badge/dark-theme/danger.svg">
> </picture><br>
>
> Danger

Danger

Tooltips

This is how you can add your own tooltips or hover texts. You can create a tooltip by using two ## instead of an actual link. For some reason, Markdown links that come directly after a bracket are sometimes invisible within a table. You can avoid this by linking directly to your file (For example insted of ## use README.md##). The goal is to have no click effect on the tooltips. They should only look like a link so that you can more easily find the tooltip.

Basic

[This is an example text that looks like a link, but nothing happens when you click on it.](## 'And this is the hover text.')

This is an example text that looks like a link, but nothing happens when you click on it.

Linebreaks

You can also create linebreaks inside your tooltip by using the 
 HTML sequence.

[Example text.](## 'Tooltip with
linebreak')

Example text.

Inside Table

You can also use tooltips inside a table, like so.

|      A      |      B      |
|:-----------:|:-----------:|
| Info[*][1]  | Text[*][2]  |

[1]: ## 'Hover Info'
[2]: ## 'Hover Text'

A	B
Info*	Text*

Keybindings/Keyinserts

You can insert keyboard keys into your markdown as well. To do that use the <kbd> and </kbd> tag.

Basic

Use <kbd>Ctrl</kbd>+<kbd>S</kbd> to save your file.

Use Ctrl+S to save your file.

Nesting

Nesting is also possible.

Hold <kbd><kbd>Ctrl</kbd>+<kbd>Shift</kbd></kbd> and press <kbd>A</kbd> to select all text.

Hold Ctrl+Shift and press A to select all text.