DEV Community

Cover image for Markdown Cheat Sheet
Ganesh Shinde
Ganesh Shinde

Posted on

Markdown Cheat Sheet

#markdown #github #blogs #beginners

This cheat sheet is all you need to learn Markdown.
All the best creating those awesome README files and writing blogs.đź‘Ť

Table of Contents

Headers

Headers are defined by the '#' symbol. One '#' for H1, two for H2, etc.

# Heading 1

## Heading 2

...

###### Heading 6
Enter fullscreen mode Exit fullscreen mode

Heading 1

Heading 2

...

Heading 6

Quotes

Quotes are defined by the '>' symbol.

> This is quote

> ### This is header quote
Enter fullscreen mode Exit fullscreen mode

This is quote

This is header quote

Emphasis

Add emphasis with asterisks '*' and underscores '_'.

Two before and after (no spaces) a section of texts makes it bold.

**This text** is bold
Enter fullscreen mode Exit fullscreen mode

This text is bold

One before and after (no spaces) a section of texts makes it italic.

_This text_ is italic
Enter fullscreen mode Exit fullscreen mode

This text is italic

Create strike through text using tilde '~'.

Two before and after (no spaces) a section of texts makes it strike-through.

~~This text~~ is strike-through
Enter fullscreen mode Exit fullscreen mode

This text is strike-through

Horizontal Rule

A horizontal rule gives a visible line break. You can create one by putting three or more hyphens, asterisks or underscores (-, *, _).

---
Enter fullscreen mode Exit fullscreen mode

Lists

You can create sub-lists by indenting.

Create unordered lists using '-', '*', '+'.

- List Item 1
- List Item 2
- List Item 3
  - Sub-List Item 1
  - Sub-List Item 2
Enter fullscreen mode Exit fullscreen mode
  • List Item 1
  • List Item 2
  • List Item 3
    • Sub-List Item 1
    • Sub-List Item 2

Create ordered lists using a number prefix.

1. List Item 1
2. List Item 2
3. List Item 3
   1. Sub-List Item 1
   2. Sub-List Item 2
Enter fullscreen mode Exit fullscreen mode
  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. Sub-List Item 1
    2. Sub-List Item 2

Create task list using brackets [].

- [x] Task 1
- [x] Task 2
- [ ] Task 3
Enter fullscreen mode Exit fullscreen mode
  • [x] Task 1
  • [x] Task 2
  • [ ] Task 3

Note - Task list is supported by GitHub

Links

Create a link by surrounding it with angle bracket.

<https://github.com/ganesh-tyjo>
Enter fullscreen mode Exit fullscreen mode

https://github.com/ganesh-tyjo

Create a link with text by surrounding text with brackets, [], and link immediately following with parenthesis ().

[My GitHub Profile](https://github.com/ganesh-tyjo)
Enter fullscreen mode Exit fullscreen mode

My GitHub Profile

You can also show alias for your original link when mouse gets hover over your link. You can do that by providing alias immediately after specifying link in parenthesis ().

[My GitHub Profile](https://github.com/ganesh-tyjo 'github/ganesh-tyjo')
Enter fullscreen mode Exit fullscreen mode

My GitHub Profile

What if you needed to reuse a link several times? Well, you could copy and paste that link each time. That means, if you need to update the link, you will have to do it each time its used. There's a better way!

Create reference style links by defining your link with a 'key' inside of brackets, colon, space, and the link.

[my-profile-link]: https://github.com/ganesh-tyjo
Enter fullscreen mode Exit fullscreen mode

Then use the reference style link by using your text inside of brackets followed by the link 'key' inside of bracket.

[My GitHub Profile][my-profile-link]
Enter fullscreen mode Exit fullscreen mode

My GitHub Profile

You can also link to other locations on your markdown page. Remember, your Markdown will get converted to HTML, so you can, in theory, use a anchor tag to link to an element with a specific ID.

When you create a header tag, it implicitly creates an id property.

Ex - '# Header' becomes <h1 id="header">Header</h1>

Names will be converted to ids by replacing spaces with hyphens and uppercase letters with lowercase letters (think css naming convention).

Ex 'Header Info' becomes header-info

Now link to headers section of this document

[Go To Headers](#headers)
Enter fullscreen mode Exit fullscreen mode

Go To Headers

Images

Defining an image is similar to defining a link, except you prefix it with '!'.

![Markdown Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmqplzeeziemp2ztrw56.png)
Enter fullscreen mode Exit fullscreen mode

Markdown Logo

Code

You can do inline code with back-ticks.

`This text` is inline code
Enter fullscreen mode Exit fullscreen mode

This text is inline code

You can do blocks of code by surround it with 3 back-ticks.

Code Block Example

var num1 = 0;
var num2 = 0;
Enter fullscreen mode Exit fullscreen mode 
<div>
  <p>This is an html example</p>
</div>
Enter fullscreen mode Exit fullscreen mode 
npm install
Enter fullscreen mode Exit fullscreen mode

Tables

Tables are useful for displaying rows and columns of data. Column headers can be defined in between pipes (|). Headers are separated from table content with a row of dashes (-) (still separated by pipes), and there must be at least 3 dashes between each header. The row data follows beneath (still separated by pipes).

| Header 1    | Header 2    | Header 3    |
| ----------- | ----------- | ----------- |
| Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3 |
Enter fullscreen mode Exit fullscreen mode
Header 1 Header 2 Header 3
Row 1 Col 1 Row 1 Col 2 Row 1 Col 3

You can also align (center, left, right) the text in a column by using colons (:) in the line breaks between headers and rows. No colon means the default left alignment. Colons on each side signifies center alignment. And a trailing colon means right alignment.

| Header 1                                  |                 Header 2                  |                                  Header 3 |
| ----------------------------------------- | :---------------------------------------: | ----------------------------------------: |
| Aligned Left                              |              Aligned Center               |                             Aligned Right |
| Large string to show alignment is working | Large string to show alignment is working | Large string to show alignment is working |
Enter fullscreen mode Exit fullscreen mode
Header 1 Header 2 Header 3
Aligned Left Aligned Center Aligned Right
Large string to show alignment is working Large string to show alignment is working Large string to show alignment is working

Note - Table alignment supported by GitHub

Custom HTML

Since Markdown gets automatically converted to HTML, you can add raw HTML directly to your Markdown.

<p class="paragraph">This is a paragraph created with HTML</p>
Enter fullscreen mode Exit fullscreen mode

This is a paragraph created with HTML

Custom CSS

You can also add custom CSS to your Markdown to add additional styling to your document. You can also include CSS by including a style tag.

<style>
.paragraph{
  color:#31a1d6;
  border: 1px solid #e8e9ea;
  border-radius:15px;
  padding:10px;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Note - Custom CSS is supported by markdown but GitHub ignores custom CSS, so whatever written inside <style></style> tag won't show any difference in GitHub markdown preview. Also not sure which previewers supports custom CSS.

Top comments (2)

Collapse
 
abh1navv profile image
Abhinav Pandey •

Thanks. You taught me a couple of new ones - inline code and horizontal rule. Useful resource to keep handy.

Collapse
 
prakh_r profile image
Prakhar Yadav •

Thanks for this 🙂

Read next

furkangozukara profile image

Best open source Image to Video CogVideoX1.5-5B-I2V is pretty decent and optimized for low VRAM

Furkan Gözükara -

adriancolom profile image

CodeFast⚡by Marc Lou: (A Review of a “Learn by Doing” Coding Course for Entrepreneurs Learn to Build a SaaS in Just Two Weeks)

AdriánColom -

abhishekjaiswal_4896 profile image

Low-Level Design of a Music Player Application

Abhishek Jaiswal -

sathish_balaji_2003 profile image

Day - 1 of Java

SATHISH BALAJI -