DEV Community

Rattanak Chea
Rattanak Chea

Posted on

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:πŸ‘

emoji

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

image

Footnote References[^1]:

Footnote References1:

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" ↩

Top comments (7)

Collapse
 
thejaredwilcurt profile image
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');
Enter fullscreen mode Exit fullscreen mode
  1. Step 3 - etc
  2. Step 4 - etc
  3. Step 5...
Collapse
 
rattanakchea profile image
Rattanak Chea

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

Collapse
 
burdettelamar profile image
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.

Collapse
 
rattanakchea profile image
Rattanak Chea

awesome. Thanks for sharing.

Collapse
 
sagaofsilence profile image
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:
Markdown used to emphasize critical information

Is it possible to create sections?

Collapse
 
vuelancer profile image
Vuelancer
Collapse
 
lailahgrant profile image
Kemigisa Lailah Grant

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