Git README.md tips

Contributors

Table of Content

  1. Introduction
  2. Uploading an image
  3. Badges
  4. Dropdown Lists
  5. Using Font Awesome Icons
  6. Contribute

Introduction

This is a simplified outline of a few tips that can be added to a git README.md markdown to spice up your documentation.

Uploading an image

Uploading a picture is very simple. Just copy and paste. This works with png, jpg, and jpeg files.

Badges

The colors relay different messages
imageimage

On how to add badges check this detailed blog for a step to step guide.

For more badges check shields.io

Dropdown Lists

Nested dropdown lists are made with the details html tag. By defaul the details tag is closed

Click to open Hello World!
<details><summary>Click to open</summary>
  Hello World!
</details>

But can be made open using the open attribute

Click to close You left me open...
<details open><summary>Click to close</summary>
  You left me open...
</details>

Font-awesome

Git markdown does not have support for inline CSS so the font-awesome icons themselves can't be used. However, there is a way to work around that:

  • First download or get a pic of the icon. It should be in a png, jpg, or jpeg format.
  • Upload the picture to the markdown. The link should be placed in a pair of square brackets []
  • Add the link to your site in round brackets
[![alt text](uploaded-file-link)](link-to-site)

    For example

[![image](https://user-images.githubusercontent.com/66228179/153211323-6e521f21-b21c-4883-ab46-71b3755d03d7.png)](https://dev.to/babib)

image

[![twitter](https://user-images.githubusercontent.com/66228179/153213725-4c03dc46-1e33-4928-abb3-0d1cccb06420.png)](https://twitter.com/BTweets47)

twitter

Contribute

Contributions are always welcome! Please read the contribution guidelines first.

I have written a detailed blog on how each tip mentioned here can be implemented.

                                                Babi 💞