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
1. Uploading an image
Uploading a picture is very simple. Just copy and paste. This works with png, jpg, and jpeg files.
2. Adding Badges
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 shields.io website. Just navigate to the site and type badge on the search bar.
Fill in the label, message and color then click the Make Badge
button.
A new tab will open with the svg generated
There are 2 ways to add the svg to your markdown
- Now copy the link to the svg to add this to your markdown you could use an image tag
ββββ<img src='link-to-the-svg' />
This however, using this will redirect anyone who clicks on the badge to the svg webpage.
- To customize the routing use
ββββ[![label](linkToTheSvg.svg)](cutomized-route-link)
Note: Don't forget the .svg
The are badges of different colors and also those with multiple fields and the guide can be found on the shields.io page.
3. Dropdown lists
This is actually quite simple. It's the HTML tag details
and when closed
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
4. Using 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
[![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)
I have written a README.md file containing all these tips listed here. Contributions are always welcome.
Babi π
Top comments (0)