How you can make your post more beautiful by using some markdown || markdown with code and preview

in Student's world3 years ago
Asslam-o-alaikum to all, i hope you all are well. Today in this post i am going to tell you about some basic uses of markdown.

photo-1553524913-efba3f0b533e.jpeg

Source

Let start with headings


If you are a computer student and if you are programmer you know about or atleast you hear about html. Here on steemit you use two methods to define your headings.

heading by html


Here by using html tags you can wright your headings like as:

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>

Preview of these codes is:

heading 1


heading 2


heading 3


heading 4


heading 5

heading 6

second method by using #

# heading 1
## heading 2
### heading 3
#### heading 4
##### heading 5
###### heading 6

preview of these code is

heading 1

heading 2

heading 3

heading 4

heading 5
heading 6

use some more tags for text

for italic text

<i>italic</i>

Preview:
italic

for bold text

<h3>bold</h3>

Preview:

bold

center text

<center> center </center>

Preview:

center

line on text

~~line on text~~

Preview:
line on text

justify your text

<div class="text-justify">
Here you wright your text which you to justify. As show in preview.
</div>

Preview:

Here you wright your text which you to justify. As here show

without justify

Here you wright your text which you to justify.As here show

use text in two cell

<div class="pull-right"> This text in right because i write code to set it in write side</div>
This text in left side as you see below in preview to understand it.

Preview:

This text in right because i write code to set it in write side
This text in left side as you see below in preview to understand it.

Next use image with text


image at right side of text

<div class="pull-right">


![IMG_20210520_095604_919.jpg](https://cdn.steemitimages.com/DQmcPodS6325fjBFgZRhdfrkgUWabSjM6jU75mmpeaLZkga/IMG_20210520_095604_919.jpg)

</div>
Here you can wright text  about your image. 

Preview:

IMG_20210520_095604_919.jpg

Here you can wright text about your image.

left side image

<div class="pull-left">

![IMG_20210513_094902_915.jpg](https://cdn.steemitimages.com/DQmTnynPuYBXJwTgxqsHBPUSE5UHRNyJCTo1uXzL262xnyH/IMG_20210513_094902_915.jpg)
</div>
Here you can wright text  about your image. 

Preview:

IMG_20210513_094902_915.jpg

Here you can wright text about your image.

Source of image


![photo-1553524913-efba3f0b533e.jpeg](https://cdn.steemitimages.com/DQmNmMhgZ5LqdARtGR1NrLCrNGA6PjcC4FEYXncJKBXh7F2/photo-1553524913-efba3f0b533e.jpeg)

[Source](https://unsplash.com/photos/XESTc_DU4gg)

Preview:

photo-1553524913-efba3f0b533e.jpeg

Source

lists


Here you can also use html to make list like as:

Order list:
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>

Preview:

  1. item 1
  2. item 2
UnOrder list:
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
  • item 1
  • item 2
Here👆🏻👆🏻 we make list by using html

Here we use * and number to make list

Ordered list
1. Item1
2. Item2

Preview:

  1. Item1
  2. Item2
UnOrdered list
* Item1
* Item2

Preview:

  • Item1
  • Item2

Table by html

<table >
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    
  </tr>
</table>

Preview:

Heading 1 Heading 2
Cell 1 Cell 2

Table

Header 1 | Header 2
--------- | ----------
Cell 1 | Cell 2

Preview:

Header 1Header 2
Cell 1Cell 2

Here i use some markdown with their code and preview.

Coin Marketplace

STEEM 0.31
TRX 0.11
JST 0.030
BTC 67701.44
ETH 3730.48
USDT 1.00
SBD 3.69