DEV Community

loading...
Cover image for Getting started with Markdown.

Getting started with Markdown.

Amaan Shaikh
Full-Stack Developer - React | Angular | Node | Spring
・3 min read

If you are an active GitHub user you must have come across this file README.md.

So what is README.md?

README.md is a file that contains information about a GitHub project like description, how to use it, licenses, and many more.

As you can see README file has an extension as .md the reason behind this is because the README file is a markdown file. So let's learn about what is a markdown file.

Markdown is a text-to-HTML conversion tool for web developers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid HTML. We can add styles, images, external APIs, and many more to the markdown files. As markdown converts text to HTML we can also add HTML code directly to our markdown file to add more functionality.

Here is an example of my GitHub readme file.
Alt Text

Do follow :) https://github.com/Amaan56

Let us learn a few basic syntaxes to get started with Markdown.

Headings

To make a normal text heading put # (single Hash) in front of it. We can have 6 types of headings like HTML from h1 to h6 just by increasing the number of the hash in front of the text from 1 to 6.

For example:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Enter fullscreen mode Exit fullscreen mode

Output:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

You don't have to do anything for a paragraph in the markdown file as it gets automatically formated.

Make text bold

You can make your text bold by starting and ending your text with **(double asterisks).

For example:

**This is a bold text**
Enter fullscreen mode Exit fullscreen mode

Output:

This is a bold text

Make text italic

You can make your text bold by starting and ending your text with *(single asterisks).

For example:

*This is italic text*
Enter fullscreen mode Exit fullscreen mode

Output:

This is italic text

Horizontal Rules

To add horizontal rules write three or more hyphens in a row.

For example:

----
Enter fullscreen mode Exit fullscreen mode

Output:


Ordered List

The ordered list can be added as below:

1. Item 1
2. Item 2
3. Item 3
Enter fullscreen mode Exit fullscreen mode

Output:

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

Unordered List

The unordered list can be added as below:

- Item 1
- Item 2
- Item 3
Enter fullscreen mode Exit fullscreen mode

Output:

  • Item 1
  • Item 2
  • Item 3

Hyperlink

To have a web link in your document just put your link between square brackets [ ].

[https://github.com/Amaan56]
Enter fullscreen mode Exit fullscreen mode

Output:

https://github.com/Amaan56

Image

To add an image use the same syntax as the link but add ! (Exclamation) before square brackets.

![https://i.pinimg.com/564x/ce/53/c5/ce53c5bcd350ba856e5c53c343376fb2.jpg]
Enter fullscreen mode Exit fullscreen mode

Output:
Alt Text

Blockquote

To put a blockquote, append the text with a with >

> To create a blockquote
Enter fullscreen mode Exit fullscreen mode

Output:

To create a blockquote

And last but not the least, my favorite and used by most of the tech bloggers to add a code block.

To add a code block in your markdown surround your code block with

``` (triple-backticks). This will give you the below result.



console.log("Hello World");


Enter fullscreen mode Exit fullscreen mode

Here is great documentation to explore more: https://www.markdownguide.org/basic-syntax/

Have a nice day!

Discussion (2)

Collapse
varghesejose2020 profile image
Varghese Jose

Good explanation

Collapse
amaan56 profile image
Forem Open with the Forem app