Markdown Cheatsheet for developers

I prefer to use Markdown for basically everything I can, from writing a personal blog, tech articles and even my resume. There are only a few syntaxes that I most commonly use. This post is intended for those who are new to Markdown or need a refresh on its syntax.

Heading and List

# symbol is used for creating a heading. # is for H1. ## is for H2. You can use up to 6 # for H6

You can make an unordered list with - or *. To make an ordered list, use a a number. Below is an example of using heading and list.

#Why markdown? (H1)
##Reasons I like markdown (H2)
- Minimal, clean and less distraction for writing
- Good support for code blocks
- Can be exported to many formats including html, pdf, doc, latex, etc.
##My favorite markdown editors (H2)
1. Typora (Mac, Window)
2. Caret (Mac, Window)
3. Bear (Mac app store)

Why markdown?

Reasons I like markdown

• Minimal, clean and less distracting for writing
• Good support for code blocks
• Can be exported to many formats including html, pdf, doc, latex, etc.

My favorite markdown editors

1. Typora (Mac, Window)
2. Caret (Mac, Window)
3. Bear (Mac app store)

Code Blocks

You can call out code or a command within a sentence with single backticks. The text within the backticks will not be formatted. To format code or text into its own distinct block, use triple backticks.

```
def foobaz():
    print("you can use ` for code snippet")
```

def foobaz():
    print("you can use ` for code snippet")

Todo List

- [ ] Write an article weekly 
- [ ] Repair windshield wipers of car 🚘
- [x] Publish **this** to dev.to

• [ ] Write an article weekly
• [ ] Repair windshield wipers of car and add washer fluid 🚘
• [x] Publish this to dev.to

Styling

**STRONG**
*emphasis*
~~strikethrough~~
Math $e=mc^2$ 
Use *** or - - - for horizontal rule

STRONG

emphasis

strikethrough.

Math $e=mc^2$

---

Using Emoji

Typing : will bring up a list of suggested emojis, i.e :EMOJICODE:. For a full list of emojis, check out https://www.webpagefx.com/tools/emoji-cheat-sheet/

`:unicorn:` :unicorn:
`:+1:`:+1:

:unicorn: 🦄 (dev.to does not support emoji?)

:+1:👍

Link and Image

There are two ways to make links for text and images, inline and references.

Inline Link [link title](uri). Inline link can be be absolute or relative URIs (link within local resources).

Reference link [link][refereceID] is different from inline link in that it is using a [] for the second part instead of (). Also, you need to add an id reference later, so that markdown can link them together.

[referenceID] : www.google.com "Google"

Image is similar to inline and reference links, but there is an extra ! in in front.

Syntanx ![Cat Image](catURI) or ![Dog Image][huskyDogID]

[Reference link to dev.to website](dev.to)

![image](https://i2.wp.com/fullstop360.com/blog/wp-content/uploads/2017/05/design-quotes-for-inspiration-2.jpg?)

Reference Link to dev.to website

Footnote References[^1]:

Footnote References¹:

More

You can Use [toc] to create Table of Content.

Inline html and <pre> tags <span style="color: red">Red Text</span>

Red Text (should be red on fully supported Markdown editor)

Quote

>And so, my fellow Americans: ask not what your country can do for you — ask what you can do for your country

And so, my fellow Americans: ask not what your country can do for you — ask what you can do for your country

---

1. https://help.github.com/articles/basic-writing-and-formatting-syntax/ "Github" ↩

Comments

[Burdette Lamar]

I've posted a few markdown tips, and since then have put up Ruby gem markdown_helper, whose code and doc are on GitHub.

[Rattanak Chea]

awesome. Thanks for sharing.

[The Jared Wilcurt]

This really needs to show how you put a code block in a list without the list numbers starting over on the next item. Every markdown editor does it differently and it's annoying to trial and error without a live preview

1. Step 1 - npm install
2. Step 2 - Add this code

console.log('some code');

1. Step 3 - etc
2. Step 4 - etc
3. Step 5...

[Rattanak Chea]

I see what you mean. I use an app called Typora for WYSWYG

[Kemigisa Lailah Grant]

Thanks for the post, it is really great but I have a question, how did you add that car?

[Vuelancer]

• I have created a youtube tutorial for markdown file editor.
• youtu.be/x0Boemw9teU

[Sachin]

In my blogs on DEV.to, I want to add sections or info boxes, I tried to use Github syntax like :
> [!NOTE]
Outcome:

[!NOTE]

But it does not result in the desired outcome.

Desired outcome:

Is it possible to create sections?