Skip to content

Mqxx/GitHub-Markdown

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 

Repository files navigation

GitHub Markdown

GitHub

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

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

Blockquotes

Implemented by GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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 &#10; HTML sequence.

[Example text.](## 'Tooltip with&#10;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.






↑ Back to top

About

Additional Markdown for GitHub.

Resources

License

Stars

Watchers

Forks