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
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
2. Text Formating
Guide how you can format your text, Decent, Stylish and Beautiful.
Bold
**Bold**
<strong>Bold</strong>
<b>Bold</b>
__Bold__
Bold
Bold
Bold
Bold
Italic
<i>Italic<i>
*Italic*
_Italic_
Italic
Italic
Italic
Strikethrough
~~Strikethrough~~
<strike>strikethrough</strike>
Strikethrough
strikethrough
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_**
<b><i>My username is @wajahatsardar</i></b>
__*My username is @wajahatsardar*__
My username is
My username is
My username is
Bold/Italic/Strikethrough
You can use these three combine with each other as follow.
**_~~My username is @wajahatsardar~~_**
<b><i><strike>My username is @wajahatsardar</strike></b>
__*~~My username is @wajahatsardar~~*__
My username is
My username is
My username is
3. Breaklines
Break lines are used to break the lines forcefully.
---
***
<br>
***
<hr>
4. Lists
Lists are of two types
- Order List
- 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.
<ol>
<li>Item 1</li>
<li>Item 2></li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
- 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
Un-Order-List
<ul>
<li>Item 1</li>
<li>Item 2></li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
- 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
- Item 1
* Item 1
- Item 1
- Item 2
- Item 2
- Item 2
- Item 3
+ Item 3
- Item 3
5. Tables
The proper way to generate a table is by using the standard HTML markup. Begin the table content with <table> and end it with </table>. Each table row needs to be placed inside a <tr> and </tr> and any field inside it has to be put inside a table heading:
Example
<table>
<tr>
<th>Variable 1</th>Variable 2</ th><th>Variable 3</th>
</tr>
<tr>
<td>Value 1</td>Value 2</ td><td>Value 3</td>
</tr>
<tr>
<td>Value 1</td>Value 2</ td><td>Value 3</td>
</tr>
<tr>
<td>Value 1</td>Value 2</ td><td>Value 3</td>
</tr>
</table>
| Variable 1 | Variable 2 | Variable 3 |
|---|---|---|
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 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|
| User | Posts | Steem Power | Hive Power |
|---|---|---|---|
| Wajahatsardar | 1000 | 4500 | 4000 |
| xyz | 200 | 9000 | 30000 |
| abc | 38 | 288 | 2626 |
6. Center
<center> My user name is @wajahatsardar</center>
Center/Bold/Italic/Strikethrough
<center>**_~~My username is @wajahatsardar~~_**</center>
7. Quotes
> 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
10. Text/image layout
<div class="justify-text">
Text or images go here.
</div>
---
<div class="pull-left">
Text or images go here.
</div>
<div class="pull-right">
Text or images go here.
</div>
---
Use div class pull-left
My username is
https://steemit.com/@wajahatsardar
Use div class pull-right
My username is
@wajahatsardar.
11. [Links and Images]:
https://steemit.com/
https://steemit.com/
[Source](link of the image)
[Image src](https://images.hive.blog/640x0/https://images.hive.blog/DQmSEtHwmRUxw4iX5ShcJJ6vtbgt13BazwAq1yfCEGMiSFW/waji%20real.jpg)
12. Insert Youtube video
https://www.youtube.com/watch?v=xAgZYCHi8MQ
src
- 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