DEV Community

Cover image for The Ultimate Markdown Cheat Sheet: A Blogger’s Best Friend
Kanani Nirav
Kanani Nirav

Posted on • Edited on

The Ultimate Markdown Cheat Sheet: A Blogger’s Best Friend

#markdown #cheatsheet #developers #productivity

In this article, we will discuss about Markdown and provide an easy-to-use Markdown Cheat Sheet.

What is Markdown?

Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. It allows us to add formatting elements to our documents without complex HTML or other markup languages. Markdown is widely used for creating content on websites, blogs, forums, and more. The best part? You don’t need any special software — just a plain text editor and this cheat sheet!

You can also start or fork this GitHub Repo if you like.

Github: Markdown cheat sheet

Heading 

# Heading 1
## Heading 2
### Heading 3
Enter fullscreen mode Exit fullscreen mode

Paragraph 

Paragraph
Enter fullscreen mode Exit fullscreen mode

Emphasized text 

_Emphasized text_ or *Emphasized text*
Enter fullscreen mode Exit fullscreen mode

Example: Emphasized text

Underlining Text 

<u> My Underlined Text</u>
Enter fullscreen mode Exit fullscreen mode

Example: My Underlined Text

Strike through text 

~~Strikethrough text~~
Enter fullscreen mode Exit fullscreen mode

Example: Strikethrough text

Superscript 

This is a <sup>superscript</sup> text
Enter fullscreen mode Exit fullscreen mode

Example: This is a superscript text

Strong text 

__Strong text__ or **Strong text**
Enter fullscreen mode Exit fullscreen mode

Example: Strong text

Strong emphasized text 

___Strong emphasized text___ or ***Strong emphasized text***
Enter fullscreen mode Exit fullscreen mode

Example:　Strong emphasized text

Text colors and fonts 

In his beard lived three <span style="color:red">cardinals</span>.
I am in <span style="font-family:Papyrus; font-size:4em;">LOVE!</span>
Enter fullscreen mode Exit fullscreen mode

Example:

  • In his beard lived three cardinals.
  • I am in LOVE!

Links 

[Sample Link](http://www.example.com/) and <http://example.com/>
Enter fullscreen mode Exit fullscreen mode

Example: Sample Link and http://example.com/

Goto Any heading 

[heading-1](#heading-1 "Goto heading-1")
Enter fullscreen mode Exit fullscreen mode

Example: Goto Heading

Table 

| First Header | Second Header |
| ------------ | ------------- |
| Content Cell | Content Cell  |
| Content Cell | Content Cell  |
Enter fullscreen mode Exit fullscreen mode

Example:

First Header Second Header
Content Cell Content Cell
Content Cell Content Cell

Adding a pipe | in a cell 

| First Header | Second Header |
| ------------ | ------------- |
| Content Cell | Content Cell  |
| Content Cell | \             |
Enter fullscreen mode Exit fullscreen mode

Example:

First Header Second Header
Content Cell Content Cell
Content Cell \

Left, right and center aligned table 

| Left aligned Header | Right aligned Header | Center aligned Header |
| :------------------ | -------------------: | :-------------------: |
| Content Cell        |         Content Cell |     Content Cell      |
| Content Cell        |         Content Cell |     Content Cell      |
Enter fullscreen mode Exit fullscreen mode

Example:

Left aligned Header Right aligned Header Center aligned Header
Content Cell Content Cell Content Cell
Content Cell Content Cell Content Cell

Quoting code 

Use `git status` to list all new or modified files that haven't yet been committed.
Enter fullscreen mode Exit fullscreen mode

Example: Use git status to list all new or modified files that haven't yet been committed.

code Block 

```ruby
```
Enter fullscreen mode Exit fullscreen mode

Example

def sum(a,b)
  a + b
end
Enter fullscreen mode Exit fullscreen mode

Bullet list 

* Bullet list
  * Nested bullet
    * Sub-nested bullet etc
* Bullet list item 2

-OR-

- Bullet list
  - Nested bullet
    - Sub-nested bullet etc
- Bullet list item 2
Enter fullscreen mode Exit fullscreen mode

Example:

  • Bullet list
    • Nested bullet
    • Sub-nested bullet etc
  • Bullet list item 2

Ordered List 

1. A numbered list
  1. A nested numbered list
  2. Which is numbered
2. Which is numbered
Enter fullscreen mode Exit fullscreen mode

Example:

  1. A numbered list
    1. A nested numbered list
    2. Which is numbered
  2. Which is numbered

Task List 

- [ ] An uncompleted task
- [x] A completed task
Enter fullscreen mode Exit fullscreen mode

Example:

  • [ ] An uncompleted task
  • [x] A completed task

Subtask 

- [ ] Project 1
  - [ ] Subtask 1
Enter fullscreen mode Exit fullscreen mode

Example:

  • [ ] Project 1
    • [ ] Subtask 1

Blockquote 

> Blockquote
>> Nested Blockquote
Enter fullscreen mode Exit fullscreen mode

Example:

Blockquote

Nested blockquote

Horizontal line 

- - - -
Enter fullscreen mode Exit fullscreen mode

Example:

Image with alt 

![picture alt](http://example.com/200x150)
Enter fullscreen mode Exit fullscreen mode

Example: picture alt

Foldable text 

<details>
  <summary>Title 1</summary>
  <p>Title 1 Title 1 Title 1</p>
</details>
Enter fullscreen mode Exit fullscreen mode

Example:

Title 1

Title 1 Title 1 Title 1

Title 2

Title 2 Title 2 Title 2

Link to a specific part of the page 

[text goes here](#section_name)
Enter fullscreen mode Exit fullscreen mode

Example: Go To TOP

Hotkey 

<kbd>⌘F</kbd>
Enter fullscreen mode Exit fullscreen mode

Example:

⌘F ⇧⌘F

Hotkey list

Key Symbol
Option ⌥
Control ⌃
Command ⌘
Shift ⇧
Caps Lock ⇪
Tab ⇥
Esc ⎋
Power ⌽
Return ↩
Delete ⌫
Up ↑
Down ↓
Left ←
Right →

Emoji

❗ Use emoji icons to enhance text. 👍 Look up emoji codes at emoji-cheat-sheet.com

Code appears between colons :EMOJICODE:
Enter fullscreen mode Exit fullscreen mode

Footnotes 

Here is a simple footnote[^1].

A footnote can also have multiple lines[^2].

[^1]: My reference.
[^2]: To add line breaks within a footnote, prefix new lines with 2 spaces.
  This is a second line.
Enter fullscreen mode Exit fullscreen mode

Example:

Here is a simple footnote1.

A footnote can also have multiple lines2.

image

Alerts 

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.
Enter fullscreen mode Exit fullscreen mode

Example:

image

Hiding content with comments 

<!-- This content will not appear in the rendered Markdown -->
Enter fullscreen mode Exit fullscreen mode

Reference: Markdown Guide

If You are using Medium Please support and follow me for interesting articles. Medium Profile

Subscribe to My Newsletter:

If you're ready to subscribe, simply click the link below:

Subscribe to My Newsletter

By clicking the link, you'll be directed to the newsletter page, where you can easily subscribe and receive regular updates delivered directly to your inbox. Don't miss out on the latest trends and expert analysis in software development.

Stay updated with my latest and most interesting articles by following me.

If this guide has been helpful to you and your team please share it with others!

  1. My reference. ↩

  2. To add line breaks within a footnote, prefix new lines with 2 spaces.
    This is a second line. ↩

Top comments (0)

Read next

jet_xu profile image

🚀 Introducing LlamaPReview - Free AI PR Review Assistant That Actually Understand Your Repo

Jet Xu -

reeshee profile image

6 Essential Features Every Web Starter Kit Should Include

Rishi Raj Jain -

valeriavg profile image

Interactive Components in Markdown

Valeria -

vardhaman619 profile image

My Experience With Modern Open Source CRM: Twenty CRM

Vardhaman Bhandari -