/Git-markdown

Make your README more creative with this cheatsheet

MIT LicenseMIT

Git Markdown codes

Heading

Syntax

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Appearance

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Font

Syntax

*Italics*
**Bold text**
***Bold and Italics***
~~Striked Text~~

Appearance

Italics

Bold Text

Bold and Italics

Striked Text

Lists(Unordered and Ordered)

Syntax

Unordered list

* list1
* list2
  * sublist1
  * sublist2

Appearance

  • List item-1
  • List item-2
    • Sublist-1
    • Sublist-2

Ordered list

1. First
2. Second
3. Third
    1. Three / One
    2. Three / Two 
4. Fourth

Appearance

  1. First item
  2. Second item
  3. Third item
    1. Indented item
    2. Indented item
  4. Fourth item

Links

Syntax

* [This is a link to GitHub](https://github.com "GitHub Home Page")
* <https://www.google.com/>

Appearance

Images

Syntax

 ![GitHub Logo](https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-512.png "GitHub Logo")

As same as links, but add an exlamation mark (!) before opening square bracket.
The square bracket contains alt for the image and parenthesis contains image source.
Image source can be either a location from the local machine or any valid image URL.
the last part contains additional information about the image shown when use hovers through it.

Appearence

GitHub Logo

Linking Image

To open another webpage when image is clicked, enclose the Markdown for the image in brackets, and then add the link in parentheses.

Syntax

 [![GitHub Logo](https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-512.png "GitHub Logo")](https://github.com/)

Appearance

GitHub Logo

Resizing Images

We use HTML along markdown to resize images easily.

Syntax

<img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-512.png" height="50%" width="50%">

Appearence

by using height="" and width="" we can resize images easily. in the example, we used 50% so the image size has decreased to 50% of the image.

Tables

Syntax

|Header1|Header2|Header3|
| --- | --- | --- |
| This | is a | table |
| This | is 2nd | row |
| This | is 3rd | row |

Appearance

Header1 Header2 Header3
This is a table
This is 2nd row
This is 3rd row

CheckBox

Syntax

* [ ] Checkbox1

* [ ] Checkbox2

* [x] Checkbox selected

or 

- [ ] Checkbox1

- [ ] Checkbox2

- [x] Checkbox selected

Appearance

  • Checkbox1

  • Checkbox2

  • Checkbox selected

using - [ ] or * [] makes no difference. it shows the same checkboxes. You can use both.

Block Quotes

Syntax

> This is a block quoted text

Appearance

This is a block quoted text

Horizontal Line

Syntax

***
___
--- 

Appearance

All three will be rendered as:


Code Block

There are three ways to add code in markdown

  1. Inline Code (single backtick)
  2. Whitespace (Four Spaces Indentation)
  3. Fenced Code Block (Three Backticks or Tildes)

Syntax

`this` is an example of inline code.

'''
console.log('Used backticks to show snippets')
'''

console.log('four whitespace works too!')

Appearance

this is an example of inline code.

console.log('Used backticks to show snippets')
console.log('four whitespace works too!')    

Syntax Highlighting

If language name is mentioned after the end of first set of backticks, the code snippet will be highlighted according to the language.

Syntax

```js
console.log('javascript')
```

```python
print('python')
```

```java
System.out.println('java')
```
   
```json
{
  "firstName": "Kaushal",
  "lastName": "Joshi
  "age": 18
}
```

Appearance

JavaScript Programming syntax

console.log('javascript')

C Programming syntax

printf("Hello World!\n");

Python Programming syntax

print('python')

Java Programming syntax

System.out.println('java')

JSON Programming syntax

{
  "firstName": "Kaushal",
  "lastName": "Joshi",
  "age": 18
}

XML Programming syntax

<Person>
  <FirstName>
    Anurag
  </FirstName>
  <LastName>
    P
  </LastName>
</Person>

Emphasis

*This text will be italic*
_This will also be italic_

**This text will be bold**
__This will also be bold__

_You **can** combine them_

Appereance

This text will be italic This will also be italic

This text will be bold This will also be bold

You can combine them

Insert a break between lines

You can add

<br>

between lines to insert a break

This text has a break in between that will make the second part
to be written onto the next line.