Tips and tricks to add to your github readme.md
source link: https://dev.to/babib/tips-and-tricks-to-add-to-your-github-readmemd-191i
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
[](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>
Enter fullscreen mode
Exit fullscreen mode
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
[](link-to-site)
Enter fullscreen mode
Exit fullscreen mode
For example
[](https://dev.to/babib)
Enter fullscreen mode
Exit fullscreen mode
[](https://twitter.com/BTweets47)
Enter fullscreen mode
Exit fullscreen mode
I have written a README.md file containing all these tips listed here. Contributions are always welcome.
Babi 💞
Enter fullscreen mode
Exit fullscreen mode
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK