Mark Down for Newbies
Tags: markdown, codenewbie, codepen, vscode
Published: 2021-06-07 10:06:31

Written by: Abayomi Ogunnusi

According to the official site definition. Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages.

---
This is the basics of clear communication used in most version control and collaborative platforms such as Github. 

In this post I will be giving a summary of the commonly used markdown syntax. For clarity sake, the raw format are written above and the output of the markdown are written below.

## Headings are written with hashtags. One '#' is equivalent to the 'h1' in HTML syntax and so on.
```
# h1
## h2
### h3
#### h4
##### h5
###### h6
```
---
# h1
## h2
### h3
#### h4
##### h5
###### h6


## Lists
```
lists can be written with - or * or + sign symbols. 
## Unordered list 
- first time
- first time
```
## Unordered list 
- first time
- first time

```
or use: 
* item 1
* item 2
* item 3
```
* item 1
* item 2
* item 3

---
## Nested list using hyphen. Always ensure you put space after the hyphen 
```
- first time
- first time
  - second time
```
- first time
- first time
  - second time

## Progress list
```
- [ ] item 1
- [ ] item 2
- [ ] item 
```
- [ ] item 1
- [ ] item 2
- [ ] item 

## check list or task list
```
- [x] item 1
- [x] item 2
- [x] item 3
```
- [x] item 1
- [x] item 2
- [x] item 3
 
## The above list could also be written as 
```
* [x] item 1
* [x] item 2
* [x] item 3
```
* [x] item 1
* [x] item 2
* [x] item 3

## Ordered list
```
1. item 1
2. item 2
```
1. item 1
2. item 2

## GitHub list: Reordering occurs automatically 
```
1. item 1
1. item 2
1. item 3
```
1. item 1
1. item 2
1. item 3

## Links
```
[this contain the link description](this contains the actual link)
```
[HOMEPAGE](http://localhost:3000)

## Links with title
```
[this contain the link description](this contains the actual link "this contains the link alt text")
```
[web glance](http://webglance.com "web glance")


## Inline code using the backtick
```
this is an inline `code`
```
this is an inline `code`


## Block of codes use three surrounding back ticks used in writing specific language syntax. Ensure to put the language immediately after the backtick as shown below.
```html
<p> a paragraph example</p>
 ```

```html
<p> a paragraph example</p>
```

```JavaScript
let table = 3;
 ```

## Before and after results using block quotes
Before
```
console.log('test')
```

after
```
console.log('new test')
```

the above code block can be re-written as :
```diff
-console.log('test`)
+console.log('new test`)
console.log('neutral')
```
diff
-console.log('test`)
+console.log('new test`)
console.log('neutral')

Block quotes
```
> this is a block quote
```
> this is a block quote

## Adding pictures
```
![image](http://picsum.photos/200/200)
![purple markdown icon](http://markdown-here.com/img/icon256.png)
```
![image](http://picsum.photos/200/200)
![purple markdown icon](http://markdown-here.com/img/icon256.png)

##Emphasis (strong)
```
this is a bold **text**
or __bold__
```
this is a bold **text**
or __bold__

## Emphasis (italics)
```
This is an *italics*
or 
_italics_
```
This is an *italics*
or 
_italics_


## Writing language syntax using markdown
```JavaScript
function add(a,b){
return a + b;
```

## Tables
```
| User | Email  |
| --- | --- |
| abayomi | abayomiogunnusi@gmail.com |
| isreal | isreal@gmail.com |
```
| User | Email  |
| --- | --- |
| abayomi | abayomiogunnusi@gmail.com |
| isreal | isreal@gmail.com |

## Tables
| Frond-End | Back-End | Full Stack |
| --- | --- | --- | --- |
| HTML, CSS, JS | NODE JS, MONGODB | HTML, MONGODB,... |
| REACT, BOOTSTRAP | EXPRESS, MONGOOSE | DOCKER |



## strike through is achieved using ~~ ~~
```
~~strike~~
```
~~strike~~



## Checklist
```
- [ ] abayomi
- [ ] abayomi
- [ ] abayomi
- [ ] abayomi
- [x] abayomi
```
- [ ] abayomi
- [ ] abayomi
- [ ] abayomi
- [ ] abayomi
- [x] abayomi


##Tag people use the '@' symbol

@wowzone  
@deenn 
@drsimplegraffiti 

{% instagram CNFfRqkAPcd %}
{% github drsimplegraffiti/drsimplegraffiti %}