DEV Community

Cover image for Complete Markdown Tutorial for Beginners
Devarshi Shimpi
Devarshi Shimpi

Posted on • Edited on • Originally published at devarshi.dev

Complete Markdown Tutorial for Beginners

#tutorial #webdev #markdown #beginners

Introduction

Markdown is a lightweight markup language that allows you to format plain text in a structured way, making it a popular choice for creating content across various platforms. Whether you're a coding enthusiast or a novice, Markdown's simplicity and versatility can streamline your content creation process. In this comprehensive guide, we'll explore the key features of Markdown that can empower you to create visually appealing and organized documents.

Feel free to checkout the below video I made for this tutorial as well.

Feel free to star ⭐️ the Github repo as well. Where I have added everything in a systematic order in the repository. Feel free to raise issues/PRs in the repo as well!

GitHub logo devarshishimpi / markdown-tutorial

This repository contains a well crafted tutorial that covers the aspects of Markdown, from the basics to advanced techniques.

Markdown Tutorial

This repository contains a well crafted tutorial that covers the aspects of Markdown, from the basics to advanced techniques.

Please give this repo a ⭐ if you found it helpful!

Feel free to checkout the below video I made for this tutorial as well.

Video

Headings

Headings play a crucial role in organising your content. Markdown offers six levels of headings, each indicated by an increasing number of hash symbols (#).

These headings provide hierarchy and improve readability, allowing readers to navigate your content effortlessly.

# H1 - Heading 1
## H2 - Heading 2
### H3 - Heading 3
#### H4 - Heading 4
##### H5 - Heading 5
###### H6 - Heading 6

Output:

H1 - Heading 1

H2 - Heading 2

H3 - Heading 3

H4 - Heading 4

H5 - Heading 5
H6 - Heading 6

CodeBlocks

Markdown's ability to display code snippets in a…

View on GitHub

1. Structuring Your Content with Headings

Headings play a crucial role in organising your content. Markdown offers six levels of headings, each indicated by an increasing number of hash symbols (#).

These headings provide hierarchy and improve readability, allowing readers to navigate your content effortlessly.

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

Output:

heading-output

2. Showcasing Code with Code Blocks

Markdown's ability to display code snippets in a clean and readable manner is invaluable. To display inline code, wrap it with backticks. For example:

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

Output:

This is inline code

To present larger code blocks, use triple backticks:

codeblock-input

Output:

This is a codeblock.
Enter fullscreen mode Exit fullscreen mode

3. Organizing Information with Lists

Lists are effective for presenting information in a structured manner. Markdown supports both unordered and ordered lists.

For unordered lists, use hyphens (-), plus signs (+), or asterisks (*) followed by a space:

* Item 1
* Item 2
* Item 3
Enter fullscreen mode Exit fullscreen mode

Output:

  • Item 1
  • Item 2
  • Item 3

Ordered lists use numbers followed by periods and spaces:

1. Step 1
2. Step 2
3. Step 3
Enter fullscreen mode Exit fullscreen mode

Output:

  1. Step 1
  2. Step 2
  3. Step 3

4. Interactive Content with Checkbox Task Lists

Markdown allows you to create interactive task lists using checkboxes:

- [X] Task 1
- [ ] Task 2
Enter fullscreen mode Exit fullscreen mode

Output:

tasks-output

These lists are handy for tracking to-do items or tasks within your documents.

5. Emphasis and Style with Text Formatting

Markdown offers various text formatting options. For bold text, enclose it with double asterisks (bold text). For italic text, use single asterisks (italic text). And for strikethrough text, use double tildes (strikethrough).

**This is a bold text**

*This is italic text*

***This is combined of both***
Enter fullscreen mode Exit fullscreen mode

Output:

This is a bold text

This is italic text

This is combined of both

6. Enhancing Interaction with Links and Images

Adding links and images enriches your content. To insert links, enclose link text in square brackets followed by the URL in parentheses:

[Visit my Github](https://github.com/devarshishimpi)
Enter fullscreen mode Exit fullscreen mode

Output:

Visit my Github

For images, use an exclamation mark followed by alt text in square brackets and the image URL in parentheses:

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

Output:

markdowndevtoimage


7. Organizing Data with Tables

Markdown's table syntax is excellent for tabular data:

| Fruit | Emoji |
| ------ | ------ |
| Mango | :mango: |
| Lemon | :lemon: |
Enter fullscreen mode Exit fullscreen mode

Output:

Fruit Emoji
Mango 🥭
Lemon 🍋

You can even align content within columns for a polished look.

| Fruit (left) | Emoji (center) | Taste (right) |
| :--- | :----: | ---: |
| Mango is the king of Fruits | :mango: | Sweet and I love it |
| Lemon is good for health | :lemon: | Sour, mix it in the water |
Enter fullscreen mode Exit fullscreen mode

Output:

output-table

8. Separating Sections with Horizontal Lines

Horizontal lines help divide your content into distinct sections, enhancing readability:

---
Enter fullscreen mode Exit fullscreen mode

Output:

line-output

9. Custom Formatting with HTML in Markdown

Markdown's flexibility is further extended by allowing HTML tags for advanced formatting. For instance, you can align content using HTML attributes like align:

<p align="center">
Yes, you can use allowed raw HTML in a Markdown file. This is a paragraph aligned in the center.
</p>
Enter fullscreen mode Exit fullscreen mode

Output:

html-md

10. Embedding YouTube Videos for Dynamic Content

You can embed YouTube videos directly into Markdown:

[![Video](./markdownyt.png)](https://www.youtube.com/watch?v=jCgVc9885oQ)
Enter fullscreen mode Exit fullscreen mode

Output:

This makes your content more engaging by incorporating multimedia elements.

11. Including Mathematical Expressions for Technical Content

For math enthusiasts, Markdown supports inline and block mathematical expressions using dollar signs ($):

Inline:

$\sqrt{5}+1$
Enter fullscreen mode Exit fullscreen mode

Block:




$$
\sqrt{5}+1
$$
Enter fullscreen mode Exit fullscreen mode

12. Creating Interactive Drop-Down Sections with DropDown

Markdown's details element lets you create interactive drop-down sections. It's perfect for hiding spoilers or additional information:

<details><summary>Click to reveal</summary>
This is a hidden section. Click to reveal its content.
</details>
Enter fullscreen mode Exit fullscreen mode

13. Visual Representation with Diagrams

You can create diagrams using the Mermaid syntax directly in Markdown:

mermaid-syntax

Output:

mermaid-output

14. Annotating Your Content with Comments

Markdown supports comments that won't appear in the final output:

<!-- This is a comment that won't be visible -->
Enter fullscreen mode Exit fullscreen mode

Conclusion

Markdown is a versatile tool that empowers you to create structured and visually appealing content. With its support for headings, code blocks, lists, formatting, links, images, tables, and interactive elements like checkboxes and drop-downs, Markdown transforms plain text into an engaging and organized document.

Feel free to star ⭐️ the Github repo as well. Where I have added everything in a systematic order in the repository. Feel free to raise issues/PRs in the repo as well!

GitHub logo devarshishimpi / markdown-tutorial

This repository contains a well crafted tutorial that covers the aspects of Markdown, from the basics to advanced techniques.

Markdown Tutorial

This repository contains a well crafted tutorial that covers the aspects of Markdown, from the basics to advanced techniques.

Please give this repo a ⭐ if you found it helpful!

Feel free to checkout the below video I made for this tutorial as well.

Video

Headings

Headings play a crucial role in organising your content. Markdown offers six levels of headings, each indicated by an increasing number of hash symbols (#).

These headings provide hierarchy and improve readability, allowing readers to navigate your content effortlessly.

# H1 - Heading 1
## H2 - Heading 2
### H3 - Heading 3
#### H4 - Heading 4
##### H5 - Heading 5
###### H6 - Heading 6

Output:

H1 - Heading 1

H2 - Heading 2

H3 - Heading 3

H4 - Heading 4

H5 - Heading 5
H6 - Heading 6

CodeBlocks

Markdown's ability to display code snippets in a…


View on GitHub


Thank you for reading! If you found this blog post helpful, please consider sharing it with others who might benefit. Feel free to check out my other blog posts and visit my socials!

Read more

Top comments (0)

Read next

abhay_yt_52a8e72b213be229 profile image

Implementing Route Guards in React: Protecting Your Routes with Authentication and Roles

Abhay Singh Kathayat -

takuuu profile image

Comparing Rust's and_then and map for Option Handling

Takuu Kaku -

abhay_yt_52a8e72b213be229 profile image

Controlled vs Uncontrolled Components in React: Choosing the Right Approach

Abhay Singh Kathayat -

prince_beec5ccde00b7c6c73 profile image

Toggle Switch Realistic illusion using the core html and core Css Code

Prince -