Markdown 101
- Paragraphs and Text Decoration
- Headings in Markdown
Demo heading 1

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

first
second
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

first
1. sub ordered list
  1. sub sub ordered list item
second
- sub unordered list item
  - sub sub unordered list item
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")

first - nested list with inline paragraph
1. sub ordered list item
  
  This is inline
  
  This is a paragraph nested inline
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

pixelspencil/markdown-101.md