Markdown in a glance

Markdown in a glance

Every developer loves Markdown. It's an amazing format to write in.

For those who don't know what markdown is, it's a flat text format that looks like HTML with no tags and simple text.

Example

Markdown

text
# heading 1
## heading 2

- item-1
- item-2
- item-3

[Link](https://www.google.com)

HTML

<p>text</p>
<h1>heading 1</h1>
<h2>heading 1</h2>

<ul>
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3</li>
</ul>

<a href="https://www.google.com">Link</a>

Headings

  • We can start heading with a single #. It is similar to the h1 tag in HTML. Single # is biggest heading and ###### is smallest. Remember to keep space between # and text.

Syntax

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
✅ Do this❌ Don't do this
# Here's a Heading#Here's a Heading

Bold

  • To bold text, add two asterisks(*) or underscores(_) before and after a word or phrase.

Syntax

**bold text**

OR

__bold text__
MarkdownHTMLOutput
This is **bold text**<b> bold text </b>This is bold text

Italic

  • To bold text, add one asterisk(*) or underscore(_) before and after a word or phrase.

Syntax

**italic text**

OR

__italic text__
MarkdownHTMLOutput
This is *italic text*<i> italic text </i>This is italic text

Blockquotes

  • We use > to create blockquotes.

Syntax

> This is a blockquote.

Output

This is a blockquote.

Nested blockquote

Syntax

> This is a blockquote.
>> Nested blockquote

Output

This is a blockquote.

Nested blockquote

✅ Do this❌ Don't do this
Try to put a blank line before...Without blank lines, this might not look right.
> This is a blockquote> This is a blockquote
...and after a blockquote.Don't do this!

Ordered Lists

  • To create an ordered list, add line items with numbers followed by periods. The numbers don’t have to be in numerical order, but the list should start with the number one.

Syntax

1. item-1
2. item-1
3. item-1

OR

1. item-1
1. item-1
1. item-1

Output

  1. item-1
  2. item-2
  3. item-3

Unordered Lists

  • To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items.

  • Indent one or more items to create a nested list.

Syntax

* item-1
* item-1
* item-1

OR

+ item-1
+ item-1
+ item-1

Output

  • item-1
  • item-2
  • item-3

Code

  • To denote a word or phrase as code, enclose it in backticks (`).

Syntax

` write your code here `

Horizontal Rules

  • To create a horizontal rule, use three or more asterisks (*), dashes (---), or underscores (___) on a line by themselves.

Syntax

***

---

_________________

Links

  • To create a link, enclose the link text in brackets (e.g., [Duck Duck Go]) and then follow it immediately with the URL in parentheses
  • To add a title, enclose it in quotation marks after the URL.

(e.g., (https://duckduckgo.com)).

Syntax

[Link](https://www.example.com "Tool-tip")

Images

  • To add an image, add an exclamation mark (!), followed by alt text in brackets, and the path or URL to the image asset in parentheses.
  • You can optionally add a title in quotation marks after the path or URL.

Syntax

![Photo!](/assets/gallery/mountains.jpg "Photo name")

Hope you found this helpful!

Follow for more such tutorials.

Did you find this article valuable?

Support Kedar Makode by becoming a sponsor. Any amount is appreciated!