Debug School

Cover image for GitHub Markdown Cheatsheet
Suyash Sambhare
Suyash Sambhare

Posted on

GitHub Markdown Cheatsheet

#devops #github #markdown #readme

This cheatsheet is specifically Markdown Here's version of Github-flavored Markdown. This differs slightly in styling and syntax from what Github uses, so what you see below might vary a little from what you get in a Markdown Here email, but it should be pretty close.

Headers 

Headers
# H1
## H2
### H3
#### H4
##### H5
###### H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------
Enter fullscreen mode Exit fullscreen mode

Demo

Headers

H1

H2

H3

H4

H5
H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1

Alt-H2

Emphasis 

Emphasis, aka italics, with *asterisks* or _underscores_.
Strong emphasis, aka bold, with **asterisks** or __underscores__.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~
Enter fullscreen mode Exit fullscreen mode

Demo

Emphasis, aka italics, with asterisks or underscores.
Strong emphasis, aka bold, with asterisks or underscores.
Combined emphasis with asterisks and underscores.
Strikethrough uses two tildes. Scratch this.

Lists 

1. First ordered list item
2. Another item
  * Unordered sub-list. 
1. Actual numbers don't matter, just that it's a number
  1. Ordered sub-list
4. And another item.  

   Some text that should be aligned with the above item.

* Unordered list can use asterisks
- Or minuses
+ Or pluses
Enter fullscreen mode Exit fullscreen mode

Demo

  1. First ordered list item
  2. Another item
    • Unordered sub-list.
  3. Actual numbers don't matter, just that it's a number
    1. Ordered sub-list
  4. And another item. Some text that should be aligned with the above item.
  5. Unordered list can use asterisks
  6. Or minuses
  7. Or pluses

Markdown

Links 

There are two ways to create links.

[I'm an inline-style link](https://www.debug.school/)

[I'm a reference-style link][Arbitrary case-insensitive reference text]

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself]

URLs and URLs in angle brackets will automatically get turned into links. 
https://www.linkedin.com/in/suyashsambhare/ or <https://www.linkedin.com/in/suyashsambhare/> and sometimes 
www.linkedin.com/in/suyashsambhare .

Some text to show that the reference links can follow later.
Enter fullscreen mode Exit fullscreen mode

Demo

There are two ways to create links.

I'm an inline-style link

I'm a reference-style link

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself

URLs and URLs in angle brackets will automatically get turned into links.
https://www.linkedin.com/in/suyashsambhare/ or https://www.linkedin.com/in/suyashsambhare/ and sometimes
www.linkedin.com/in/suyashsambhare .

Some text to show that the reference links can follow later.

Images 

Here's an image (hover to see the title text):

Inline-style: 
![alt text](https://www.debug.school/uploads/articles/hg2oizyhhlpwxlqh99ic.png "Title Text 1")

Reference-style: 
![alt text][logo]
Enter fullscreen mode Exit fullscreen mode

Here's an image (hover to see the title text):

Inline-style:
alt text

Reference-style:
alt text

Code and Syntax Highlighting

Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and Markdown Here -- support syntax highlighting. Markdown Here supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the highlight.js demo page.

Inline `code` has `back-ticks around` it.

Blocks of code are either fenced by lines with three back-ticks ` ` `, or are indented with four spaces. It is recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.

` ` `javascript
var s = "JavaScript syntax highlighting";
alert(s);
` ` `

` ` `python
s = "Python syntax highlighting"
print s
` ` `

` ` `
No language indicated, so no syntax highlighting. 
But let's throw in a <b>tag</b>.
` ` `
Enter fullscreen mode Exit fullscreen mode

Demo

Inline code has back-ticks around it.

var s = "JavaScript syntax highlighting";
alert(s);
Enter fullscreen mode Exit fullscreen mode 
s = "Python syntax highlighting"
print s
Enter fullscreen mode Exit fullscreen mode 
No language indicated, so no syntax highlighting. 
But let's throw in a <b>tag</b>.
Enter fullscreen mode Exit fullscreen mode

Tables

Tables aren't part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |
The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
Colons can be used to align columns.

Tables  Are Cool
col 3 is    right-aligned   $1600
col 2 is    centered    $12
zebra stripes   are neat    $1
The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown    Less    Pretty
Still   renders nicely
1   2   3
Enter fullscreen mode Exit fullscreen mode

Demo

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1
The outer pipes ( ) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.
Markdown Less Pretty
Still renders nicely
1 2 3

Colons can be used to align columns.

Blockquotes 

> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
Enter fullscreen mode Exit fullscreen mode

Demo

Blockquotes are very handy in email to emulate reply text.
This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Inline HTML

You can also use raw HTML in your Markdown, and it'll mostly work pretty well.

<dl>
  <dt>Definition list</dt>
  <dd>Is something people use sometimes.</dd>

  <dt>Markdown in HTML</dt>
  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

Demo

Definition list
Is something people use sometimes.
Markdown in HTML
Does *not* work **very** well. Use HTML tags.

Ref: https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet

Top comments (0)