README.md

Github Markdown Snippets

Markdown files on github can be styled using either github flavored markdown or with certain html tags and attributes. These snippets should serve as a cheatsheet and a reference list of several different techniques.

Table of Contents Basic Formatting Headers Italics Bold Strikethrough Links Code Quotes Tables Lists Images HTML Tags Attributes Entities Emojis Text Subscripts Superscripts Alignments Center Aligned Right Aligned Split Page Triple Alignment Images Specify Size Style Surround by Box Divider Line Hotkey Styling Dropdown / Collapsing / Spoilers Start-of-line Asterisk Composed Table of Contents Captioned Image

Basic Formatting

This section goes over Github flavored markdown (sometimes abbreviated GFM), without any advanced use of html or the like. This is meant to quickly outline most of the GFM spec with direct visual examples.

Headers

# 1
## 2
### 3
#### 4
##### 5
###### 6

1

2

3

4

5

6

Any further amount of #'s do not work:

####### 7

####### 7

1
=

2
-

multi <br>
line
-

1

2

multi
line

Italics

*text*

text

Bold

**text**

text

__text__

text

Strikethrough

~~text~~

text

Links

[text](https://www.google.com/)
<a href="https://www.google.com/">text</a>

text text

[text](https://www.google.com/ "tooltip")
<a href="https://www.google.com/" title="tooltip">text</a>

text text

[link to relative path](dev/example.png)
[link to header id](#links)

link to relative path link to header id

Code

non-code `inline-code`

non-code inline-code

```
multi-line
code
```

    alternatively,
    indent with 4 spaces

multi-line
code

alternatively,
indent with 4 spaces

```c
// syntax-highlighted
int main()
{
	printf("multi-line code");
}
```

// syntax-highlighted
int main()
{
	printf("multi-line code");
}

A list of languages with syntax highlighting can be found here. In the case of languages that include spaces in their name, like Spline Font Database, it should be rewritten to use dashes like Spline-Font-Database.

Quotes

> text

text

> multi-line <br>
> quote
> > nested quote

multi-line
quote

nested quote

Tables

Cat 1 | Cat 2 | Cat 3 | Cat 4
----- | ----- |:-----:| -----:
text | text | text | text
more text | more text | centered text | right-aligned text
 | | | | 

Cat 1	Cat 2	Cat 3	Cat 4
text	text	text	text
more text	more text	centered text	right-aligned text

Lists

* text
* text
  * text
    * text
      * text

• text
• text
  • text
    • text
      • text

1. text
2. text
   1. text
      1. text
         1. text

1. text
2. text
   1. text
      1. text
         1. text

- [ ] text
- [X] text
  - [X] text
    - [X] text
- [X] text
  * text
    * text
  1. text
     1. text

• text
• text
  • text
    • text
• text
  • text
    • text
  1. text
     1. text

Images

![alt text](https://github.com/JarateKing/Github-Markdown-Snippets/blob/master/dev/example.png)
![alt text](dev/example.png)

HTML

Github flavored markdown supports HTML tags and attributes, and is useful for advanced techniques within markdown. There's a whitelist of supported tags and attributes however, and the HTML that is usable is very restrictive.

Tags

The code for the whitelisted tags can be found here

div ins del sup sub p ol ul table thead tbody tfoot blockquote
dl dt dd kbd q samp var hr ruby rt rp li tr td th s strike summary
details caption figure figcaption
abbr bdo cite dfn mark small span time wbr

Attributes

The code for the whitelisted attributes can be found here

abbr accept accept-charset
accesskey action align alt
aria-describedby aria-hidden aria-label aria-labelledby
axis border cellpadding cellspacing char
charoff charset checked
clear cols colspan color
compact coords datetime dir
disabled enctype for frame
headers height hreflang
hspace ismap label lang
maxlength media method
multiple name nohref noshade
nowrap open prompt readonly rel rev
rows rowspan rules scope
selected shape size span
start summary tabindex target
title type usemap valign value
vspace width itemprop

Entities

A list of named html entities can be found here

Some common ones:

Code	Appearance
©	©
®	®
¶	¶
µ	µ
×	×
÷	÷
°	°
±	±

Html entities can be referenced by their unicode number. For example, © is equivalent to © (for hexadecimal) or © (for decimal).

Emojis

A list of valid emoji shortcodes can be found here

:shark:

🦈

Some have multiple synonyms:

:hankey: :poop: :shit:

💩 💩 💩

Github provides multiple unofficial emoji shortcodes as well:

:godmode:

Text

Subscripts

text<sub>subscript</sub>

text_subscript

Superscripts

text<sup>superscript</sup>

text^superscript

Alignments

Center Aligned

<p align="center">text</p>

text

Right Aligned

<p align="right">text</p>

text

Split Page

<table><tbody><tr>
<td width="50%">Left Text</td>
<td width="50%">Right Text</td>
<td></td></tr></tbody></table>

Left Text

Right Text

Triple Alignment

Note: this only works well for single words, and when the left and right aligned texts are approximately the same length (such as with "prev" and "next", for example). The percents can be fiddled with otherwise, but is less likely to work.

<table><tbody><tr>
<td>Left Aligned</td>
<td  width="50%"></td>
<td>Center Aligned</td>
<td  width="50%"></td>
<td>Right Aligned</td>
</tr></tbody></table>

Left Aligned

Center Aligned

Right Aligned

Images

Specify Size

<img width="10" height="10" src="https://placehold.it/15/ff0000/000000?text=+">
<img width="50" height="50" src="https://placehold.it/15/ff0000/000000?text=+">

Style

Surround By Box

<table><tbody><tr>
<td>Text to surround box with</td>
</tr></tbody></table>

Text to surround box with

<table border="1"><tbody><tr>
<td width="100%">Text to surround box with</td>
<td></td></tr></tbody></table>

Text to surround box with

Divider Line

#
##

---
***
___
<hr>

---

---

---

---

<img width="100%" height="3" src="https://placehold.it/15/eeeeee/000000?text=+">

Hotkey Styling

<kbd>Text</kbd>

Text

Dropdown / Collapsing / Spoilers

<details><summary>Click</summary>
Text</details>

Click

Text

<details><summary>Click</summary>
  
* Text
* Text
* Text</details>

Click

• Text
• Text
• Text

Start-of-line Asterisk

Normally, having an asterisk at the start of a line will become a list. If you want to keep it as an asterisk, you can add a slash character in front of it. This same logic will also apply to other markdown concepts.

* Text

• Text

\* Text

* Text

The same concept applies to other characters as well, such as:

\# Text

# Text

Composed

Table of Contents

<table><tbody><tr>
<td><details><summary>Table of Contents</summary>

1. [Category 1](#html)
   1. [Subcategory 1](#tags)
   2. [Subcategory 2](#attributes)
2. [Category 2](#text)
3. [Category 3](#alignments)
</details></td>
</tr></tbody></table>

Table of Contents Category 1 Subcategory 1 Subcategory 2 Category 2 Category 3

Captioned Image

<table><tbody><tr>
<td>
	
<p align="center">
<img src="https://github.com/JarateKing/Github-Markdown-Snippets/blob/master/dev/example.png">
</p>

<p align="center"><sub>Example Caption Here</sub></p>
</td>
</tr></tbody></table>

Example Caption Here

<table><tbody><tr><td><p align="center">
<img src="https://github.com/JarateKing/Github-Markdown-Snippets/blob/master/dev/example.png"></p>
<p align="center"><sub>Longer caption, to demonstrate how the panel resizes with more text</sub></p>
</td></tr></tbody></table>

Longer caption, to demonstrate how the panel resizes with more text