Markdown basics - How to write good issues on GitHub

vivianemartini

Viviane Martini

Posted on October 4, 2022

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

šŸ’– šŸ’Ŗ šŸ™… šŸš©
vivianemartini
Viviane Martini

Posted on October 4, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Hacktoberfest 2021
hacktoberfest Hacktoberfest 2021

November 15, 2021

Winning my First Hacktoberfest!
hacktoberfest Winning my First Hacktoberfest!

October 16, 2021

Explore the world of open source
hacktoberfest Explore the world of open source

October 6, 2021

Hacktoberfest : get more than a T-Shirt
hacktoberfest Hacktoberfest : get more than a T-Shirt

October 9, 2020