Skip to content

Instantly share code, notes, and snippets.

@L1Cafe
Last active November 25, 2017 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save L1Cafe/4b01c50621ad4d4c0d36 to your computer and use it in GitHub Desktop.
Save L1Cafe/4b01c50621ad4d4c0d36 to your computer and use it in GitHub Desktop.
GitHub flavoured markdown cheatsheet

GitHub flavoured cheatsheet

This is a cheatsheet to help you write markdown for GitHub quickly, showing you the basics.

Text basics

this is italic and this is bold . another italic and another bold

this is important text. and percentage signs: % and %

this is *italic* and this is **bold** .  another _italic_ and another __bold__

this is `important` text. and percentage signs: % and `%`

Indentation

Here is some indented text

even more indented

even so more indented

you get the point

> Here is some indented text
>> even more indented
>>> even so more indented
>>>> you get the point

Titles

Also big title

Big title (h1)

Middle title (h2)

Smaller title (h3)

and so on (hX)

and so on (hX)
and so on (hX)
Also big title
==============
# Big title (h1)
## Middle title (h2)
### Smaller title (h3)
#### and so on (hX)
##### and so on (hX)
###### and so on (hX)

Lists

  1. Item 1
  2. A corollary to the above item.
  3. Yet another point to consider.
  4. Item 2
  • A corollary that does not need to be ordered.
    • This is indented four spaces, because it's two spaces further than the item above.
    • You might want to consider making a new list.
  1. Item 3
  2. The numbers you put
  3. do not actually
  4. matter at all 2. so the list still works even when not using proper enumeration
  • You can also use dashes or plus symbols
  • Like this
1. Item 1
  1. A corollary to the above item.
  2. Yet another point to consider.
2. Item 2
  * A corollary that does not need to be ordered.
    * This is indented four spaces, because it's two spaces further than the item above.
    * You might want to consider making a new list.
3. Item 3
  4. The numbers you put
  7. do not actually
  5. matter at all
    2. so the list still works even when not using proper enumeration

- You can also use dashes or plus symbols
+ Like this

Keys

To use keyboard keys, wrap the key in <kbd>. For example, to show CONTROL+V you would type: <kbd>CONTROL</kbd>+<kbd>V</kbd>.

Emoji

Github also brings some nice Emoji support: 👍 ❤️ 🍺 🆙 🆒 ☎️

:heart: :beer: :up: :cool: :phone:

Links

This is an example inline link and another one with a title.

Links can also be reference based: reference 1 or reference 2 with title.

This is an [example inline link](http://lmgtfy.com/) and [another one with a title](http://lmgtfy.com/ "Hello, world").

Links can also be reference based: [reference 1][ref1] or [reference 2 with title][ref2].

 [ref1]: http://revolunet.com
 [ref2]: http://revolunet.com "rich web apps"

Images

A sample image with alt:

revolunet logo

![revolunet logo](http://www.revolunet.com/static/parisjs8/img/logo-revolunet-carre.jpg "alt text")

As links, images can also use references instead of inline links:

![revolunet logo][revolunet-logo] [revolunet-logo]: http://www.revolunet.com/static/parisjs8/img/logo-revolunet-carre.jpg "revolunet logo"

![revolunet logo][revolunet-logo]
 [revolunet-logo]: http://www.revolunet.com/static/parisjs8/img/logo-revolunet-carre.jpg "revolunet logo"

Code

It's quite easy to show code in markdown files.

Backticks can be used to highlight some words.

Also, any indented block is considered a code block.

<script>
    document.location = 'http://lmgtfy.com/?q=markdown+cheat+sheet';
</script>

The recommended way, however, is to append three ` before the block of code, and three at the end of the code. In the first line, you can write the language the block of code is written in so that it gets automatically highlighted.

For example, some Python code:

import random

class CardGame(object):
    """ a sample python class """
    NB_CARDS = 32
    def __init__(self, cards=5):
        self.cards = random.sample(range(self.NB_CARDS), 5)
        print 'ready to play'
```python
import random

class CardGame(object):
    """ a sample python class """
    NB_CARDS = 32
    def __init__(self, cards=5):
        self.cards = random.sample(range(self.NB_CARDS), 5)
        print 'ready to play'
```

Tables

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:

Note that the columns don't need to match the text exactly.

First Header Second Header
Content Cell Content Cell
Content Cell Content Cell
First Header       | Second Header
-------- | -------------
Content Cell           | Content Cell
Content Cell  |           Content Cell

For aesthetic purposes, you can also add extra pipes on the ends:

First Header Second Header
Content Cell Content Cell
Content Cell Content Cell
| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

You can also include inline Markdown such as links, bold, italics, or strikethrough:

Name Description
Help Display the help window.
Close Closes a window
| Name       | Description                 |
| ---------- | --------------------------- |
| Help       | ~~Display the~~ help window.|
| **Close**  | _Closes_ a window           |

Finally, by including colons : within the header row, you can define text to be left-aligned, right-aligned, or center-aligned:

Left-Aligned Center Aligned Right Aligned
col 3 is some wordy text $1600
col 2 is centered $12
zebra stripes are neat $1
| Left-Aligned  | Center Aligned  | Right Aligned |
|:------------- |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |

A colon on the left-most side indicates a left-aligned column; a colon on the right-most side indicates a right-aligned column; a colon on both sides indicates a center-aligned column.

About

This plugin and this sample file is proudly brought to you by the revolunet team, and was greatly simplified, fixed, and overall cleaned by pyrobisqit

@DaveEveritt
Copy link

DaveEveritt commented Nov 25, 2017

It's worth noting that generating multiple blockquote > tags (e.g. >>>) to indent text is not going to generate semantic HTML; nested blockquote tags (often used in the 'early days' before CSS to do exactly this) are generally not good current practice.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment