A complete guide for Markdown files
Tags: markdown, markdowncheatsheet, beginners, tutorial
Published: 2023-01-13 12:37:08


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yi22h5mcnroelw4nf29c.png)


## 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](https://docsify.js.org/#/?id=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
```
`Output:`

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

--
# Text

`Syntax:`


- Strikethrough Text

`Syntax:`

```markdown
Strikethrough uses two tildes. ~~Scratch this.~~
```
`output:`
Strikethrough uses two tildes. ~~Scratch this.~~

- ***Blockquote Text***

`output:`

```markdown
> “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.”
```
`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:`

```markdown
**DO NOT UNDERESTIMATE THE POWER OF A PROGRAMMER.**
```

`output:`
**DO NOT UNDERESTIMATE THE POWER OF A PROGRAMMER.**

- ***Italic***


`Syntax:`

```markdown
*It is Written in Italics*
```
`output:`

*It is Written in Italics*

- **Bold and Italic**

`Syntax:`

```markdown
***You Can Combine Bold and Italics***
```
`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:`

```markdown
I love ==markdown==
```
`output:`

I love ==markdown==


- ***Footnote***
`Syntax:`
```markdown
Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.
```
`output:`

[^1]: This is the footnote.


- ***Emojis***

`Syntax:`
```markdown
:mango: :lemon: :man: :car:
```
`output:`
:mango: :lemon: :man: :car:




# Links

- Embedded Links Into Text

`Syntax:`

```markdown
[Github](https://github.com/)
```
`output:`
[Github](https://github.com/)

- Image

`Syntax:`
```markdown
![alt text](imagelink)
```
`output:`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sitcma9oveam6s4am1ug.png)




-  ***Embed YouTube Video***

`Syntax:`
```markdown
[![Alt Text](Thumbnail Image)](YOUTUBE VIDEO LINK)
```
`output`
[![Alt Text](Thumbnail Image)](https://www.youtube.com/watch?v=Rwj6bHrmT5M)

-  ***Embed GIF***

`Syntax:`
```markdown
![alt-text](gif link)
```

`output`


![alt-text](https://github.com/yaswanthteja/Resources/blob/main/dino1.gif)






-  ***Horizontal Line***
`Syntax:`
```markdown
---
```
`output`

---






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

### Syntax for inline code:

```markdown
Inline `code` has `back-ticks around` it.
```
`Output:`

Inline `code` has `back-ticks around` it.



### Syntax for normal code:



#### Blocks of Code
<pre>
```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 <b>tag</b>.
```
</pre>


- HTML
`Syntax:`

````markdown
<p align="center">
 Yes, you can use allowed raw HTML in mark-down file.
 This is a paragraph aligned in the center.
</p>
```
`Output:`

<p align="center">
 Yes, you can use allowed raw HTML in mark-down file.
 This is a paragraph aligned in the center.
</p>


## Lists

#### Ordered Lists
`Syntax:`
```markdown
1. First item
2. Second item
3. Third item
```
`Output:`

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

#### Unordered Lists
`Syntax:`

```markdown
- First item
- Second item
- Third item
```

`Output:`

- First item
- Second item
- Third item

- To define a sub list
`Syntax:`

```markdown
* data 1
* data 2
    * data 21
    * data 22
* data 3
```
`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
```
`Output:`

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




# Table

`Syntax:`
```markdown
| Fruit | Emoji   |
| ----- | ------- |
| Mango | :mango: |
| Lemon | :lemon: |
```
`Output:`

| Fruit | Emoji   |
| ----- | ------- |
| Mango | :mango: |
| Lemon | :lemon: |



-  ***Table With Alignments***
`Syntax:`

```markdown
| 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 |
```
`Output:`

| 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 |


# Mathematical Expressions

1.### Inline expressions:
`Syntax:`

```markdown
$<<mathematical expression>>$
```
`Output:`
Replace `<<mathematical expression>>` with your expression.

`Example`

`Syntax:`

```markdown
$\sqrt{3}+1$
```
`Output:`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpwaw31rmz8x6g65ut1z.png)



2. ***Block Expressions***:

`Syntax:`
```markdown
$$<<mathematical expression>>$$
```
`Example`
$$\sqrt{3}+1$$

`output`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrj9oxne72ogohqal36t.png)



3. ***Mixed Expressions***:

`Syntax`


```markdown
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} $$
```
`output`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whw0c5tter4e996h5a6a.png)




- [Mathematical Equations github](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/writing-mathematical-expressions)
- [Mathematical formulas](https://en.wikibooks.org/wiki/LaTeX/Mathematics)


### 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!