Make Your Post Stylish- The Ultimate Guide To Markdown & HTML Code Guide for Beginners
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