In the previous post in this series, we learned how to write markdown in Github and its exclusive features.
In this post, we are going to learn how we can style our README.md
Text Align
Using align="left" attribute text can be aligned easily and it works with all the tags that markdown supports.
## Text Align - <p>
<p align="center">This is center aligned!</p>
<p align="left">Left aligned</p>
<p align="right">Right aligned</p>
## Text Align - <div>
<div align="center">This is center aligned!</div>
<div align="left">Left aligned</div>
<div align="right">Right aligned</div>
Github Output
Image Align
## Left Align
<p ><img align="left" width="200" src="https://via.placeholder.com/400x200"></p>
<br/><br/><br/><br/>
## Right Align
<p ><img align="right" width="200" src="https://via.placeholder.com/400x200"></p>
<br/><br/><br/><br/>
## Center Align
<p align="center" ><img width="200" src="https://via.placeholder.com/400x200"></p>
Github Output
List With indentation
# List With indentation
<dl>
<dt>List Item 1</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, ante vitae gravida rhoncus, nunc nulla posuere felis</dd>
<dt>List Item 2</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, ante vitae gravida rhoncus, nunc nulla posuere felis</dd>
</dl>
# Nested List With indentation
<dl>
<dt>List Item 1</dt>
<dd>
Lorem ipsum dolor sit amet
<dl>
<dt>Nested List Item 1</dt>
<dd>
Lorem ipsum dolor sit amet
<dl>
<dt>Nested List Item 2</dt>
<dd>Lorem ipsum dolor sit amet</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
Github Output
Dropdown
To Make Markdown work inside details tag make sure to leave the empty line after the summary tag
Dropdown in markdown supports all the basic features such as Text, Image, Table, List, .etc inside. i am just show some of it. not all.
Text
<details>
<summary>Dropdown With Text</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, ante vitae gravida rhoncus, nunc nulla posuere felis,
id rhoncus ante tellus malesuada libero. Aliquam fermentum massa eget sodales aliquet.
Morbi vitae velit tincidunt lorem fringilla lacinia non vitae leo. Fusce congue odio eget tellus finibus vulputate.
</details>
Github Output
Image
<details>
<summary>Dropdown With Image</summary>
</details>
Github Output
Table
<details>
<summary>Dropdown With Table</summary>
| First Header | Second Header |
| --- | --- |
| Content from cell 1 | Content from cell 2 |
| Content in the first column | Content in the second column |
</details>
Github Output
You can check out the live demo @ this repository