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, Here we go.
Contents
- Headings
- Text Formatting
- Breaklines
- Lists (Order-List and Un-Order-List)
- Centralized Text
- Quotes
- Inline Code
- Block Code
- Text/image layout (Align the text/images left and right)
- Links and Images
- Tables
- Embedded Youtube Video
1. Headings
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 @wajahatsardar
My username is @wajahatsardar
My username is @wajahatsardar
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><i></b>
__*~~My username is @wajahatsardar~~*__
My username is @wajahatsardar
My username is @wajahatsardar
My username is @wajahatsardar
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. Center
<center> My user name is @wajahatsardar</center>
Center/Bold/Italic/Strikethrough
<center>**_~~My username is @wajahatsardar~~_**</center>
6. Quotes
> My username is @wajahatsardar
My username is @wajahatsardar
7. Inline code
Use `Code` for Inline code
`My username is @wajahatsardar`
My username is @wajahatsardar
Use Code
for Inline code
8. Code block
```
Code block
```
Surround your Code by triple backticks both beginning and at the end.
Code block
9. 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 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
Use div class pull-right
My username is @wajahatsardar I'm 23-Year-old working on Hive blockchain.
https://hive.blog/@wajahatsardar.
10. [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)
11. Tables
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 |
11. Insert Youtube video
https://www.youtube.com/watch?v=xAgZYCHi8MQ
One step at the time
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit