Github Readme Cheatsheet

For all crazy Developers who want to write a beautiful readme for their projects.

Table of Contents

1. Headings
2. Bold and Italic Text
3. Lists
4. Adding Links To Text
5. Adding Images
6. BlockQuotes
7. Inline Code
8. Syntax highlighting
9. Tables
10. StrikeThrew
11. Line Break
12. Horizontal Rule

Advanced Features

13. Custom Width and Height Images
14. Adding a gif/image from project directory
15. Adding Link To Images
16. Badges
17. Emojis

Headings

---

To create a heading in readme, we need to use #. The size of headings can be changed by adding multiple # Together. The greater the number of # is, the smaller the heading is.

Symbol  Tag       Code
------  -----     ----
#       <h1>      # h1 heading
##      <h2>      ## h2 heading
###     <h3>      ### h3 heading
####    <h4>      #### h4 heading
#####   <h5>      ##### h5 heading
######  <h6>      ###### h6 heading

Output from above code

---

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading

h6 heading

Bold and Italic Text

---

To create bold text, we need to use **. To create italic text, we need to use *.

Symbol  Tag       Code
------  -----     ----
**      <b>       **bold**
*       <i>       *italic*

Output from above code

---

bold italic

Lists

---

To create a unordered list, we can use * or - for each list point.

Symbol  Tag       Code
------  -----     ----
*       <ul>      * Bullet Point 1 Using *
-       <ul>      - Bullet Point 2 Using -

Output from above code

---

• Bullet Point 1 Using *

• Bullet Point 2 Using -

To create a ordered list, we can simply use 1. and so on.

Symbol  Tag       Code
------  -----     ----
1.      <ol>      1. Point 1
2.      <ol>      2. Point 2
3.      <ol>      3. Point 3

Output from above code

---

1. Point 1
2. Point 2
3. Point 3

Adding Links To Text

---

To create a link, we need to use Text.

Syntax:
[Text](Link)

Output from above syntax

---

Text

Adding Images

---

To create an image, we need to use ![Text](Link)

Syntax:
![Text](https://user-images.githubusercontent.com/29582239/184543797-60b6ca0d-decc-452e-b9cc-e3daac17f2cd.png)

Output from above syntax

---

Block Quotes

---

To create a blockquote, we need to use >

Syntax:
> Code is poetry.

Output from above syntax

---

Code is poetry.

Inline Code

---

To create inline code, we need to use <code>Code</code>

Syntax:
<code>composer install</code>

Output from above syntax

---

composer install

Syntax highlighting

---

To create syntax highlighting, we need to use

```code``` (Here 'code' is the language name that we want to highlight)

Syntax:
```php
echo "Hello World";

We need to add three backtick (```) after helo world semicolon
Output from above syntax

---

echo "Hello World";

Tables

---

To create a table, we need to use | for each cell.

Syntax:
 Header-1 | Header-2| Header-3
 ------   | ------  | ------  
 column-1 | column-2| column-3

Output from above syntax

---

Header-1	Header-2	Header-3
column-1	column-2	column-3

Strike Threw

---

To create strike through text, we need to use ~~text~~

Syntax:
~~text~~

Output from above syntax

---

text

Line Break

---

To create a line break, we need to use <br> or <br/>

Syntax:
<br>

Output from above syntax

---

Horizontal Rule

---

To create a horizontal rule, we need to use <hr> or *** or ---

Syntax:
<hr>

***

---

Output from above syntax

---

---

---

Custom Width and Height Images

---

To create a custom width and height images, we need to use <img src="link" width="100" height="100"/>

Syntax:
<img src="https://user-images.githubusercontent.com/29582239/184543797-60b6ca0d-decc-452e-b9cc-e3daac17f2cd.png" width="250" height="200"/>

Output from above syntax

---

Adding a gif/image from project directory

---

To create a gif, we need to use <img src="link" width="100" height="100"/>

Syntax:
<img src="assets/img/github-mark.png" width="200" height="100" alt="github-logo"/>

Output from above syntax

---

Adding link to images

---

To create a link to an image, we need to use [<img src=""/>](link)

Syntax:
[<img alt="github-logo" width="100" src="assets/img/github-mark.png"/>](https://github.com/csesumonpro/Github-Readme-Cheatsheet)

Output from above syntax

---

Badges

---

Get all about shields

Markdown badges

Get all about Badge Poser

To create a markdown badges, we need to use [![](link)](link)

Syntax:
[![](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

[![Total Downloads](https://poser.pugx.org/csesumonpro/contact/downloads)](https://packagist.org/packages/csesumonpro/contact)

Output from above syntax

---

Emojis

---

To add emojis, we can easily add them by copying and pasting the emoji. List of emoji

Alternatives: You can use the gitub emoji api link as a img src

Syntax:
😎🥳
<img src="https://github.githubassets.com/images/icons/emoji/unicode/1f604.png" width="14"/>

Output from above syntax

---

😎🥳
Alternatives: