DEV Community

Cover image for Markdown basics - How to write good issues on GitHub
Viviane Martini
Viviane Martini

Posted on • Edited on

Markdown basics - How to write good issues on GitHub

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
Enter fullscreen mode Exit fullscreen mode

heading 1

heading 2

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

Normal text
**Bold**
*Italic Text*
~~strikethrough text~~
Enter fullscreen mode Exit fullscreen mode

preview:
Normal text
Bold
Italic Text
strikethrough text

  • Lists

An unordered list

- Item 1
- Item 2
- Item 3
 - Subitem 3b
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  1. Item 1
  2. Item 2
  3. Item 3
  • How to show progress

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

- [] item 1 incomplete
- [x] item 2 complete
Enter fullscreen mode Exit fullscreen mode

previwq

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)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

my profile picture

  • 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|

Enter fullscreen mode Exit fullscreen mode

preview

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

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

Enter fullscreen mode Exit fullscreen mode

preview

  • Code blocks

For inline code you can use backtcick:

this is `console.log()`
Enter fullscreen mode Exit fullscreen mode

preview:
this is console.log()

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

code preview

preview

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

code preview

preview

  • Diff

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

preview

Preview:
My suggestion

- const data = [];
+ const data = {};
Enter fullscreen mode Exit fullscreen mode
  • Quote You can quote text with a >.
> my suggestion is this one
Enter fullscreen mode Exit fullscreen mode

preview:
preview

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

Top comments (2)

Collapse
 
gabrielq7 profile image
Gabriel Aguiar Aquino

Nice. How do you put the gif?

Collapse
 
vivianemartini profile image
Viviane Martini

thanks Gabriel, I've add just like an image

![alt-text](gif-link)