DEV Community

Cover image for Writing a ReadMe: StarterPack
bhuma08
bhuma08

Posted on • Edited on

Writing a ReadMe: StarterPack

First, create a Readme.md in your code editor!

Headers:
This is usually your title or subtitle in your markdown file.

# for H1 
## for H2
### for H3
#### for H4
##### for H5
###### for H6 
Enter fullscreen mode Exit fullscreen mode

That gives you:

Read me

Read me

Read me

Read me

Read me
Read me

Style:
For a bold font, use double asterisks: **Read me**.
This gives you: Read me

For an italic font, use single asterisks: *Read me*.
This gives you: Read me

For a strike through text, use double curly lines: ~~Read me~~.
This gives you: Read me


Lists:

1. Mango
2. Pineapple
3. Berry
   1. Strawberry
   2. Blueberry

* Cherries
* Watermelon
* Citrus
   * Orange
   * Grapefruit
Enter fullscreen mode Exit fullscreen mode
  1. Mango
  2. Pineapple
  3. Berry
    1. Strawberry
    2. Blueberry
  • Cherries
  • Watermelon
  • Citrus
    • Orange
    • Grapefruit

The asterisks can be replaced with + and - :

+ Papaya
- Guava
Enter fullscreen mode Exit fullscreen mode
  • Papaya
  • Guava

Links:

[Click me I'm google!](https://www.google.com/)
Enter fullscreen mode Exit fullscreen mode

Click me I'm google!


Code:
Use back-ticks to get incline code:

`How to write a simple ReadMe`
Enter fullscreen mode Exit fullscreen mode

This gives you: How to write a simple ReadMe

For a block of code, use 3 back-ticks at the beginning and the end of your code.

console.log('Read me')
Enter fullscreen mode Exit fullscreen mode
print('Read me')
Enter fullscreen mode Exit fullscreen mode

Tables:
You use | to separate the table columns and - for the column header with : to align them!

TV Shows|Seasons|Genre
--------|:-----:|:-----
Money Heist|4|Crime
Schitts Creek|6|Comedy
Enter fullscreen mode Exit fullscreen mode
TV Shows Seasons Genre
Money Heist 4 Crime
Schitts Creek 6 Comedy

Images:
You can add images: ![imagename](TargetUrl)

![Pineapple](https://i.pinimg.com/originals/54/fb/a3/54fba3dbd6b4af80cfc4d2bd6cb5c81b.jpg)
Enter fullscreen mode Exit fullscreen mode

Pineapple

To add an image from locally, there are many ways to do this. My favourite is using imgur. This creates a URL for your local image!


Videos:
Youtube links can be added: [![video name](Video URL img)(Video URL embedded)]

[![Anthony Ramos](https://i.ytimg.com/vi/gfIugjRFNXs/maxresdefault.jpg)(https://www.youtube.com/embed/Jc9pka7sE0w)]
Enter fullscreen mode Exit fullscreen mode

Anthony Ramos


Gifs:
One way to add Gifs to your markdown is to:

  1. Convert your video into gif using Imgflip
  2. Once your Gif is generated, you can save it in .gif file.
  3. Bring .gif to your code editor
  4. <a href="yourgif.gif"><img src='yourgif.gif'></a>

Top comments (0)