Table of contents
What Is Markdown?
Markdown is a plain text formatting syntax used to write content on the web, It doesn’t take long to learn the Markdown syntax, and once you know how to use it, you can write using Markdown just about everywhere.Markdown is commonly used by programmers and content writers to write quickly without having to take time using editors. Markdown is also good for formatting everything from email messages to grocery lists.
Basic syntax
Nearly all markdown applications use the basic syntax, let's learn all the basic formatting techniques that you will get to start with markdown in no time.
Headings
Any line which is prefixed with # is converted to a heading the number of # indicates the level of heading for eg, One # goes from h1 till h6
| Markdown | HTML | Final Output |
# Heading level 1 | <h1>Heading level 1</h1> | Heading level 1 |
## Heading level 2 | <h2>Heading level 2</h2> | Heading level 2 |
### Heading level 3 | <h3>Heading level 1</h3> | Heading level 3 |
#### Heading level 4 | <h4>Heading level 1</h4> | Heading level 4 |
##### Heading level 5 | <h5>Heading level 1</h5> | Heading level 4 |
###### Heading level 5 | <h6>Heading level 1</h6> | Heading level 5 |
Alternate Syntax
Use ==== form h1 and ---- form h2 Below your heading Alternate way of using the heading
| Markdown | HTML | Final Output |
Heading level 1 example ----------------------- | <h1>Heading level 1 example</h1> | Heading level 1 example |
Heading level 2 example ======================= | <h2>Heading level 2 example </h2> | Heading level 2 example |
Paragraphs
| Markdown | HTML | Final Output |
lorem Ipsum is simply dummy text of the printing and typesetting industry | <p>lorem Ipsum is simply dummy text of the printing and typesetting industry</p> | lorem Ipsum is simply dummy text of the printing and typesetting industry |
Lorem Ipsum is simply dummy | <p> Lorem Ipsum is simply dummy </p> | Lorem Ipsum is simply dummy |
Line Breaks
To add a line break <br> use two or more spaces and then return.
| Markdown | HTML | Final Output |
This is first line example. And this is second example | <p>This is first line example.<br> And this is second example</p> | This is first line example. And this is second example |
Emphasis
Bold
To bold text, add ** or __ before and after the text,
| Markdown | HTML | Final Output |
**This text is bold** | <b>This text is bold</b> | This text is bold |
__This text is bold__ | <b>This text is bold</b> | This text is bold |
This text is**bold** | This text is <b>bold</b> | This text is bold |
Italic
To italicize text, add * or _ before and after the text,
| Markdown | HTML | Final Output |
*This text is Italic* | <em>This text is Italic</em> | This text is Italic |
_This text is Italic_ | <b>This text is Italic</b> | This text is Italic |
This text is*Italic* | This text is <em>Italic</em> | This text is Italic |
Bold and Italic
| Markdown | HTML | Final Output |
__*This text is Italic and bold*__ | <em><b>This text is Italic and bold </b></em> | This text is Italic and bold |
This text is _**Italic and bold**_ | This text is <em><b>Italic and bold </b></em> | This text is Italic and bold |
This text is__*Italic*__ | This text is <em><b>italic</b></em> and <em><b>bold</b></em> | This text is italic and bold |
Blockquotes
To create Blockquotes, just add > before your text or paragraph.
Example
> Lorem Ipsum is simply dummy text of the printing and typesetting industry
Output
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Blockquotes with Multiple Paragraphs
Example
> Lorem Ipsum is simply dummy text of the printing and typesetting industry
> unchanged. It was popularised in the 1960s with the release.
Output
Lorem Ipsum is simply dummy text of the printing and typesetting industry
unchanged. It was popularised in the 1960s with the release.
Nested Blockquotes
To create nested bolckquotes use << before line or paragraph.
Example
> Lorem Ipsum is simply dummy text of the printing and typesetting industry
>> unchanged. It was popularised in the 1960s with the release.
> page editors now use Lorem Ipsum as their default model text,
Output
Lorem Ipsum is simply dummy text of the printing and typesetting industry
unchanged. It was popularised in the 1960s with the release.
page editors now use Lorem Ipsum as their default model text, and a
Lists
Ordered Lists
To create an unordered list add a numerical order number before the list item. The ordered list will order the list from number 1.
Example 1:
1. First item
2. Second item
3. Third item
4. Fourth item
Output :
- First item
- Second item
- Third item
- Fourth item
Example 2:
1. First item
5. Second item
3. Third item
4. Fourth item
Output :
- First item
- Second item
- Third item
- Fourth item
Example 3:
1. First item
5. Second item
1. fifth item
2.sixth item
3. Third item
4. Fourth item
Output :
- First item
- Second item
- fifth item
- sixth item
- Third item
- Fourth item
Unordered Lists
To create the unordered list use *,-,+ before the list item,
Example 1:
* First item
* Second item
* Third item
* Fourth item
Output :
- First item
- Second item
- Third item
- Fourth item
Code
To highlight your text use before and after your text ` something ` .
or for code use ``` <code snippet> ```
Example:
<html>
<head>
</head>
</html>
<html>
<head>
</head>
</html>
Links
To create a link, add text in the square bracket [ ] and the actual link in the round bracket( ).
Example:
[Article on CSS Position](https://mangeshthakre.hashnode.dev/css-selectors)
Output :
Adding Image
To create a link, add alt text in the square bracket [ ] and the image link in the round bracket( ).
Example:
Output :
Extended Syntax
Tables
Use hyphen ---- for column header and | for separating rows.
Example:
| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |
output :
| Syntax | Description |
| Header | Title |
| Paragraph | Text |
Fenced Code Blocks
Use ``` ```
Example:
{
"firstName": "John",
"lastName": "Smith",
"age": 25
}
Output :
{
"firstName": "John",
"lastName": "Smith",
"age": 25
}
Syntax Highlighting
use language after first ````
Example:
```javascript
const obj = {
"firstName": "John",
"lastName": "Smith",
"age": 25
} ``` ,
output :
const obj = {
"firstName": "John",
"lastName": "Smith",
"age": 25
}