Basic Markdown Cheatsheet


Markdown and it's output

Markdown Basics

If you’re new to markdown, checkout the article What is Markdown. Below, each code block corresponds to the styled elements that follow them. If you would like to try writing mark down live in your browser, head over to this site and use the Markdown Live Editor.

HEADINGS

#h1 Element#
##h2 Element##
###h3 Element###
####h4 Element####
#####h5 Element#####
######h6 Element#######  

h1 Element

h2 Element

h3 Element

h4 Element

h5 Element
h6 Element

TYPOGRAPHY

**Bolded Text**

*Em Text

This is a basic paragraph.

>"A right carat defines a blockquote it will offset the text a bit"

Bolded Text

Em Text

This is a basic paragraph.

“A right carat defines a blockquote it will offset the text a bit”

LINKS AND IMAGES

###Here we have an inline image...

![This is alt text](http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Red_Apple.jpg/128px-Red_Apple.jpg "Sample Image")

###The following is a reference style image###

![Red-Apple][apple-url]

This is an inline [link](https://google.com "Google")

This is a reference style [link][1]

<!-- reference list -->
[apple-url]: http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Red_Apple.jpg/128px-Red_Apple.jpg "Red Apple"

[1]: https://google.com (Google)

Here we have an inline image…

This is alt text

The following is a reference style image

Red-Apple

This is an inline link

This is a reference style link

LISTS

###This is an un-ordered list###

+  Apple
+  Orange  
+  Banana


###This is an ordered list###

1.  Apple   
2.  Orange  
3.  Banana

###This is an nested ordered and unordered list###

1.  one
    + Apple
    + Orange
    + Banana
        1.  ripe
        2.  sweet
        3.  delicious
2.  two  
3.  three

This is an un-ordered list

  • Apple
  • Orange
  • Banana

This is an ordered list

  1. Apple
  2. Orange
  3. Banana

This is an nested ordered and unordered list

  1. one
    • Apple
    • Orange
    • Banana
      1. ripe
      2. sweet
      3. delicious
  2. two
  3. three

Code

Code blocks are a snap with markdown

Simply indent 4 pixels

    $('#some-id').css({
        color: "red",
        height:"44px",
        width: '100%'
    });

or use back ticks

`<div id="some-id">Hello world!</div>`

Simply indent 4 pixels

$('#some-id').css({
    color: "red",
    height:"44px",
    width: '100%'
});

or use back ticks

<div id="some-id">Hello world!</div>

If you need to do anything really fancy, you can still use html syntax

<span style="color:red">
    Anything inside of here will be <strong>red</srong> now.  Although, markdown will no longer work here.
</span>


Anything inside of here will be red now. Although, markdown will no longer work here.


Join the discussion

Email addresses will not be published.
Comments will not be displayed until approved by an admin