What is Markdown?
Markdown is a way of writing formatted text using plain text formatting syntax. From this post, you’ll learn all the Markdown’s major commands that will help you create an awesome GitHub README.
Headings
We can write headings in markdown using the # symbol, followed by the heading that we want to write. The number of ‘#’ symbols indicate the size of the header. More the number of ‘#’ symbols, smaller the font size of the header. There are diffrent types of headers available in markdown.
# Heading1
## Heading2
### Heading3
#### Heading4
##### Heading5
The second option is using the HTML syntax.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
output
Heading1
Heading2
Heading3
Heading4
Heading5
Paragraphs
You can directly write text you dont need to give any special character but if you want to use HTML tag then you have to give <p>
tag.
This is a Paragraph
Using HTML
<p>This is a Paragraph</p>
Text Styles
We can use markdown to change the styles of selected text to different styles like bold, italics, blockquotes, underline, strike-through, etc.
Markdown Bold:
We can make a text bold by enclosing the text between 2 * symbols . We can also make it bold using the HTML “” ""tags.
Method 1:
*Hello*
Method 2:
<strong>Hello</strong>
Markdown Italics:
We can make a text Italics by enclosing the text in single * symbol as. We can also make it in Italics using the HTML “” / tags.
Method 1:
*Hello*
Method 2:
<em>Hello</em>
Markdown Blockquotes:
Blockquotes are used to indicate that the enclosed text is an extended quotation. Blockquotes are written in markdown using > symbol. Multiple > can stacked together to get nested blockquote.
> This is a blockquote.
>> Nested blockquotes.
>>> More nesting.
Output:
This is a blockquote. Nested blockquotes. More nesting.
Markdown Underlined:
We can underline a piece of text in Markdown using the HTML “ins” tag.
<ins>This is an underlined text</ins>
Strike-through:
We can strike-through a piece of text in Markdown by enclosing the text inside double ~ symbol as -> text.
~~The text is struck~~
Markdown Boxed:
“Boxed” allows us to form a box around our given piece of text to highlight its importance. It can be formed with using the “table”, “tr”, and “td” tags in conjunction, similar to using HTML tables.
<table><tr><td>The quick brown fox jumps over the lazy dog.</td></tr></table>
Output:
The quick brown fox jumps over the lazy dog.
Markdown Superscript and Subscript:
Superscript or Subscript are characters that are set slighly above or below the normal line of text. We can set them using the “sup” or the “sub” HTML tags respectively.
Subscript <sub>Example.</sub>
Superscript <sup>Example.</sup>
Syntax Highlighting:
We can highlight code syntaxes using markdown by using a backtick(``) symbol before and after the code block. For multiline code formatting, we can also use 3 backticks for the purpose as illustrated in the example below.
Example for single line code:
This is an example of a `code` block.
Output:
This is an example of a code
block.
Markdown Tables
We can create a markdown table with the HTML
<table>
<tr>
<td>
First Entry
</td>
<td>
Second Entry
</td>
<td>
Third Entry
</td>
</tr>
</table>
Links:
There are 4 ways of creating a link in markdown:
- Inline Link:
Inline Links are used to link users to another page, displayed in the form of blue hyperlinked words.
[Link1] (https://www.Google.com)
Output:
Link1
- Reference Link:
Reference Links are used to link one information object to another, by providing some references to that new page.
[Link1][reference text]
[Link2]: https://www.google.com
Output:
Link2
- Relative Link:
Relative Links are links that show the relationship between the current page’s URL and the linked page’s URL.
[A relative Link](rl.md)
Output:
A relative link
- Auto Link:
Many popular markdown processors directly turn URLs pasted into the editor into links. Such links are called auto links. For example:
Visit https://www.google.com
Output:
Visit google.com
Images and GIFs
Images can also be added in markdown using methods similar to what we used for adding links.
- Inline Style:
Inline Images are used to link images directly onto the current page to be displayed. Syntax:
![alt text](https://link of the image)
- Reference Style:
The reference style of image insertion is used to link an image to the current page, similar to a reference link.
![alt text][image]
[image]: https://link of the image
- Adding GIFs: GIFs can also be added using Markdown similar to the way we add images in markdown using the HTML tag. Syntax:
<img src="https://d3n0h9tb65y8q.cloudfront.net/public_assets/assets/000/002/564/original/GIF.gif?1642758263" />
Lists:
There are 2 types of lists we can add in markdown,
- Ordered List
Unordered List
Ordered Lists:
An ordered list defines a list of items in which the order of the items matter. Syntax:
1. Element 1
2. Element 2
3. Element 3
Output:
- Element 1
- Element 2
Element 3
Ordered List with Sublists:
Lists can be nested into sublists to include items that are a part of a longer list. The example below shows how to implement nested unordered lists in markdown. Syntax:
1. Level 1
1. Level 2
- Level 3
- Level 4
2. Level 1
1. Level 2
3. Level 1
1. Level 2
Output:
- Level 1
- Level 2
- Level 3
- Level 4
- Level 3
- Level 2
- Level 1
- Level 2
- Level 1
- Level 2
- Unordered Lists:
We can create unordered lists with an asterisk(*), (+), or (-) signs as shown below:
With asterisk(*):
* Element 1
* Element 2
* Element 3
Output:
- Element 1
- Element 2
- Element 3
- Nested Unordered Lists:
Unordered Lists can also be nested into multiple sublists beneath them similar to ordered lists. The example below shows how to implement nested unordered lists in markdown.
Syntax:
- Level 1
- Level 2
- Level 3
- Level 4
- Level 1
- Level 2
- Level 1
- Level 2
Output:
- Level 1
- Level 2
- Level 3
- Level 4
- Level 3
- Level 2
- Level 1
- Level 2
- Level 1
- Level 2
- Level 2