Derived from https://towardsdatascience.com/the-ultimate-markdown-cheat-sheet-3d3976b31a0

Headings

There are few options to create headings. We can use Markdown or HTML or an alternative syntax to create our desired headings.

First, let’s talk about the markdown syntax.

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

The second option, using the HTML syntax.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>

Finally, we can use an alternate syntax. This method only works for heading 1 and heading 2. Add any number of = or - below the text for heading 1 or heading 2.

Heading 1
=

Heading 2
-

Now, let’s see how it looks on GitHub.

Heading 1

Heading 2

Text styles

Using markdown syntax, we can change texts’ styles, including bold, italic, blockquotes, monospaced, underlined, strike-through, boxed, subscript, and superscript.

We can use two asterisks (**), underscores (__), or an HTML tag <strong> to make a text bold. To make text italic, we can use one asterisk (*), underscore (_), or an HTML tag <em>. Also, we can make the text bold and italic at the same time.

Bold

**The quick brown fox jumps over the lazy dog.**

__The quick brown fox jumps over the lazy dog.__

<strong>The quick brown fox jumps over the lazy dog.</strong>

Italic

*The quick brown fox jumps over the lazy dog.*

_The quick brown fox jumps over the lazy dog._

<em>The quick brown fox jumps over the lazy dog.</em>

Bold and Italic

**_The quick brown fox jumps over the lazy dog._**

<strong><em>The quick brown fox jumps over the lazy dog.</em></strong>

Now, let’s see how it looks on GitHub.

Bold

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Italic

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Bold and Italic

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

To create blockquote, we can use the greater than sign >. We can create a single-line or multi-line blockquote. Also, blockquote inside a blockquote. We can add other text styles inside a blockquote, such as bold or italic text styles.

Blockquotes
> The quick brown fox jumps over the lazy dog.> The quick brown fox jumps over the lazy dog.
>
> The quick brown fox jumps over the lazy dog.
>
> The quick brown fox jumps over the lazy dog.> The quick brown fox jumps over the lazy dog.
>> The quick brown fox jumps over the lazy dog.
>>> The quick brown fox jumps over the lazy dog.> **The quick brown fox** *jumps over the lazy dog.*

Now, let’s see how it looks on GitHub.

The quick brown fox jumps over the lazy dog.> The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.> The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.> The quick brown fox jumps over the lazy dog.

We can achieve monospaced, and underlined styles using HTML tags <samp> and <ins>. For a strike-through style, we can use two tilda sign ~~.

Monospaced: <samp>The quick brown fox jumps over the lazy dog.</samp>

Underlined: <ins>The quick brown fox jumps over the lazy dog.</ins>

Strike-through: ~~The quick brown fox jumps over the lazy dog.~~

Now, let’s see how it looks on GitHub.

Monospaced: The quick brown fox jumps over the lazy dog.

Underlined: The quick brown fox jumps over the lazy dog.

Strike-through: The quick brown fox jumps over the lazy dog.

We can use an HTML <table> tag to create a box.

Boxed
<table><tr><td>The quick brown fox jumps over the lazy dog.</td></tr></table>

Now, let’s see how it looks on GitHub.

We can achieve subscript and superscript styles using HTML tag <sub> and <sup>. It is useful when you’re writing a mathematical formula.

Subscript: <sub>The quick brown fox jumps over the lazy dog.</sub>

Superscript: <sup>The quick brown fox jumps over the lazy dog.</sup>

Now, let’s see how it looks on GitHub.

Subscript: _{The quick brown fox jumps over the lazy dog.}

Superscript: ^{The quick brown fox jumps over the lazy dog.}

Syntax Highlighting

We can use a single backtick ` before and after the code block to create the following view.

A class method is an instance method of the class object. When a new class is created, an object of type `Class` is initialized and assigned to a global constant (Mobile in this case).

As you can see the word Class is highlighted.

We can also use triple backticks ``` before and after the code block to create the following view.

```
public static String monthNames[] = {"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"};```

We can add an optional language identifier to enable syntax highlighting. Refer to this GitHub document to find all the valid keywords.

```java
public static String monthNames[] = {"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"};```

Now, let’s see how it looks on GitHub.

Alignments

By using HTML tags, we can align README contents.

<p align="left">
<img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" border="10"/>
</p>

<p align="center">
<img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" border="10"/>
</p>

<p align="right">
<img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" border="10"/>
</p>

Now, let’s align a text.

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

Tables

Let’s create a table without headers.

<table>
<tr>
<td width=”33%””>
The quick brown fox jumps over the lazy dog.
</td>
<td width=”33%”>
The quick brown fox jumps over the lazy dog.
</td>
<td width=”33%”>
The quick brown fox jumps over the lazy dog.
</td>
</tr>
</table>

To create a table with headers we need to use dashes to separate each header cell and use pipes to separate columns. The outer pipes are optional. We can use any number of dashes and spaces to increase readability. We can use colons to align columns. For left-align text, use a colon to the left of dashes. For center-align text, use a colon on both sides of dashes. For right-align text, use a colon to the right of dashes. By default Left align is used.

| Default | Left align | Center align | Right align |
| - | :- | :-: | -: |
| 9999999999 | 9999999999 | 9999999999 | 9999999999 |
| 999999999 | 999999999 | 999999999 | 999999999 |
| 99999999 | 99999999 | 99999999 | 99999999 |
| 9999999 | 9999999 | 9999999 | 9999999 || Default    | Left align | Center align | Right align |
| ---------- | :--------- | :----------: | ----------: |
| 9999999999 | 9999999999 | 9999999999   | 9999999999  |
| 999999999  | 999999999  | 999999999    | 999999999   |
| 99999999   | 99999999   | 99999999     | 99999999    |

| 9999999 | 9999999 | 9999999 | 9999999 |Default | Left align | Center align | Right align | |:———–|:———–|:———-:|——————————————————————:| | 9999999999 | 9999999999 | 9999999999 | 9999999999 | | 999999999 | 999999999 | 999999999 | 999999999 | | 99999999 | 99999999 | 99999999 | 99999999 | | 9999999 | 9999999 | 9999999 | 9999999 |

Now display two tables side by side.

<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>

<td>

| A | B | C |
|--|--|--|
| 1 | 2 | 3 |

</td><td>

| A | B | C |
|--|--|--|
| 1 | 2 | 3 |

</td></tr> </table>

Let’s create a table with multiple lines using the HTML <br/> tag.

| A | B | C |
|---|---|---|
| 1 | 2 | 3 <br/> 4 <br/> 5 |

Links

We can create a link in four ways. The first one is by using an inline style. The second one uses reference style, the third one using relative links, and finally auto links.

[The-Ultimate-Markdown-Cheat-Sheet (https://github.com/lifeparticle/The-Ultimate-Markdown-Cheat-Sheet)

If you’re using the same link more the once, then using the reference style would be beneficial since you don’t have to write the link every time, and also, it’s easy to update the link. Moreover, you can use numbers for the reference text. Also, you can use the reference text as the link text.

[The-Ultimate-Markdown-Cheat-Sheet][reference text][The-Ultimate-Markdown-Cheat-Sheet][1][Markdown-Cheat-Sheet][reference text]: https://github.com/lifeparticle/The-Ultimate-Markdown-Cheat-Sheet
[1]: https://github.com/lifeparticle/The-Ultimate-Markdown-Cheat-Sheet
[Markdown-Cheat-Sheet]: https://github.com/lifeparticle/The-Ultimate-Markdown-Cheat-Sheet

We can also create relative links with all relative link operands, such as ./ and ../.

[Example of a relative link](rl.md)

GitHub can automatically create links from standard URLs.

Visit https://github.com/

Images

We can add images using the similar techniques we used for links.

![alt text](https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=80)

![alt text][image][image]: https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=80

Also, we can use the HTML img tag to add an image.

<img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" border="10"/>

We can also embed GIF and SVG.

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

<img src="https://img.shields.io/badge/theultimatemarkdowncheatsheet-brightgreen.svg" />

Lists

For lists, we can have ordered and unordered lists.

1. One
2. Two
3. Three

Now let’s create an ordered list with sub-items.

1. First level
    1. Second level
        - Third level
            - Fourth level
2. First level
    1. Second level
3. First level
    1. Second level

To create an unordered list, we can asterisk, plus, or minus sign.

* 1
* 2
* 3+ 1
+ 2
+ 3- 1
- 2
- 3

Now let’s create an unordered list with sub-items.

- First level
    - Second level
        - Third level
            - Fourth level
- First level
    - Second level
- First level
    - Second level

We can also use HTML to create a list.

<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>

Now let’s create a task list. We can create a task list using a hyphen followed by [ ], and to mark a task complete, put an x inside the brackets.

- [x] Fix Bug 223
- [ ] Add Feature 33
- [ ] Add unit tests

Horizontal Rule

We can use three hyphens, asterisks, or underscores to create a horizontal line.

---
***
___

Miscellaneous

We can include comments inside a .md file.

<!--
Lorem ipsum dolor sit amet
-->

We can use a backslash to escape literal characters. Before escaping.

*   Asterisk
\   Backslash
`   Backtick
{}  Curly braces
.   Dot
!   Exclamation mark
#   Hash symbol
-   Hyphen symbol
()  Parentheses
+   Plus symbol
[]  Square brackets
_   Underscore

After escaping.

\*   Asterisk
\\   Backslash
\`   Backtick
\{}  Curly braces
\.   Dot
\!   Exclamation mark
\#   Hash symbol
\-   Hyphen symbol
\()  Parentheses
\+   Plus symbol
\[]  Square brackets
\_   Underscore

We can also include emojis in our .md file.

:octocat:

We can mention a person or team by typing @ with their username or team name.

@lifeparticle

We can also bring up a list of suggested issues and pull requests within the repository by typing #.

#

Tools

There are various tools for Markdown, which will help you to build a beautiful GitHub README faster.

1. Create a Markdown table of content — GitHub
2. Create an empty Markdown table — Tablesgenerator
3. Convert Excel to Markdown table — Tableconvert
4. Markdown preview for Sublime Text 3 — Packagecontrol
5. Markdown preview Visual Studio Code — Marketplace

Congratulation! Now you know how to create an awesome README for your next project. I hope you learned something new. Now have a look into the official documentation on GitHub. Happy coding!