Write on Codementor: Markdown Cheat Sheet

This is a fork of markdown-here/wiki/Markdown-Cheatsheet

---

This cheat sheet is a reference for the Markdown syntax we support. We encourage you to follow this guide every time you write a post!

Useful Links

Before we dive into our Markdown syntax, here are a few useful links that will help turn your ideas into awesome posts 😄

• Writing guidelines
• Our review process

Table of Contents

You can manually create a table of contents using the syntax below.

[Headers](#headers)  
[Emphasis](#emphasis)  

Headers
Emphasis

Using [[toc]] will automatically create a table of contents using h2.

Headers

## H2
### H3
#### H4

H2

H3

H4

We recommend using H2 and H3 inside your post.

Emphasis

Throughout this cheat sheet, leading and trailing spaces are shown with dots ⋅

Emphasis (italics), with *asterisks* or _underscores_.⋅⋅
Strong emphasis (bold), with **asterisks** or __underscores__.⋅⋅
Combined emphasis with **asterisks and _underscores_**.⋅⋅
Strikethrough uses two tildes. ~~Scratch this.~~⋅⋅

Emphasis (italics), with asterisks or underscores.
Strong emphasis (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.⋅⋅
You can have properly indented paragraphs within list items. Notice the trailing spaces above.

* Unordered list can use asterisks
- Or minuses
+ Or pluses

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.
   You can have properly indented paragraphs within list items. Notice the trailing spaces above.

• Unordered list can use asterisks

• Or minuses

• Or pluses

Links

[I'm an inline-style link with title](https://www.codementor.io "Codementor's Homepage")⋅⋅
[I'm a reference-style link][Arbitrary case-insensitive reference text]⋅⋅
[I'm a relative reference to another post](/fmcorz/react-native-vs-ionic-du1087rsw)

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

URLs in angle brackets will automatically get turned into links.⋅⋅
http://www.example.com or <http://www.example.com>.

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

[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com

I'm an inline-style link with title
I'm a reference-style link
I'm a relative reference to another post

You can use numbers for reference-style link definitions

URLs in angle brackets will automatically get turned into links.
http://www.example.com or http://www.example.com.

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

Images

Here's a picture of the CodementorX banner (hover to see the title text).

Image with caption:

![CodementorX banner](https://s3-us-west-2.amazonaws.com/codementor-x/codementorX-facebook.png "CodementorX - Hire the world's top freelance developers")
*Hire the world's top freelance developers*

You can resize the image:

![CodementorX banner](https://s3-us-west-2.amazonaws.com/codementor-x/codementorX-facebook.png => width=50% "CodementorX - Hire the world's top freelance developers")

Images are centered by default. You can also float `left` or `right`:

![Codementor Android App](https://s3-us-west-2.amazonaws.com/codementor-mobile/android-notifications.png => width=35%, float=left "Codementor Android App")
Text automatically wraps around floated images. Use `{clearfix}` to clear the text wrapping.

{clearfix}

Text that is no longer wrapped to the image.

Here's a picture of the CodementorX banner (hover to see the title text).

Image with caption:

Hire the world's top freelance developers

You can resize the image:

Images are centered by default. You can also float left or right:

Text automatically wraps around floated images. Use {clearfix} to clear the text wrapping.

Text that is no longer wrapped to the image.

Code

Code blocks are part of the Markdown spec. Our version of Markdown also supports syntax highlighting — see the highlight.js demo page for which languages are supported and how to write the language names.

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

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. We recommend only using the fenced code blocks. They're easier to use, and only they support syntax highlighting.

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

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

Tables

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 |

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

There must be at least 3 dashes separating each header cell. 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

Markdown	Less	Pretty
Still	renders	nicely
1	2	3

Block Quotes

> Block quotes are very handy to emphasize 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 also *put* **Markdown** into a block quote. 

Block quotes are very handy to emphasize 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 also put Markdown into a block quote.

Horizontal Rules

Three or more...

---

Hyphens

***

Asterisks

___

Underscores

Three or more...

---

Hyphens

---

Asterisks

---

Underscores

Line Breaks

The best way to learn how line breaks work is to experiment and discover -- hit <Enter> once (i.e. insert one newline), then hit it twice (i.e. insert two newlines), and see what happens. You'll soon learn to get what you want.

Here are some basic rules to get you started:

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's the *same paragraph*.

Sometimes you may want a separate line in the same paragraph.⋅⋅
You'll need to use two trailing spaces and a newline.

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's the same paragraph.

Sometimes you may want a separate line in the same paragraph.
You'll need to use two trailing spaces and a newline.

Footnotes

Here is a footnote reference[^1]
[^1]: Here is the footnote.

Here is a footnote reference^[1]

abbr

HTML and CSS
*[HTML]: Hyper Text Markup Language
*[CSS]: Cascading Style Sheets

HTML and CSS

Link Embedding

We use Embedly to support embedding using this syntax:

@[alt text](source-url)

Here are a few examples embedding we support.

Twitter

@[Sample twitter embed](https://twitter.com/CodementorIO/status/845433810779025414)

Sample twitter embed

GitHub

@[TensorFlow repo](https://github.com/tensorflow/tensorflow)

TensorFlow repo

Slideshare

@[AngularJS interview questions](www.slideshare.net/slideshow/embed_code/key/nJDIR7vheHaS8)

AngularJS interview questions

YouTube videos

@[Introduction to Codementor](https://www.youtube.com/watch?v=27bLSdOE5vk)

Introduction to Codementor

Try out some other embeds like JSFiddle and CodePen

Math

We support displaying math using the KaTeX library. This is no longer supported.

You can choose to display your equation inline $e=mc^2$ or in a block:
$$x = \frac{{ - b \pm \sqrt {b^2 - 4ac} }}{{2a}}$$

You can choose to display your equation inline $e=mc^2$ or in a block:

$x = \frac{{ - b \pm \sqrt {b^2 - 4ac} }}{{2a}}$

Here's the full list of supported commands.

Twemojis

:D O:) :o B-)

If you have any questions about writing on Codementor, feel free to reach out to us at write@codementor.io.

---

1. Here is the footnote. ↩︎