Markdown 101

markdown-101.md

• Markdown 101
  • Paragraphs and Text Decoration
  • Headings in Markdown
• Demo heading 1
  • Demo heading 2
    • Demo heading 3
      • Demo heading 4
        • Demo heading 5
          • Demo heading 6
  • Links in Markdown
  • Markdown Images
  • Lists - Order, Unordered, Bullets and Nesting
  • Line Breaks, Horizontal Rules and Block Quotes
    • Line breaks:
    • Horizontal Rules:
    • Block Quotes:
  • Code Blocks
    • Example basic block of code with two indents:
    • Using specific code blocks with backticks:
      • CSS example
      • JavaScript example
    • Using inline single backticks
    • Using diff to highlight a change with code
      • diff code example
  • Tables
    • Example table code
    • Default table no alignment set
    • Table - left aligned
    • Table - right aligned
    • Table - center aligned
  • Github Treats
    • Checkboxes
    • Using # to tag PR
    • Using @ to tag someone in a PR

---

Markdown 101

Paragraphs and Text Decoration

Paragraph

Paragraph with a text string styled with _italic_

Paragraph with a text string styled with **bold**

Paragraph with a text string styled with ~~strikethrough~~

Paragraph

Paragraph with a text string styled with italic

Paragraph with a text string styled with bold

Paragraph with a text string styled with strikethrough

---

Headings in Markdown

# Heading 1

or

Heading 1
===

## Heading 2

or

Heading 2
---

### Heading 3

#### Heading 4 

##### Heading 5

###### Heading 6

Demo heading 1

Demo heading 2

Demo heading 3

Demo heading 4

Demo heading 5

Demo heading 6

---

Links in Markdown

Linking a url:
<https://www.someurl.com>

Linking a word:
[Word to be linked](https://www.someurl.com)

Linking a word and adding a title tag:
[Word to be linked](https://www.someurl.com "Title for url")

Using url keys to link a word:
[Word to be linked][1]
[Another word to be linked][word2]

[1]: https://www.someurl.com
[word2]: https://www.someurl.com

Linking a url: https://www.someurl.com

Linking a word

Linking a word and adding a title tag

Using url keys to link words using a digit in a key or using a word as a key

---

Markdown Images

basic image markup:
![]()

! = image
[] = alt text
() = image url

Example:
![Some alt text](https://source.unsplash.com/random/500x500)

Adding a tooltip to an image:

![Some alt text](https://source.unsplash.com/random/500x500 "This is the tooltip")

You can also use same linking method using keys:

![Some alt text][imageLink]

[imageLink]: https://source.unsplash.com/random/500x500

Linking an image to a larger version using nested markdown:

[![Some alt text](https://source.unsplash.com/random/500x500)](https://source.unsplash.com/random/1000x1000)

Linking an image to a larger version using usual html img src:

[<img src="https://source.unsplash.com/random/500x500">](https://source.unsplash.com/random/1000x1000)

---

Lists - Order, Unordered, Bullets and Nesting

Unordered list:

* first
* second
* third

+ first
+ second
+ third

- first
- second
- third

• first
• second
• third

• first
• second
• third

• first
• second
• third

Ordered list:

1. first
2. second
3. third

1. first
2. second
3. third

Nested lists:

1. first
   1. sub ordered list
      1. sub sub ordered list item

2. second
      * sub unordered list item
        * sub sub unordered list item
3. third

1. first

   1. sub ordered list
      1. sub sub ordered list item

2. second

   • sub unordered list item
     • sub sub unordered list item

3. third

Adding content in a nested list item:

1. first - nested list with inline paragraph
   1. sub ordered list item
   
      This is inline

      This is a paragraph nested inline

2. second - nested list item with image + text
   1. sub ordered list item
   
      This is inline
      
      ![Some alt text](https://source.unsplash.com/random/500x500 "This is the tooltip")

1. first - nested list with inline paragraph

   1. sub ordered list item

      This is inline

      This is a paragraph nested inline

2. second - nested list item with image + text

   1. sub ordered list item

      This is inline

      

---

Line Breaks, Horizontal Rules and Block Quotes

Line breaks:

Some text to be<br>broken over two lines

Horizontal Rules:

---

===

Block Quotes:

> This is a quote

> This is a 
> multi-line quote with
>
> a
>
> few line breaks

Line breaks:

Some text to be
broken over two lines

Horizontal Rules:

---

Block Quotes:

"This is a single line quote" — Person

"This is a multi-line quote with

a

few line breaks" — Person

---

Code Blocks

Example basic block of code with two indents:

      var something = 'string of something'

  var something = 'string of something'

Using specific code blocks with backticks:

      ```css
         selector {
            text-weight: 400;
         }
      ```

CSS example

   selector {
      text-weight: 400;
   }

JavaScript example

   var something = 'string of something'

Using inline single backticks

Hey did you try `var x = 100;`?

Hey did you try var x = 100;?

Using diff to highlight a change with code

      ```diff
      var x = 100;
      - var y = 200;
      + var y = 300;
      ```

diff code example

var x = 100;
- var y = 200;
+ var y = 300;

---

Tables

Example table code

Place a 'pipe' between each word you want inside a table cell:

|Dog's Name|Dog's Age| 
|---|---|
|Snickers|2|
|Prudence|8|

To left align you place the colon on the left:

|Dog's Name|Dog's Age| 
|:---|:---|
|Snickers|2|
|Prudence|8|

To right align you place the colon on the right:

|Dog's Name|Dog's Age| 
|---:|---:|
|Snickers|2|
|Prudence|8|

To center align you place a colon on both left and right:

|Dog's Name|Dog's Age| 
|:---:|:---:|
|Snickers|2|
|Prudence|8|

Default table no alignment set

Dog's Name	Dog's Age
Snickers	2
Prudence	8

Table - left aligned

Dog's Name	Dog's Age
Snickers	2
Prudence	8

Table - right aligned

Dog's Name	Dog's Age
Snickers	2
Prudence	8

Table - center aligned

Dog's Name	Dog's Age
Snickers	2
Prudence	8

---

Github Treats

Checkboxes

* [x] Check 1
* [ ] Check 2
* [ ] Check 3

• Check 1
• Check 2
• Check 3

Using # to tag PR

When typing out an issue you can use # to tag in an issue for relevance

I had the same problem in #55 but fixed in #99

I had the same problem in #55 but fixed in #99

Using @ to tag someone in a PR

When typing out an issue you can use @ to tag a person in an issue for follow up or notice

I had the same problem in #55 but fixed in #99 @someperson

I had the same problem in #55 but fixed in #99 @someperson