Markdown basics - How to write good issues on GitHub
Tags: hacktoberfest, beginners, opensource, github
Published: 2022-10-04 13:41:10

_Writing my first post just in the time for Hacktoberfest 2022!!_ 

(This post is part of my studying road with #freeCodeCamp - so bear with me 😂 - if you have any tips or extra information please write in the comments, I'll really appreciate it 🤩)

---

## Formats
* hash #

A single # creates a heading 1 and two hashes create a heading 2, and you can do this up to six hashes!

```
# heading 1
## heading 2
```

# heading 1
## heading 2

You can also write normal, bold and italic text, this way:

```
Normal text
**Bold**
*Italic Text*
~~strikethrough text~~
```
preview:
Normal text
**Bold**
*Italic Text*
~~strikethrough text~~

* Lists

An unordered list 
```
- Item 1
- Item 2
- Item 3
 - Subitem 3b
```
- Item 1
- Item 2
- Item 3
 - Subitem 3b


Now, for an ordered list you don't use the 1,2,3.., here you will use 1,1,1 and github will do the rest under the blankets 😉

```
1. Item 1
1. Item 2
1. Item 3
```
1. Item 1
1. Item 2
1. Item 3


* How to show progress

For this you're gonna need to use brackets []

```
- [] item 1 incomplete
- [x] item 2 complete
```

![previwq](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf22q6k39f23a7qtn3rn.png)

_ps. you don't need to write the wors complete or incomplete, I just added for example purposes_


* Links

To add links you can't just paste the link, you have to show that is linkable, for that you're gonna use []():

```
[Hacktoberfest 2022](https://hacktoberfest.com)
```
In case that you wanna add an image you just have to add an exclamation in front of it. You can use images from your local path or an url from the internet, just make sure you have .png at the end of the link. 🙂 

```
![Hacktoberfest 2022 Profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vz9rodc6hrz0ziddsz6z.png)
```
![my profile picture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vz9rodc6hrz0ziddsz6z.png)


* Tables

To create a table we need to tell the markdown how the table is going to be rendered, to be left align, centered or right aligned.  Here's how we're gonna do, using dashes. 

Remember, the first row is the title.

```
|column 1 | column 2 |
|:---|---:|
|row1a | row1b|

```

![preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/viogkvdw20bxjtbeib3f.png)

To center a line you can put a colon on either side of the dashes

```
|column 1 | column 2 |
|:---:|:---:|
|row1a | row1b|

```

![preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0drn5n3vdhg680zswig.png)


* Code blocks

For inline code you can use backtcick:

```
this is `console.log()`
```

preview:
this is `console.log()`

if you wanna to stand out more you can use three backticks:


![code preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60jf9hs606urrrhj8xu6.png)

![preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fat1dppf3flqtmgtnk4u.png)

Now, if you want to syntax highlighted, you can out in the language like markdow, javascript or typescript, whatever language you want.


![code preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/koppm6qk5iw587hsbzho.png)

![preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3c947b095nd3jigblpb.png)

* Diff

In case you wanna show before and after from the differeces you made on an issue or in a discussion, use diff.



![preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hppjyhjd2428derk2rq.png)

Preview: 
My suggestion

```diff
- const data = [];
+ const data = {};
```

* Quote
You can quote text with a >.

```
> my suggestion is this one
```

preview:
![preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmqnn8pufhfhqvdifj9p.png)


> You don't have to write big blocks of text to show your comments, bugs or ideias. With simple sintex you can get your point across. 
Eddie Jaoude
🥰


_Thanks for your reading and time! 💜 _


![a person saying thank you, sending kisses](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tq7mu07c7re9g8bn7uw2.gif)