Markdown Tutorial
user profile avatar
Tech Tales Team
Author

Published on β€’ πŸ•‘3 min read

Markdown Tutorial: From Basics to Advanced πŸš€πŸš€

2likes2

Blog views445

Listen to this blog
share this blog

Share Post

logoMarkdown Tutorial: From Basics to Advanced πŸš€πŸš€


Facebook
X
Whatsapp
Telegram
Reddit
Linkedin
Instapaper
Pinterest
Email
QR Code
More..

Markdown is a lightweight markup language that formats text with simple syntax. It's widely used for blog posts, documentation, and code comments. In this comprehensive guide, we'll cover all the essential Markdown elements, empowering you to easily write beautifully formatted content.

Headings

Headings are used to structure your content and create a hierarchy. Use the pound sign (#) to create headings of different levels:


# Heading 1 (Largest)
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6 (Smallest)

Emphasis

You can emphasize text using bold, italic, or both:


**Bold text**
*Italic text*
***Bold and italic text***

This will display as:

Bold text

Italic text

Bold and italic text

Links

Links are crucial for providing context and directing readers to relevant resources. Use square brackets [ ] for the link text and parentheses () for the URL:


[This is a link](https://www.example.com)

This will display as:
This is a link

Images

Images add visual interest and enhance your content. Use an exclamation mark (!) followed by square brackets [ ] for the alt text and parentheses () for the image URL:


![Github](https://github.blog/wp-content/uploads/2024/07/github-logo.png)

This will display as:

github logo

HyperlinkΒ andΒ ImagesΒ both syntax are same expect oneΒ exclamation markΒ (!) which is point beginning of theΒ Images tag.

Lists

Markdown supports both ordered and unordered lists:

Ordered Lists

Use numbers followed by a period (.) to create ordered lists:


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

Unordered Lists

Use hyphens (-), asterisks (*), or plus signs (+) to create unordered lists:


- First item
* Second item
+ Third item

Nested Lists

1. Item 1
   - Sub-item 1
   - Sub-item 2
2. Item 2
   - Sub-item 1
   - Sub-item 2

This will display as:

  1. Item 1
    • Sub-item 1
    • Sub-item 2
  2. Item 2
    • Sub-item 1
    • Sub-item 2

Code Blocks

Code blocks are essential for displaying code snippets within your content. Use triple backticks (```) to wrap the code:


```python
def greet(name):
  print(f"Hello, {name}!")

greet("World")
```

This will display as:

def greet(name):
  print(f"Hello, {name}!")

greet("World")

Inline Code

To add inline code blocks, just addΒ ` ` between the words. For example,Β 

This website uses `prism.js` for syntax highlighting.

This would display as:

This website uses prism.js for syntax highlighting.

BlockQuotes

To create a blockquote,Β start a line with greater than > followed by an optional space. Blockquotes can be nested, and can also contain other formatting. To keep the quote together, blank lines inside the quote must contain the > character.

>  I am not in danger, Skyler. I am the danger. 
    A guy opens his door and gets shot, and you think that of me? 
    No. I am the one who knocks!

This will display as:

I am not in danger, Skyler. I am the danger. A guy opens his door and gets shot, and you think that of me? No. I am the one who knocks!

Tables

Tables allow you to organize data effectively:


| Header 1 | Header 2 |
|---|---|
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |

This will display as:

Header 1

Header 2

Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2

Horizontal Rules

Use three or more hyphens (-) to create a horizontal rule:


---

Line Breaks

To create a line break, use two spaces at the end of a line, followed by a new line:


This is a line. 
This is another line.

Escaping Characters

If you need to use a special character like a backslash (\) or an asterisk (*) within your text, escape it with a backslash (\):


This is a line with a backslash: \
This is a line with an asterisk: \*

Conclusion

Now you're equipped with the essential Markdown knowledge to write beautifully formatted content. Practice these elements and explore further advanced features to unlock the full potential of Markdown. Don’t wait for the perfect moment to learn Markdown. The power to simplify and enhance your writing is already within your reach. Start today, and watch how this simple tool transforms the way you create, share, and collaborate. Happy writing!

Resources

Markdown can render differently on various platforms and you can preview how your code will look on MarkdownLivePreview. Other useful resources include:

  • CommonMark – A markdown specification with better clarity and compatibility
  • babelmark3 - A tool to see and compare the output of different markdown engines for a given input.

Like what you see? Share with a Friend

share this blog

Share

Share Post

logoMarkdown Tutorial: From Basics to Advanced πŸš€πŸš€


Facebook
X
Whatsapp
Telegram
Reddit
Linkedin
Instapaper
Pinterest
Email
QR Code
More..

2 Comments

2 Likes

Comments (2)

sort comments

Before you comment please read our community guidelines


Please Login or Register to comment

user profile avatarHide Comment

Tech Wizard

Admin

Published on

>I am not in danger skyler, I am the danger πŸ’€

GIF

the donHide Reply

the don

β€’ Oct 28, 2024
Goated 🐐
user profile avatarHide Comment

diamond degesh

Published on

Markdown is useful especially when writing documentation for github projects

Tech Wizard Hide Reply

Tech Wizard

β€’ Oct 28, 2024
Now i have to create a markdown to html converter, this is a good project idea πŸ˜‚πŸ˜‚
the donHide Reply

the don

β€’ Oct 28, 2024
Now I feel like a pro, I wouldn't have ChatGPT write my Readme.md files πŸ“‚ πŸ˜‚πŸ˜‚πŸ˜‚β˜ οΈ