GitHub Markdown

OpenINF additions to GitHub Markdown

Badges

One can use these additional badges to give Markdown more structure and statement. The badges are always 21px high and 100px wide. The SVG consists of the symbol and the text behind it. One can find the Octicon symbols here. The font stack 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/OpenINF/GitHub-Markdown/HEAD/blockquotes/badge/light-theme/info.svg">
  <img alt="Info" src="https://raw.githubusercontent.com/OpenINF/GitHub-Markdown/HEAD/blockquotes/badge/dark-theme/info.svg">
</picture><br />
Info

Info

Note Badge

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

Note

Example Badge

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

Example

Tip Badge

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

Tip

Issue Badge

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

Issue

Success Badge

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

Success

Warning Badge

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

Warning

Error Badge

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

Error

Danger Badge

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

Danger

Tooltips

This section explains the process of adding tooltips or hover texts. Instead of using a link, one can use two consecutive hash marks (i.e., ##) to create a tooltip. However, using this method may cause Markdown links to become invisible when placed directly after a bracket within a table. To avoid this, linking directly to the file is recommended (e.g., README.md##). The goal is for the tooltips to appear as links without being clickable, making them easier to find.

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

One can also create linebreaks inside tooltips by using the 
 HTML entity.

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

Example text.

Inside Table

One 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*