DEV Community

Cover image for A complete guide for Markdown files
yaswanthteja
yaswanthteja

Posted on • Updated on

A complete guide for Markdown files

#markdown #markdowncheatsheet #beginners #tutorial

Image description

What is Markdown?

According to Wikipedia:

Markdown is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber and Aaron Swartz created Markdown in 2004 as a markup language that is appealing to human readers in its source code form. Markdown is widely used in blogging, instant messaging, online forums, collaborative software, documentation pages, and readme files.

A markdown file has .md extension and we can write and design text or useful information by following the basic syntaxes. It’s very popular and easy to use.

HTML tags are also supported in markdown.

Use Case

Markdown syntax is used in various popular places nowadays. You can also make websites using markdown files. This can be done using docsify.

Some popular platforms that use Markdown syntaxes and files are as follows -

  • GitHub
  • Hashnode
  • Dev.to
  • Discord and many other platforms.

Basic Syntaxes

Headings

Syntax:

# H1 - Heading 1
## H2 - Heading 2
### H3 - Heading 3
#### H4 - Heading 4
##### H5 - Heading 5
###### H6 - Heading 6
Enter fullscreen mode Exit fullscreen mode

Output:

H1 - Heading 1

H2 - Heading 2

H3 - Heading 3

H4 - Heading 4

H5 - Heading 5
H6 - Heading 6

--

Text

Syntax:

  • Strikethrough Text

Syntax:

Strikethrough uses two tildes. ~~Scratch this.~~
Enter fullscreen mode Exit fullscreen mode

output:
Strikethrough uses two tildes. Scratch this.

  • Blockquote Text

output:

> “I'm unpredictable, I never know where I'm going until I get there, I'm so random, I'm always growing, learning, changing, I'm never the same person twice. But one thing you can be sure of about me; is I will always do exactly what I want to do.”
Enter fullscreen mode Exit fullscreen mode

output:

“I'm unpredictable, I never know where I'm going until I get there, I'm so random, I'm always growing, learning, changing, I'm never the same person twice. But one thing you can be sure of about me; is I will always do exactly what I want to do.”

  • Bold

Syntax:

**DO NOT UNDERESTIMATE THE POWER OF A PROGRAMMER.**
Enter fullscreen mode Exit fullscreen mode

output:
DO NOT UNDERESTIMATE THE POWER OF A PROGRAMMER.

  • Italic

Syntax:

*It is Written in Italics*
Enter fullscreen mode Exit fullscreen mode

output:

It is Written in Italics

  • Bold and Italic

Syntax:

***You Can Combine Bold and Italics***
Enter fullscreen mode Exit fullscreen mode

output:
You Can Combine Bold and Italics

  • Highlight

To highlight a text, wrap it in == from both sides. For example, the following markdown:
Syntax Example:

I love ==markdown==
Enter fullscreen mode Exit fullscreen mode

output:

I love ==markdown==

  • Footnote Syntax: 
Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.
Enter fullscreen mode Exit fullscreen mode

output:

  • Emojis

Syntax:

:mango: :lemon: :man: :car:
Enter fullscreen mode Exit fullscreen mode

output:
🥭 🍋 👨 🚗

Links

  • Embedded Links Into Text

Syntax:

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

output:
Github

  • Image

Syntax:

![alt text](imagelink)
Enter fullscreen mode Exit fullscreen mode

output:

Image description

  • Embed YouTube Video

Syntax:

[![Alt Text](Thumbnail Image)](YOUTUBE VIDEO LINK)
Enter fullscreen mode Exit fullscreen mode

output
Alt Text

  • Embed GIF

Syntax:

![alt-text](gif link)
Enter fullscreen mode Exit fullscreen mode

output

alt-text

  • Horizontal Line Syntax: 
---
Enter fullscreen mode Exit fullscreen mode

output

Code

This can be written in 2 ways - Inline code and normal code

Syntax for inline code: 

Inline `code` has `back-ticks around` it.
Enter fullscreen mode Exit fullscreen mode

Output:

Inline code has back-ticks around it.

Syntax for normal code:

Blocks of Code 



```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```




 
```python
s = "Python syntax highlighting"
print s
```




 
```
No language indicated, so no syntax highlighting. 
But let's throw in a tag.
```
  • HTML Syntax: 
<p align="center">
 Yes, you can use allowed raw HTML in mark-down file.
 This is a paragraph aligned in the center.
</p>
Enter fullscreen mode Exit fullscreen mode

Output:

Yes, you can use allowed raw HTML in mark-down file. This is a paragraph aligned in the center.

Lists

Ordered Lists

Syntax:

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

Unordered Lists

Syntax:

- First item
- Second item
- Third item
Enter fullscreen mode Exit fullscreen mode

Output:

  • First item
  • Second item

  • Third item

  • To define a sub list
    Syntax:

* data 1
* data 2
    * data 21
    * data 22
* data 3
Enter fullscreen mode Exit fullscreen mode

Output:

  • data 1
  • data 2
    • data 21
    • data 22
  • data 3

Task List

Syntax:

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
Enter fullscreen mode Exit fullscreen mode

Output:

  • [x] Write the press release
  • [ ] Update the website
  • [ ] Contact the media

Table

Syntax:

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

Output:

Fruit Emoji
Mango 🥭
Lemon 🍋
  • Table With Alignments Syntax: 
| 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:

Fruit(left) Emoji(center) Taste(right)
Mango is the king of Fruits 🥭 Sweet and I love it
Lemon is good for health 🍋 Sour, mix it in the water

Mathematical Expressions

1.### Inline expressions:
Syntax:

$<<mathematical expression>>$
Enter fullscreen mode Exit fullscreen mode

Output:
Replace <<mathematical expression>> with your expression.

Example

Syntax:

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

Output:

Image description

  1. Block Expressions:

Syntax:

$$<<mathematical expression>>$$
Enter fullscreen mode Exit fullscreen mode

Example
$$\sqrt{3}+1$$

output

Image description

  1. Mixed Expressions:

Syntax

When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are 

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
Enter fullscreen mode Exit fullscreen mode

output

Image description

Conclusion

This is a comprehensive list for you all as your guide. Hope all went well and you enjoyed the article.

Hope this helps you. Thank you for reading, and let’s connect!

Oldest comments (0)

Read next

julianlasso profile image

How to install Docker CLI on Windows without Docker Desktop and not die trying

Julian Lasso 🇨🇴 -

archerallstars profile image

Install Cloudflare WARP on any Linux Distro, Thanks to Distrobox!

Archer Allstars -

rappernamegenerator profile image

** Rapper name generator:

Rappernamegenerator -

codewithcaen profile image

Create static directory listings on GitHub Actions/Pages

CodeWithCaen -