/git-readme-tips

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. Styling Text
  7. Task Lists
  8. 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
image  image

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

Styling Text

You can indicate emphasis with bold, italic, strikethrough, subscript, or superscript text in comment fields and .md files.

  1. This text would be Bold
**This text would be Bold**
  1. This text would be Italic
* This text would be Italic*
  1. This text would be strikethrough
~~This text would be strikethrough~~
  1. Bold with italic within
**Bold with *italic* within**
  1. All Bold and italic
***All Bold and italic***

  1. Quoting Text: This is mainly used when You want to lay more emphasis on a paragraph or block in your text

> Quoting Text: This is mainly used when You want to lay more emphasis on a paragraph or block in your text

Task Lists

To create a task list, preface list items with a hyphen and space followed by [ ]. To mark a task as complete, use [x].

  • Star the repository
  • Fork the repository
  • Make changes to the repository
  • Create a pull request
- [x] Star the repository
- [x] Fork the repository
- [x] Make changes to the repository
- [ ] Create a pull request

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 💞