DEV Community

Cover image for Mark Down for Newbies
Abayomi Ogunnusi
Abayomi Ogunnusi

Posted on • Updated on

Mark Down for Newbies

#markdown #codenewbie #codepen #vscode

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
Enter fullscreen mode Exit fullscreen mode

h1

h2

h3

h4

h5
h6

Lists 

lists can be written with - or * or + sign symbols. 
## Unordered list 
- first time
- first time
Enter fullscreen mode Exit fullscreen mode

Unordered list

  • first time
  • first time 
or use: 
* item 1
* item 2
* item 3
Enter fullscreen mode Exit fullscreen mode
  • item 1
  • item 2
  • item 3

Nested list using hyphen. Always ensure you put space after the hyphen 

- first time
- first time
  - second time
Enter fullscreen mode Exit fullscreen mode
  • first time
  • first time
    • second time

Progress list 

- [ ] item 1
- [ ] item 2
- [ ] item
Enter fullscreen mode Exit fullscreen mode
  • [ ] item 1
  • [ ] item 2
  • [ ] item

check list or task list 

- [x] item 1
- [x] item 2
- [x] item 3
Enter fullscreen mode Exit fullscreen mode
  • [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
Enter fullscreen mode Exit fullscreen mode
  • [x] item 1
  • [x] item 2
  • [x] item 3

Ordered list 

1. item 1
2. item 2
Enter fullscreen mode Exit fullscreen mode
  1. item 1
  2. item 2

GitHub list: Reordering occurs automatically 

1. item 1
1. item 2
1. item 3
Enter fullscreen mode Exit fullscreen mode
  1. item 1
  2. item 2
  3. item 3

Links 

[this contain the link description](this contains the actual link)
Enter fullscreen mode Exit fullscreen mode

HOMEPAGE

Links with title 

[this contain the link description](this contains the actual link "this contains the link alt text")
Enter fullscreen mode Exit fullscreen mode

web glance

Inline code using the backtick 

this is an inline `code`
Enter fullscreen mode Exit fullscreen mode

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. 

<p> a paragraph example</p>
Enter fullscreen mode Exit fullscreen mode 
<p> a paragraph example</p>
Enter fullscreen mode Exit fullscreen mode 
let table = 3;
Enter fullscreen mode Exit fullscreen mode

Before and after results using block quotes

Before

console.log('test')
Enter fullscreen mode Exit fullscreen mode

after

console.log('new test')
Enter fullscreen mode Exit fullscreen mode

the above code block can be re-written as :

-console.log('test`)
+console.log('new test`)
console.log('neutral')
Enter fullscreen mode Exit fullscreen mode

diff
-console.log('test)
+console.log('new test)
console.log('neutral')

Block quotes

> this is a block quote
Enter fullscreen mode Exit fullscreen mode

this is a block quote

Adding pictures 

![image](http://picsum.photos/200/200)
![purple markdown icon](http://markdown-here.com/img/icon256.png)
Enter fullscreen mode Exit fullscreen mode

image
purple markdown icon

Emphasis (strong) 

this is a bold **text**
or __bold__
Enter fullscreen mode Exit fullscreen mode

this is a bold text
or bold

Emphasis (italics) 

This is an *italics*
or 
_italics_
Enter fullscreen mode Exit fullscreen mode

This is an italics
or
italics

Writing language syntax using markdown 

function add(a,b){
return a + b;
Enter fullscreen mode Exit fullscreen mode

Tables 

| User | Email  |
| --- | --- |
| abayomi | abayomiogunnusi@gmail.com |
| isreal | isreal@gmail.com |
Enter fullscreen mode Exit fullscreen mode
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~~
Enter fullscreen mode Exit fullscreen mode

strike

Checklist 

- [ ] abayomi
- [ ] abayomi
- [ ] abayomi
- [ ] abayomi
- [x] abayomi
Enter fullscreen mode Exit fullscreen mode
  • [ ] abayomi
  • [ ] abayomi
  • [ ] abayomi
  • [ ] abayomi
  • [x] abayomi

Tag people use the '@' symbol

@wowzone

@deenn
@drsimplegraffiti

GitHub logo drsimplegraffiti / drsimplegraffiti

Config files for my GitHub profile.

Calm Developer

Hi 👋, I'm Abayomi.

A Software Engineer interested in Backend

Software Engineer

@drsimplegraffiti's Holopin board

drsimplegraffiti

drsimplegraffiti

drsimplegraffi1

  • 🔭 I’m currently working on All cheat sheets

  • 🌱 I’m currently learning Java and Spring

Connect with me:

drsimplegraffiti drsimplegraffi1 15661401 drsimplegraffiti @drsimplegraffiti

Languages and Tools:

aws bash docker express firebase git graphql heroku java javascript jenkins jest linux mocha mongodb mysql nestjs nginx nodejs postgresql postman rabbitMQ redis spring travisci typescript

drsimplegraffiti

 drsimplegraffiti

drsimplegraffiti

Dev.to Post

🔗 Improve your Github Profile

🔗 Download Browser Page as PDF

🔗 Send mails using NodeJS

🔗 Chat App using Socket.io

🔗 Expose a local web server to the internet

🔗 Web scraping using Node Js

🔗 Bash Terminal Guide

🔗 Best Practices: Node JS Security

🔗 Postman Hacks

🔗 Time Zone: Nodejs

🔗 Conditional Rendering : REACT

View on GitHub

Top comments (0)

Read next

haadi profile image

The Impact of Supermarket Software

haadi muhammed -

dai_shi profile image

Jotai Tips

Daishi Kato -

fanmixco profile image

How to schedule RDS instances (start/stop) easily

Federico Navarrete -

etherealeden profile image

How User-Generated Content Can Transform Video Marketing for AV Brands

Quinlan Copaz -