Markdown

Markdown-Logo

Markdown and GFM (GitHub Flavoured Markdown) Crash Course 2021

Markdown provides a powerful yet straightforward way for users (both technical and non-technical) to write plain text documents that can be rendered richly as HTML.

Table of contents

What is Markdown?

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.

You can use Markdown most places around GitHub:

What is GFM?

GitHub.com uses its own version of the Markdown syntax that provides an additional set of useful features, many of which make it easier to work with content on GitHub.com.

Note that some features of GitHub Flavored Markdown are only available in the descriptions and comments of Issues and Pull Requests. These include @mentions as well as references to SHA-1 hashes, Issues, and Pull Requests. Task Lists are also available in Gist comments and in Gist Markdown files.

↥ Back To Top

Headings

To create a heading, add number signs (#) in front of a word or phrase. The number of number signs you use should correspond to the heading level. For example, to create a heading level two (<h2>), use three number signs (e.g. ## My Header). # Heading 1 ## Heading 2 ###### Heading 6

# Heading 1
## Heading 2
###### Heading 6

Headings Alternate Syntax

Alternatively, on the line below the text, add any number of == characters for heading level 1 or -- characters for heading level 2.

Heading 1

Heading 2 —————

Heading level 1
===============

Heading level 2
---------------
↥ Back To Top

Paragraphs

To create paragraphs, use a blank line to separate one or more lines of text.

To create paragraphs, use a blank line to separate one or more lines of text.

To create paragraphs, use a blank line to separate one or more lines of text.

Line Breaks

To create a line break (<br>), end a line with two or more spaces, and then type return.

This is the first line.  
And this is the second line.
↥ Back To Top

Emphasis

You can add emphasis by making text bold or italic. ## Bold

## Italic

## Bold and Italic

## Bold

- Hello **World**.
- Hello __World__.
- Hello **World**!

## Italic

- Hello *World*.
- Hello _World_.
- Hello *World*!

## Bold and Italic

- Hello ***World***.
- Hello ___World___.
- Hello --*World--*.
↥ Back To Top

Blockquotes

To create a blockquote, add a > in front of a paragraph.

Hello, World!

## Blockquotes with Multiple Paragraphs

Blockquotes can contain multiple paragraphs. Add a > on the blank lines between the paragraphs.

Hello, World!

Ramadan Mubarak.

## Nested Blockquotes

Blockquotes can be nested. Add a >> in front of the paragraph you want to nest.

Hello, World!

Ramadan Mubarak.

## Blockquotes with Other Elements

Blockquotes can contain other Markdown formatted elements.

Hello, World!

Ramadan Mubarak.

## Blockquotes

> Hello, World!
  
## Blockquotes with Multiple Paragraphs

> Hello, World!
>
> Ramadan Mubarak.

## Nested Blockquotes

> Hello, World!
>
>> Ramadan Mubarak.

## Blockquotes with Other Elements

> Hello, **World**!
>
>> ***Ramadan Mubarak***.
↥ Back To Top

Lists

You can organize items into ordered and unordered lists.

## 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.

  1. One
  2. Two
↥ Back To Top

## 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.

↥ Back To Top

## Adding Elements in Lists

To add another element in a list while preserving the continuity of the list, indent the element four spaces or one tab.

## Ordered Lists

1. One
2. Two
  
## Unordered lists

- One
- Two

## Adding Elements in Lists

- One
- Two

    Three

- Four
↥ Back To Top

Code

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

At the command prompt, type touch.

## Code

At the command prompt, type `touch`.
↥ Back To Top

Code Blocks

Code blocks are normally indented four spaces or one tab. When they’re in a list, indent them eight spaces or two tabs.

  1. Open the file.
  2. Find the following code block on line 298:

     <html>
       <head>
         <title>Hello, World!</title>
       </head>
    
  3. Update the title to match the name of your website.
## Code Blocks

1. Open the file.
2. Find the following code block on line 298:

        <html>
          <head>
            <title>Hello, World!</title>
          </head>

3. Update the title to match the name of your website.
↥ Back To Top

Images

  1. Open the folder containing the Markdown Logo.

    Markdown Logo

  2. Close the folder.

## Images

Format: ![Alt Text](url)

1. Open the folder containing the Markdown Logo.

    ![Markdown Logo](./images/logo.png "Markdown")

2. Close the folder.

Horizontal Rules

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


You got it right!

## Horizontal Rules

---

You got it right!
↥ Back To Top

To create a link, enclose the link text in brackets (e.g., [GitHub]) and then follow it immediately with the URL in parentheses (e.g., (https://github.com/)).

I love GitHub

I love GitHub

https://github.com

test@test.com

I love GitHub

See the section on Links.

## Links

I love [GitHub](https://github.com/)


<!-- Adding Titles -->

I love [GitHub](https://github.com/ "GitHub")


<!-- URLs and Email Addresses -->

<https://github.com>

<test@test.com>

<!-- Formatting Links -->

I love ***[GitHub](https://github.com/ "GitHub")***

See the section on [`Links`](#links).
↥ Back To Top

Escaping Characters

To display a literal character that would otherwise be used to format text in a Markdown document, add a backslash (\)in front of the character.

You can use a backslash to escape the following characters:

*(\,`,,_,,{ },[ ],< >,( ),#,+,-,.,!, )**

- Without the backslash, this would be a bullet in an unordered list.

## Escaping Characters

\- Without the backslash, this would be a bullet in an unordered list.
↥ Back To Top

Tables

To add a table, use three or more hyphens (---) to create each column’s header, and use pipes (|) to separate each column. You can optionally add pipes on either end of the table.

You can align text in the columns to the left, right, or center by adding a colon (:) to the left, right, or on both side of the hyphens within the header row. Cell widths can vary. The rendered output will look the same.

Name Age Country
John 46 Seychelles
Kevin 56 Kazakhstan

Build a table using the graphical interface, and then copy the generated Markdown-formatted text into your file. Markdown Tables Generator

## Tables

| **Name**      | **Age**     | **Country**   |
| :---          |    :----:   |          ---: |
| John          | 46          | Seychelles    |
| Kevin         | 56          | Kazakhstan    |
↥ Back To Top

Fenced Code Blocks

The basic Markdown syntax allows you to create code blocks by indenting lines by four spaces or one tab, but sometimes it is a hectic one to do. So by using fenced code blocks we can get rid of it. Three backticks (```) or three tildes (~~~) on the lines before and after the code block will do the work for you.

{
  "firstName": "John",
  "lastName": "Cena",
  "age": 44
}
## Fenced Code Blocks

    ```
    {
      "firstName": "John",
      "lastName": "Cena",
      "age": 44
    }
    ```
↥ Back To Top

Syntax Highlighting

Many Markdown processors support syntax highlighting for fenced code blocks. This feature allows you to add color highlighting for whatever language your code was written in. To add syntax highlighting, specify a language next to the backticks before the fenced code block.

{
  $firstName = "John";
  $lastName = "Cena";
  $age = 25;
}
## Syntax Highlighting

    ```php
    {
      $firstName = "John";
      $lastName = "Cena";
      $age = 25;
    }
    ```
↥ Back To Top

Heading IDs

To add a custom heading ID, enclose the custom ID in curly braces on the same line as the heading.

You can link to headings with custom IDs in the file by creating a standard link with a number sign (#) followed by the custom heading ID.

Heading IDs

## Heading IDs

[Heading IDs](#heading-ids)
↥ Back To Top

Strikethrough

This feature allows you to indicate that certain words are a mistake not meant for inclusion in the document. To strikethrough words, use two tilde symbols (~~) before and after the words.

Hello Wprld! Hello World!

## Strikethrough

~~Hello Wprld~~! Hello World!
↥ Back To Top

Task Lists

Task lists allow you to create a list of items with checkboxes. To create a task list, add dashes (-) and brackets with a space ([ ]) in front of task list items. To select a checkbox, add an x in between the brackets ([x]).

## Task Lists

- [x] Learn Markdown.
- [ ] Practice Markdown.
- [ ] Repeat It.
↥ Back To Top

Collapsible Items

Content can be collapsed using HTML’s <details> and <summary> tags.

Click this to collapse.
  1. Dhaka
  2. Dinajpur
  3. Chittagong
##  Collapsible Items

<details>
<summary>Click this to collapse.</summary>
<ol style="line-height:180%">
  <li>Dhaka</li>
  <li>Dinajpur</li>
  <li>Chittagong</li>
</ol>
</details>
↥ Back To Top

Badges

Browse Shields Io a complete list of badges and locate a particular badge by using the search bar or by browsing the categories. Click on the badge to fill in required data elements for that badge type (like your username or repo) and optionally customize (label, colors etc.). And it’s ready for use!

Use the button at the bottom to copy your badge url or snippet, which can then be added to places like your GitHub readme files or other web pages.

Badge

↥ Back To Top

Emoji

There are two ways to add emoji to Markdown files: copy and paste the emoji into your Markdown-formatted text, or type emoji shortcodes.

That is so funny! 😂

↥ Back To Top

Automatic URL Linking

That means if you type http://www.example.com, your Markdown processor will automatically turn it into a link even though you haven’t used brackets.

↥ Back To Top

Disabling Automatic URL Linking

If you don’t want a URL to be automatically linked, you can remove the link by denoting the URL as code with backticks.

http://www.example.com

## Disabling Automatic URL Linking

`http://www.example.com`
↥ Back To Top

🛡️ License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Support

This project needs a ⭐️ from you. Don’t forget to leave a star ⭐️

If you like this project, please consider Buying Me a Coffee.

Thanks for the Support. 😍

Buy Me A Coffee