Tips and tricks to add to your github readme.md
Tags: github, beginners, opensource, productivity
Published: 2022-02-09 14:52:42

<span id='top'>I was assigned to write the README.md file of a project we were working on in a team. I was hyped and took the mission. Here are some things I found that you might like </span>

<table>
<tr><th>Contents</th></tr>
<tr><td><a href='#upload'>Uploading an image</a></td></tr>
<tr><th><a href='#badges'>Adding Badges</a></th></tr>
<tr><td><a href='#drop-list'>Dropdown lists</a></td></tr>
<tr><th><a href='#icons'>Using font awesome</a></th></tr>
<tr><td><a href='#remarks'>Remark</a></td></tr>
</table>

<h3><span id='upload'>1. Uploading an image</span></h3>

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

<h3><span id='badges'>2. Adding Badges</span></h3>

I'd seen badges on several repos but never actually thought of how to do it. Well, it's pretty easy. You can easily generate a badge on the <a href='https://shields.io/'>shields.io</a> website. Just navigate to the site and type <i>badge</i> on the search bar.

![shields.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51datk40394kbcsipses.jpg)

Fill in the label, message and color then click the <code>Make Badge</code> button.

![shields.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gbbl6w2hzw9ldjief47.jpg)

A new tab will open with the svg generated

[![svg badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fg1zz370e8pw7ar48x4f.jpg)](https://github.com/Babi-B/markdown-tips)

There are 2 ways to add the svg to your markdown

1. Now copy the link to the svg to add this to your markdown  you could use an image tag<br>

 &emsp;&emsp;&emsp;&emsp;<code>&lt;img src='link-to-the-svg' /&gt;</code>

This however, using this will redirect anyone who clicks on the badge to the svg webpage.

2. To customize the routing use<br>

&emsp;&emsp;&emsp;&emsp;`[![label](linkToTheSvg.svg)](cutomized-route-link)`

<br><b>Note: </b>Don't forget the <code>.svg</code><br>


The are badges of different colors and also those with multiple fields and the guide can be found on the <a href='https://shields.io/'>shields.io </a> page.

<h3><span id='drop-list'>3. Dropdown lists</span></h3>
This is actually quite simple. It's the HTML tag `details`


![details open](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4vpmfcl68i1ataenov1.jpg) 

and when closed

![details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pus653tw2iugr65ib4g.jpg)

The code
```
<details open>
    <summary>Git gist highlights</summary>
    <ul>
        <li>Using badges</li>
        <li>Nested lists</li>
    </ul>
</details>
```
The `open` attribute creates the list open

<h3><span id='icons'>4. Using font awesome</span></h3>
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:

<ul>
<li>First download or get a pic of the icon. It should be in a png, jpg, or jpeg format.</li>
<li>Upload the picture to the markdown. The link should be placed in a pair of square brackets []</li>
<li>Add the link to your site in round brackets</li>
</ul>

```
[![alt text](uploaded-file-link)](link-to-site)
```

<u>For example</u>

```
[![dev.to link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5qf1pu23vjd37j7zhbd.png)](https://dev.to/babib)
```

[![dev.to link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5qf1pu23vjd37j7zhbd.png)](https://dev.to/babib)

```
[![twitter link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uphwbpdmb6fqtbu1gfrp.png)](https://twitter.com/BTweets47)
```

[![twitter link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uphwbpdmb6fqtbu1gfrp.png)](https://twitter.com/BTweets47)


<span id='remarks'>I have written a <a href='https://github.com/Babi-B/git-readme-tips'>README.md</a> file containing all these tips listed here. Contributions are always welcome.</span>

<a href='#top'>&uarr; Back to top</a>


                                                           Babi 💞