Hello, Friends Today's post is for Those users who don't know how we use markup to make our post stylish and unique that attract the reader. This is a quick markdown reference with samples that I made for my own use. I want to share this with you so that it can help you to write Stylish and beautiful posts using HTML markup.
Contents
- Headings
- Text Formatting
- Breaklines
- Lists (Order-List and Un-Order-List)
- Tables
- Centralized Text
- Quotes
- Inline Code
- Block Code
- Text/image layout (Align the text/images left and right)
- Links and Images
- Embedded Youtube Video
https://cdn.pixabay.com/photo/2015/06/08/15/11/typewriter-801921_960_720.jpg
Image Source
1. Heading 1
# Heading 1
Heading 2
## Heading 2
Heading 3
### Heading 3
Heading 4
#### Heading 4
Heading 5
##### Heading 5
Heading 6
###### Heading 6
https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png
2. Text Formating
Guide how you can format your text, Decent, Stylish and Beautiful.
Bold
**Bold**
Bold
Bold
__Bold__
Bold
Bold
Bold
Bold
https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png
Italic
Italic
*Italic*
_Italic_
Italic
Italic
Italic
https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png
Strikethrough
~~Strikethrough~~
strikethrough
~~Strikethrough~~
strikethrough
https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png
Bold/Italic
We can use the bold tag along side with the italic tag so our text can get both attributes of bold and itlaic.
**_my username is @wajahatsardar_**
My username is @wajahatsardar
__*My username is @wajahatsardar*__
My username is @wajahatsardar
My username is @wajahatsardar
My username is @wajahatsardar
https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png
Bold/Italic/Strikethrough
You can use these three combine with each other as follow.
**_~~My username is @wajahatsardar~~_**
My username is @wajahatsardar
__*~~My username is @wajahatsardar~~*__
~~My username is @wajahatsardar~~
My username is @wajahatsardar
~~My username is @wajahatsardar~~
https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png
3. Breaklines
Break lines are used to break the lines forcefully.
---
***
***
https://steemitimages.com/640x0/https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png
4. Lists
Lists are of two types
1. Order List
2. Unorder List
Order Lists
An ordered list typically is a numbered list of items. It gives you the ability to control the sequence number - to continue where the previous list left off, or to start at a particular number.
Item 1
Item 2>
Item 3
Item 4
Item 5
Item 1
Item 2
Item 3
Item 4
Item 5
You can also make Order-list just like this and whatever number you will allot the list it will arrange it in order that's why it is known as Order-list. You can create simply Number then dot(.) than a word/sentence.
Example
1.Word/Sentence
1. Item 1
2. Item 2
2. Item 3
5. Item 4
5. Item 5
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
https://steemitimages.com/640x0/https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png
Un-Order-List
Item 1
Item 2>
Item 3
Item 4
Item 5
Item 1
Item 2>
Item 3
Item 4
Item 5
You can also create Un_Order_list by adding +, -, * then space and then Word/Sentence
1. * Item 1
* Item 1
2. - Item 2
- Item 2
3. + Item 3
+ Item 3
https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png
5. Tables
The proper way to generate a table is by using the standard HTML markup. Begin the table content with and end it with `. Each table row needs to be placed inside a and ` and any field inside it has to be put inside a table heading:
Example
Variable 1Variable 2Variable 3
Value 1Value 2Value 3
Value 1Value 2Value 3
Value 1Value 2Value 3
Variable 1Variable 2Variable 3
Value 1Value 2Value 3
Value 1Value 2Value 3
Value 1Value 2Value 3
You can also create a table like this way if you don't understand the basic of HTML.
Example
User|Posts|Steem Power|Hive Power
-|-|-|-
Wajahatsardar|1000|4500|4000
xyz|200|9000|30000
abc|38|288|2626|
https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png
6. Center
My user name is @wajahatsardar
My user name is @wajahatsardar
Center/Bold/Italic/Strikethrough
**_~~My username is @wajahatsardar~~_**
~~My username is @wajahatsardar~~
https://steemitimages.com/640x0/https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png
7. Quotes
> My username is @wajahatsardar
> My username is @wajahatsardar
8. Inline code
Use `Code` for Inline code
`My username is @wajahatsardar`
My username is @wajahatsardar
Use Code for Inline code
9. Code block
```
Code block
```
Surround your Code by triple backticks both beginning and at the end.
Code block
https://steemitimages.com/640x0/https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png
10. Text/image layout
Text or images go here.
---
Text or images go here.
Text or images go here.
---
Use div class justify-text
My username is @wajahatsardar I'm 23-Year-old working on Steem/Hive blockchain.
Use div class pull-left
My username is @wajahatsardar I'm 23-Year-old working on Steem blockchain.
https://steemit.com/@wajahatsardar
https://images.hive.blog/640x0/https://images.hive.blog/DQmSEtHwmRUxw4iX5ShcJJ6vtbgt13BazwAq1yfCEGMiSFW/waji%20real.jpg
Use div class pull-right
My username is @wajahatsardar I'm 23-Year-old working on Hive blockchain.
https://hive.blog/@wajahatsardar.
https://images.hive.blog/640x0/https://images.hive.blog/DQmSEtHwmRUxw4iX5ShcJJ6vtbgt13BazwAq1yfCEGMiSFW/waji%20real.jpg
https://steemitimages.com/640x0/https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png
11. [Links and Images]:
https://steemit.com/
https://steemit.com/
https://images.hive.blog/640x0/https://images.hive.blog/DQmSEtHwmRUxw4iX5ShcJJ6vtbgt13BazwAq1yfCEGMiSFW/waji%20real.jpg
[Image src](https://images.hive.blog/640x0/https://images.hive.blog/DQmSEtHwmRUxw4iX5ShcJJ6vtbgt13BazwAq1yfCEGMiSFW/waji%20real.jpg)
https://steemitimages.com/DQmQT3qFj2S8wfQqfbEAUYKUBDG43jnJoKZMyfa75HT73Ka/U5drywBCoEbeeCSXBE88CCgWtvmLD7h_1680x8400.png
12. Insert Youtube video
https://www.youtube.com/watch?v=xAgZYCHi8MQ
https://www.youtube.com/watch?v=xAgZYCHi8MQ
src
https://steemitimages.com/640x0/https://files.peakd.com/file/peakd-hive/slobberchops/BqIuXs6C-RedLine.png
https://steemitimages.com/640x0/https://files.peakd.com/file/peakd-hive/slobberchops/f5zec6UG-CurieCurator.jpg
- Earn Passive Manna by simply signing up for it here. Manabase is a Universal Basic Income Cryptocurrency.
- Earn Ecoin just by creating Account click Here. Ecoin current price
https://steemitimages.com/640x0/https://files.peakd.com/file/peakd-hive/slobberchops/BqIuXs6C-RedLine.png