Markdown

Markdown

Basic Markdown explained in 4 minutes

ยท

4 min read

Hey all!! I'm sure you must have heard of markdown before. It's getting quite popular and is being used everywhere.
Frame 12 (2).png Big companies like Github are switching to markdown due to ease of writing for their documentation and even adding their extension. It may sound funny but today I'm writing this blog using markdown to explain markdown. Now enough of my babbling, let's get started.

What is Markdown?

Markdown is lightweight markup language which is used to convert text into valid HTML / XML for web writers.
It is simple to read, write, and edit and doesn't require to know HTML tags. Markdown is written entirely only using punctuation characters that are chosen carefully.

Markdown extension is .md

Markdown editors

  • MarkPad
  • HarooPad
  • Standard notes
  • Obsidian
  • MarkdownPad2
  • Joplin

Headings

For heading, we use hash (#). It goes till 6 hashes. As the number of hash increases the size of the heading decreases.

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Italics

For italic, simply use an asterisk (*) or underscore (_) at the start and end of a word or sentence.

*italic text*
_italic text_

italic text
italic text


Bold / Strong

For bold, simply use the double asterisk (**) or double underscore (__) at the start and end of a word or sentence.

**bold text**
__bold text__

bold text
bold text


Strikethrough

For strikethrough, simply use the double tilde (~~) at the start and end of a word or sentence. But here it doesn't support so we have used <s>.

~~strikethrough text~~
<s>strikethrough text<s>

strikethrough text


Blockquote

For blockquote, simply use the right angle bracket (>).

> quote

quote


Link

For the link, the title should be inside square brackets [ ] and the link directing to the website is inside round brackets ( ).

[Google](https://www.google.co.in)

Google


Images

For the image, add an exclamation mark (!) then the title should be inside square brackets [ ] and the link directing to the image is inside round brackets ( ).

![Photograph](https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80)

Photograph


Unordered list

For unordered lists, simply use the asterisk (*) or plus (+) or hyphen (-) in front of list items. And to add another list inside any list item use indentation and then asterisk.

* List-item 1
* List-item 2
* List-item 3
   * Sublist-item 1
   * Sublist-item 2
  • List-item 1
  • List-item 2
  • List-item 3
    • Sublist-item 1
    • Sublist-item 2

Ordered list

For ordered lists, simply start with 1 then continue with either 1 or any other number it doesn't matter (1.....n) followed by period (.) in front of list items. And to add another list inside any list item use indentation and then the same process.

1. List-item 1
1. List-item 2
1. List-item 3
   1. Sublist-item 1
   2. Sublist-item 2
  1. List-item 1
  2. List-item 2
  3. List-item 3
    1. Sublist-item 1
    2. Sublist-item 2

Code

To get code use backticks (`) both at the start and end of a word or sentence.

`code`

code


Table

For the table use a pipe to separate each column and the table head is separated by 3 or more hyphens (--------).

| Name | Occupation |
|-------|-------|
|Adarsh Thakur| Web developer|
| Nitya Anand| UX designer|
NameOccupation
Adarsh ThakurWeb developer
Nitya AnandUX designer

Task list

For the task list start with either asterisk (*) or plus (+) or hyphen (-) then inside the square bracket write x to rule out any list items or leave empty which will show which items are needed in the list. Here it doesn't support that's why it doesn't show any change.

- [x] Tomatoes
- [ ] Bread
- [ ] Cheese
  • [x] Tomatoes
  • [ ] Bread
  • [ ] Cheese

Horizontal rule

For horizontal rule simply use three underscores (___).

___

Fenced code blocks

To get code blocks first start with three backticks (```) and write all the code then end with three backticks. To show the code I have attached the image below

Frame 12 (1).png And the output will be:

npm install
npm start

Syntax highlighting

This feature allows adding color highlighting for whatever language your code was written in, just specify a language next to the three backticks before the fenced code block. Example - (```bash), etc. Here we used javascript.

Frame 1.2.png

console.log("hello");

Emoji

To get emojis just type emoji shortcodes like ( :joy:) shows ๐Ÿ˜‚ or copy-paste it from sites like picsart, getemoji, emojipedia, etc.

 ๐Ÿฅณ

๐Ÿฅณ


These are some most commonly used ones. For extended markdown syntax visit Extended syntax.
Thanks for reading my blog. Have a great day!
Bbye ๐Ÿ‘‹.

ย