DEV Community

Cover image for Learning Markdown
Frank
Frank

Posted on

Learning Markdown

Markdown is a lightweight markup language that you can use to add formatting elements to plain text. It’s widely used in writing documentation, readme files, blogs, and simple websites. If you’ve ever edited a post on Reddit, GitHub, or Stack Overflow, you’ve probably used Markdown without even realizing it.

In this guide, we’ll walk you through the basic syntax of Markdown and how to apply it. By the end, you’ll know how to write formatted text without ever needing to leave your keyboard.


Why Learn Markdown?

  • Easy to learn: Markdown is straightforward with simple syntax.
  • Widely used: From GitHub to documentation, Markdown is the default choice for writing plain text that needs to be easily readable.
  • Flexible: You can convert Markdown files into HTML, PDFs, or other formats using tools like Pandoc.
  • Portable: Since it’s plain text, you can open and edit Markdown files in any text editor.

Basic Syntax Overview

Here’s a quick overview of the most common Markdown syntax you’ll use:

Formatting Syntax
Headings #, ##, ###, etc.
Bold **text**
Italics *text* or _text_
Lists -, 1., *
Links [text](URL)
Images ![alt text](URL)
Blockquotes > text
Horizontal line ---
Code blocks ( enclose code in backticks)

1. Headings

Markdown allows you to create headings of different sizes. The more # symbols you use, the smaller the heading.

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

Output:

Heading 1

Heading 2

Heading 3

Use headings to structure your content, similar to headings in HTML (<h1>, <h2>, etc.).

2. Bold and Italics

To make text bold, wrap it in double asterisks (**) or underscores (__). To make text italic, wrap it in single asterisks (*) or underscores (_).

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

Output:

This is bold text

This is italic text

You can also combine both for added emphasis:

**_Bold and Italic_**

Enter fullscreen mode Exit fullscreen mode

3. Lists

Unordered Lists

Unordered lists are easy to create. Use -, +, or * followed by a space:

- Item 1
- Item 2
  - Subitem 2.1
  - Subitem 2.2
Enter fullscreen mode Exit fullscreen mode

Output:

  • Item 1
  • Item 2
    • Subitem 2.1
    • Subitem 2.2

Ordered Lists

For ordered lists, simply use numbers followed by a period (.):

1. First item
2. Second item
3. Third item
Enter fullscreen mode Exit fullscreen mode

Output:

  1. First item
  2. Second item
  3. Third item

4. Links and Images

Links

You can easily create links with the following syntax:

[Google](https://www.google.com)
Enter fullscreen mode Exit fullscreen mode

Output:

Google

Images

The syntax for images is similar to links, but it starts with an exclamation mark (!):

![Google Logo](https://en.wikipedia.org/wiki/Google_logo#/media/File:Google_logo_(2013-2015).svg)
Enter fullscreen mode Exit fullscreen mode

Output:

Google Logo

5. Code Blocks

For inline code (code that appears within a sentence), surround your code with backticks:

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

Output:

This is inline code.

For blocks of code, use triple backticks (

```), and specify the programming language if desired for syntax highlighting:

```python
def hello_world():
print("Hello, World!")
```

Output:



def hello_world():
    print("Hello, World!")


Enter fullscreen mode Exit fullscreen mode

6. Blockquotes

Blockquotes are useful for highlighting quotes or important information. Just start the line with a greater-than sign (>):



> This is a blockquote.


Enter fullscreen mode Exit fullscreen mode

Output:

This is a blockquote.

You can also nest blockquotes by adding multiple >:



> This is a blockquote.
>> This is a nested blockquote.


Enter fullscreen mode Exit fullscreen mode

Output:

This is a blockquote.

This is a nested blockquote.

7. Horizontal Lines

To insert a horizontal line (or divider), use three or more dashes (---):



---


Enter fullscreen mode Exit fullscreen mode

Output:


8. Tables

Markdown also supports creating tables, which can be useful for displaying data neatly. Use pipes (|) and hyphens (-) to structure your table:



| Name   | Age | Occupation |
|--------|-----|------------|
| Alice  | 25  | Engineer   |
| Bob    | 30  | Designer   |


Enter fullscreen mode Exit fullscreen mode

Output:

Name Age Occupation
Alice 25 Engineer
Bob 30 Designer

9. Task Lists

Markdown supports task lists, which are useful in checklists or to-do lists. To create one, use - [ ] for unchecked tasks and - [x] for checked tasks:


markdown
- [ ] Task 1
- [x] Task 2 (completed)


Enter fullscreen mode Exit fullscreen mode

Output:

  • [ ] Task 1
  • [x] Task 2 (completed)

You can download this cheat sheet as a Markdown file for use in your Markdown application.


Where Can You Use Markdown?

  • GitHub: It’s perfect for writing README.md files for projects.
  • Blogs: Static site generators like Dev Community and Jekyll use Markdown for creating blog posts.
  • Documentation: Tools like MkDocs and Docusaurus rely on Markdown for technical documentation.

Helpful Markdown Tools:

  • VS Code: Has built-in Markdown support, including a live preview.
  • Markdown Live Preview: markdownlivepreview.com lets you write and preview Markdown in real-time.
  • StackEdit: stackedit.io is an in-browser Markdown editor with version control support.

Markdown is a powerful tool for anyone who writes on the web. Its simplicity and readability make it a go-to format for developers, writers, and content creators. By mastering the basics, you’ll be able to create well-structured content in no time!

Start practicing today, and you’ll see how versatile Markdown is for your projects.


You’ve made it to the end and gotten smarter by learning about Markdown. Now, try practicing what you’ve learned. Good luck!

If you enjoyed this journey and would like to show your support, here’s how you can:

  • Follow me on Medium for more insightful content.

  • Connect with me on X, LinkedIn, and GitHub, where I consistently share valuable programming resources for free.

Top comments (1)

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Great work 👏

I learned markdown three years back as far as I remember and I used this wiki cheatsheet which is crazy famous.