Ultimate Markdown for README.md Simplified

What is Markdown? Markdown is a way of writing formatted text content with the help of text format based syntax.

What is the use of Markdown? Markdown is useful to create an awesome GitHub README.md file. Also, it will help somehow in hashnode as well. but, there are few changes need to followed as per hashnode syntax.

In this article, you will learn about commands/syntax used in various Markdown types.

Markdown Commands/Types

1. Headings
2. Lists
3. Text Styles
4. Syntax Highlighted
5. Alignments
6. Links
7. Images
8. Tables
9. Horizontal Rules

Disclaimer : - We have not presented outputs of All Markdown styles

Headings

We can use this Markdown to create heading. Also, these are similar to heading available in HTML, but Syntax varies.

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

Wait, what? Are you looking for alternative syntax? Yes, there exist, BUT..... We can use alternative syntax for heading1 and heading2 ONLY.

heading1
=

heading2
-

You can try it on Github, by creating README.md file in your own repo.

---

Lists

Lists consists of Ordered and Unordered Lists

Ordered list

1. Hii
2. Hello

ordered list with sub-items

1. First line
    1. Second line
        - Third line
            - Fourth line

unordered list

We can create unordered list with asterisk, plus or minus sign.

* First Line
+ Second Line
- Third Line

We can also use HTML syntax to create Ordered and Unordered lists

Task List

We can create Task list using hypen followed by Square Braces with Checked X or Unchecked as a representation inside [ ]

- [x] Cheatsheet
- [ ] Articles

---

Text Styles

This Markdown helps you to change the style of the text. Text styles includes bold, italic, blockquotes, monospaced, underlined, strike-through, boxed, subscript and superscript

We can also even use HTML syntax to make the text style to bold Here are the following ways to make text styles to bold two asterisks (**) underscores (__) HTML tag ()

Bold

**Hey Everyone**
__Hey Everyone__
<strong>Hey Everyone</strong>

Italic

*Hey Everyone*
_Hey Everyone_
<em>Hey Everyone</em>

Blockquote

We can use greater than sign (>) to create a Blockquotes.

Hey Everyone

Wondered, how we can create a Nested Blockquote? Here is it, We can use blockquote inside a blockquote (here blockquote refers to greater than sign >)

Nested Blockquote

>>Hey Everyone

Monospaced

<samp>Hey Everyone, there</samp>

Underlined

<ins>Hey Everyone, there</ins>

Strike-through

~~ Hey Everyone, there ~~

Boxed Text Style

We can use <table> tag to create a box, surrounded to the text.

<table>
  <tr>
    <td> Hey Everyone, there! </td>
  </tr>
</table>

Subscript

Hey Everyone, <sub> there </sub>

Superscript

Hey Everyone, <sup> there </sup>

---

Syntax Highlighting

We use this Markedown, to show the code block with grey background. Just use ` , before and after the code block.

Learn Online and create `Open Source` Projects

Code Highlighting

"```Learn Online and create Open Source Projects```"

Note, do not consider, double quotes (Just made it for syntax overrule in representation)

---

Alignments

We can use HTML tags, to align content. Here content refers to images, text etc.

<p align='left'>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fburst.shopify.com%2Fphotos%2Fperson-holds-a-book-over-a-stack-and-turns-the-page%2Fdownload&imgrefurl=https%3A%2F%2Fburst.shopify.com%2F&tbnid=ouCnCib2C_Ep7M&vet=12ahUKEwjDovm0vZr5AhXm73MBHTHiCOwQMygyegQIARBf..i&docid=wAGMrroYuy9MmM&w=925&h=617&itg=1&q=images&ved=2ahUKEwjDovm0vZr5AhXm73MBHTHiCOwQMygyegQIARBf"/>
</p>

Similarly, we can assign them right, center.

Worried about, centering a Text? Here you go

<h3 align="center"> My latest Medium posts </h3>

---

Links

We can use Markdown, to represent link in various forms

We can use link in four ways, as follows

1. Auto Links
2. Inline Style
3. Reference Style
4. Relative Links

Auto Links

hashnode https://hashnode.com

Inline Styles

[Create your own blog for FREE](https://hashnode.com]

Reference Styles

Generally, reference styles are used to define the same link at multiple places. This indeed beneficial as you don't have to enter the link every time. This is just like, having multiple Link Text for the same link.

[Create your own blog for FREE][Free Blog]

Here Free Blog is a reference text You can use these reference text quite often

[Free Blog] : https://hashnode.com

You can also use numbers in place of reference text to make a count of links personally for you.

[10] : https://hashnode.com

Relative Links

Relative links are helpful, when you wanted to link a particular document in the file directory/ with extension.

[Contact us] (mailto:admin@prathapsayz.com)

Explore Relative Links, to understand better

---

Images

Markdown for images stands quite similar to Links. However syntax is partially different.

![alt text](https://www.google.com/imgres?imgurl=https%3A%2F%2Fburst.shopify.com%2Fphotos%2Fperson-holds-a-book-over-a-stack-and-turns-the-page%2Fdownload&imgrefurl=https%3A%2F%2Fburst.shopify.com%2F&tbnid=ouCnCib2C_Ep7M&vet=12ahUKEwjDovm0vZr5AhXm73MBHTHiCOwQMygyegQIARBf..i&docid=wAGMrroYuy9MmM&w=925&h=617&itg=1&q=images&ved=2ahUKEwjDovm0vZr5AhXm73MBHTHiCOwQMygyegQIARBf)

NOTE: - You can use different Link Style format for Images also.

Embed GIF

<img 
src="https://media.giphy.com/media/qLHzYjlA2FW8g/giphy.gif" />

Embed SVG

<img 
src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.w3.org%2FTR%2FSVG2%2Fimages%2Ftext%2Ffont_metrics.svg&imgrefurl=https%3A%2F%2Fwww.w3.org%2FTR%2FSVG2%2Ftext.html&tbnid=4q0pGkCDnfoXzM&vet=12ahUKEwiGq9Lj3Jr5AhXxFrcAHUTWAWkQMygBegUIARDXAQ..i&docid=-F7_iCXLuxuYBM&w=525&h=300&q=SVG%20text%20images&ved=2ahUKEwiGq9Lj3Jr5AhXxFrcAHUTWAWkQMygBegUIARDXAQ"

NOTE: SVG are not preferred in general due to its standard dimensions

---

Tables

If you see HTML structure, you would have thought that, creating a table is easy, but it is slightly different in syntax in Markdown.

Suppose, if we consider HTML syntax, then we can create a Table without header, as follows

Table without Header

<table>
<tr>
<td width="50%">
Don't come up, I will handle them
</td>
<td width="50%">
Don't come up, I will handle them
</td>
</tr>
</table>

Table with Header

Worried on how to create a Table with Headers?

Yes, its possible to create with Headers, but little bit complex. I will simplify it for YOU.

In order to create a table with headers, we must use dashes and pipes to separate each header, columns respectively.

Alignment - We can use colons, to align text in columns

Left Alignment - Use colon to the left of dashes.

Center Alignment - Use colon on both sides of the dashes

Right Alignment - Use colon to the right of dashes

Note: All text in columns, are left aligned by default

Default  | Left align | Center align  | Right align 
-------- | :-------   | :-----------: | ----------: 
78978978 | 78978978   | 78978978      | 78978978 
7897897  | 7897897    | 7897897       | 7897897 
789789   | 789789     | 789789        | 789789  
78978    | 78978      | 78978         | 78978

Readability - We can use any number of dashes, to increase the readability view for us.

Outer Pipes (Syntax) : - You might have seen somewhere, that there exist Outer Pipes surrounding the table externally. but those are optional. So nothing to worry in terms of syntax.

Table with Header (HTML Syntax)

Now, Lets create a Table with HTML syntax as Header content.

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>

<td>
| High | Medium | Low  |
|------|--------|------|
| 80%  | 50%    |  20% |
</td>

<td>
| High | Medium | Low  |
|------|--------|------|
| 90%  | 60%    |  10% |
</td>

<td>
| High | Medium | Low  |
|------|--------|------|
| 70%  | 50%    |  10% |
</td>
</tr> 
</table>

---

Horizontal Rule

This Markdown is very helpful to organize content. We can use hyphen, asterisk or underscores to create a Horizontal line.

---
***
___