Supported Github Flavoured Markdown Cheat Sheet

How have I done inline code highlighting?

How have I done `inline code highlighting`?

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

How?

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

Blockquote ? Yes it is.

How?

> Blockquote ? Yes it is.

~~Strikethrough~~

How?

~~Strikethrough~~

Hi
How
Are
You?

How?

* Hi
* How 
* Are 
* You?

What about ordered list?

One (Hi)
Two (How)
Three (Are)
Four (You)

How?

1. One (Hi)
2. Two (How)
3. Three (Are)
4. Four (You)

Complex

Level 1
Level 2
- Level 3
- Level 4
  - Level 5

How ?

1. Level 1
  1. Level 2
    + Level 3
      - Level 4
        * Level 5

em tag

How?

*`em` tag*

strong tag

How?

**`strong` tag**

Noticed? Just written inline-code in em and strong tag.

If you want to produce * and _ then add \ before _ and *. So \* = * and \_ = _

If you want to produce __\*__ and **\_** then add `\` before `_` and `*`. So `\*` = \* and `\_` = \_

Image:

How?

![alt text](https://talkcab.trentend.uk/media/conf/logo.549da21a.png "title here")

Another way:

![alt text][id]
[id]: https://talkcab.trentend.uk/media/conf/logo.549da21a.png "title here"

Link:

Github

How?

[Github](http://github.com "title here")

Another way:

[github][id2]
[id2]: http://github.com "title here"

Automatic Links? (Yeah)

github.com

How? just paste with the full url means with http:// or https://. e.g. http://github.com.

Code Highlighting

HTML

<body>
  <div class="loader"></div>
  <div class="pause">Click To Pause</div>
</body>

SCSS


$width: 7em;
$height: 3em;
$c-0: #34495e;
$c-1: lighten(#e74c3c,5%);
$c-2: lighten(#e67e22,5%);
$c-3: lighten(#f1c40f,5%); 

label[for="checkbox"] {
  font-size: 2em;
  position: absolute;
  margin-top: 0.2em;
  text-transform: capitalize;
  color: $c-0;
  transition: all 0.5s ease-in-out;
}

input[type="checkbox"] {
  appearance: none;
  width: $width;
  height: $height;
  background: lighten($c-0,25%);
  border-radius: $width / 2;
  position: relative;
  overflow: hidden;
  outline: none;
  transition: all 0.5s ease-in-out;

  &:before {
    width: $width / 2;
    height: $height;
    content: '';
    position: absolute;
    background: linear-gradient( lighten($c-1,17%), lighten($c-2,17%), lighten($c-3,17%) );
    transition: all 0.5s ease-in-out;
  }
  &:checked {
    &:before {
      margin: 0 $width / 2;
    }

    background: lighten($c-0,35%);
    opacity: 0;

    ~label[for="checkbox"] {
      &:before {
        transition: 0.5s all ease-in-out;
        content: '';
        position: absolute;
        height: 0.5em;
        width: 1em;
        margin: -0.1em -2.0em;
        box-shadow:
          0.3em -0.1em 0 $c-0,
          0.3em -0.2em 0 $c-0,
          0.3em -0.1em 0 $c-0;
        background: transparent;
        transform: rotate(120deg);
      }
    }
  }
}

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);

body {
  background: #eee;
}
.logo {
  -webkit-animation-play-state: running !important;
  animation-play-state: running !important;
  font: bolder 4em 'Source Code Pro', sans-serif;
  letter-spacing: -0.12em;
  color: #ddd;
  animation: shadow 2s linear infinite;
  text-shadow: 1px 1px 3px grey, 2px 2px 4px lightgrey, 3px 3px 5px #aaa, 4px 4px 6px #aaa, 5px 5px 6px #bbb, 6px 6px 7px #ccc, 7px 7px 8px #ddd, 8px 8px 9px #eee;
}
@keyframes shadow {
  to {
    text-shadow: 8px 8px 9px #eee, 7px 7px 8px #ddd, 6px 6px 7px #ccc, 5px 5px 6px #bbb, 4px 4px 6px #aaa, 3px 3px 5px #aaa, 2px 2px 4px lightgrey, 1px 1px 3px grey;
    color: grey;
  }
}

How to highlight code?

You can highlight code with 4 spaces or with ```(language-name(optional)).

Highlight without any language syntax

" ```
  <-- code here -->
  ``` "

This will just wrap code in pre tag.
Ignore " because It's not showing alone, So I've to use it.

Highlight with any language syntax

" ```html
  <-- code here -->
  ``` "

I've written html because I want to highlight html code.
You can use other languages, For example: scss, sass, python, ruby, javascript, jade, less, php etc.
Ignore " because It's not showing alone, So I've to use it.

Horizontal Line?

How?

This, 
- - - - -

Resources - [Github Help on GFM] (help.github.com/articles/github-flavored-markdown "Help From Github on GFM"), [CSSDeck Docs] (cssdeck.com/labs/learning-the-markdown-syntax "Markdown Help")

Uses GitHub Flavoured Markdown

Supported Github Flavoured Markdown Cheat Sheet

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6