How to Write

Buttons

Default Primary Success Info Warning Danger Link

Default Primary Success Info Warning Danger Link

Large button Default button Small button Mini button

Typography

Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Tables

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content

Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.

Labels

Default Primary Success Warning Danger Info

List groups

Panels

Basic panel
Panel heading
Panel content
Panel content

Panel primary

Panel content

Panel success

Panel content

Panel warning

Panel content

Panel danger

Panel content

Panel info

Panel content

Wells

Look, I'm in a well!
Look, I'm in a small well!
Look, I'm in a large well!

From adam-p/markdown-here

Table of Contents

Headers
Emphasis
Lists
Links
Images
Code and Syntax Highlighting
Tables
Blockquotes
Inline HTML
Horizontal Rule
Line Breaks
Youtube videos

Headers

# H1
## H2
### H3
#### H4
##### H5
###### H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------

H1

H2

H3

H4

H5
H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1

Alt-H2

Emphasis

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. Scratch this.

Lists

(In this example, leading and trailing spaces are shown with with dots: ⋅)

1. First ordered list item
2. Another item
⋅⋅* Unordered sub-list.
1. Actual numbers don't matter, just that it's a number
⋅⋅1. Ordered sub-list
4. And another item.

⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

* Unordered list can use asterisks
- Or minuses
+ Or pluses
  1. First ordered list item
  2. Another item
    • Unordered sub-list.
  3. Actual numbers don’t matter, just that it’s a number
  4. Ordered sub-list
  5. And another item.

    You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we’ll use three here to also align the raw Markdown).

    To have a line break without a paragraph, you will need to use two trailing spaces.
    Note that this line is separate, but within the same paragraph.
    (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

  • Unordered list can use asterisks
  • Or minuses
  • Or pluses

There are two ways to create links.

[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

[I'm a reference-style link][Arbitrary case-insensitive reference text]

[I'm a relative reference to a repository file](../blob/master/LICENSE)

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself].

URLs and URLs in angle brackets will automatically get turned into links.
http://www.example.com or <http://www.example.com> and sometimes
example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com

I’m an inline-style link

I’m an inline-style link with title

I’m a reference-style link

I’m a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself.

URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

Images

Here's our logo (hover to see the title text):

Inline-style:
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

Reference-style:
![alt text][logo]

[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"

Here’s our logo (hover to see the title text):

Inline-style: alt text

Reference-style: alt text

Code and Syntax Highlighting

Code blocks are part of the Markdown spec, but syntax highlighting isn’t. However, many renderers – like Github’s and Markdown Here – support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. Markdown Here supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the highlight.js demo page.

Inline `code` has `back-ticks around` it.

Inline code has back-ticks around it.

Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. I recommend only using the fenced code blocks – they’re easier and only they support syntax highlighting.

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```

```python
s = "Python syntax highlighting"
print s
```

```
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
```
var s = "JavaScript syntax highlighting";
alert(s);
s = "Python syntax highlighting"
print s
No language indicated, so no syntax highlighting in Markdown Here (varies on Github).
But let's throw in a <b>tag</b>.

Tables

Tables aren’t part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email – a task that would otherwise require copy-pasting from another application.

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the
raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

Colons can be used to align columns.

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1
There must be at least 3 dashes separating each header cell. The outer pipes ( ) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown.
Markdown Less Pretty
Still renders nicely
1 2 3

Blockquotes

> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Inline HTML

You can also use raw HTML in your Markdown, and it’ll mostly work pretty well.

<dl>
  <dt>Definition list</dt>
  <dd>Is something people use sometimes.</dd>

  <dt>Markdown in HTML</dt>
  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
Definition list
Is something people use sometimes.
Markdown in HTML
Does *not* work **very** well. Use HTML tags.

Horizontal Rule

Three or more...

---

Hyphens

***

Asterisks

___

Underscores

Three or more…


Hyphens


Asterisks


Underscores

Line Breaks

My basic recommendation for learning how line breaks work is to experiment and discover – hit <Enter> once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You’ll soon learn to get what you want. “Markdown Toggle” is your friend.

Here are some things to try out:

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.

Here’s a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also begins a separate paragraph, but…
This line is only separated by a single newline, so it’s a separate line in the same paragraph.

(Technical note: Markdown Here uses GFM line breaks, so there’s no need to use MD’s two-space line breaks.)

Youtube videos

They can’t be added directly but you can add an image with a link to the video like this:

<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg"
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Or, in pure Markdown, but losing the image sizing and border:

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

Referencing a bug by #bugID in your git commit links it to the slip. For example #1.


License: CC-BY

500px
address-book
address-book-o
address-card
address-card-o
adjust
adn
align-center
align-justify
align-left
align-right
amazon
ambulance
american-sign-language-interpreting
anchor
android
angellist
angle-double-down
angle-double-left
angle-double-right
angle-double-up
angle-down
angle-left
angle-right
angle-up
apple
archive
area-chart
arrow-circle-down
arrow-circle-left
arrow-circle-o-down
arrow-circle-o-left
arrow-circle-o-right
arrow-circle-o-up
arrow-circle-right
arrow-circle-up
arrow-down
arrow-left
arrow-right
arrow-up
arrows
arrows-alt
arrows-h
arrows-v
assistive-listening-systems
asterisk
at
audio-description
backward
balance-scale
ban
bandcamp
bar-chart
barcode
bars
bath
battery-empty
battery-full
battery-half
battery-quarter
battery-three-quarters
bed
beer
behance
behance-square
bell
bell-o
bell-slash
bell-slash-o
bicycle
binoculars
birthday-cake
bitbucket
bitbucket-square
black-tie
blind
bluetooth
bluetooth-b
bold
bolt
bomb
book
bookmark
bookmark-o
braille
briefcase
btc
bug
building
building-o
bullhorn
bullseye
bus
buysellads
calculator
calendar
calendar-check-o
calendar-minus-o
calendar-o
calendar-plus-o
calendar-times-o
camera
camera-retro
car
caret-down
caret-left
caret-right
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
caret-up
cart-arrow-down
cart-plus
cc
cc-amex
cc-diners-club
cc-discover
cc-jcb
cc-mastercard
cc-paypal
cc-stripe
cc-visa
certificate
chain-broken
check
check-circle
check-circle-o
check-square
check-square-o
chevron-circle-down
chevron-circle-left
chevron-circle-right
chevron-circle-up
chevron-down
chevron-left
chevron-right
chevron-up
child
chrome
circle
circle-o
circle-o-notch
circle-thin
clipboard
clock-o
clone
cloud
cloud-download
cloud-upload
code
code-fork
codepen
codiepie
coffee
cog
cogs
columns
comment
comment-o
commenting
commenting-o
comments
comments-o
compass
compress
connectdevelop
contao
copyright
creative-commons
credit-card
credit-card-alt
crop
crosshairs
css3
cube
cubes
cutlery
dashcube
database
deaf
delicious
desktop
deviantart
diamond
digg
dot-circle-o
download
dribbble
dropbox
drupal
edge
eercast
eject
ellipsis-h
ellipsis-v
empire
envelope
envelope-o
envelope-open
envelope-open-o
envelope-square
envira
eraser
etsy
eur
exchange
exclamation
exclamation-circle
exclamation-triangle
expand
expeditedssl
external-link
external-link-square
eye
eye-slash
eyedropper
facebook
facebook-official
facebook-square
fast-backward
fast-forward
fax
female
fighter-jet
file
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-o
file-pdf-o
file-powerpoint-o
file-text
file-text-o
file-video-o
file-word-o
files-o
film
filter
fire
fire-extinguisher
firefox
first-order
flag
flag-checkered
flag-o
flask
flickr
floppy-o
folder
folder-o
folder-open
folder-open-o
font
font-awesome
fonticons
fort-awesome
forumbee
forward
foursquare
free-code-camp
frown-o
futbol-o
gamepad
gavel
gbp
genderless
get-pocket
gg
gg-circle
gift
git
git-square
github
github-alt
github-square
gitlab
glass
glide
glide-g
globe
google
google-plus
google-plus-official
google-plus-square
google-wallet
graduation-cap
gratipay
grav
h-square
hacker-news
hand-lizard-o
hand-o-down
hand-o-left
hand-o-right
hand-o-up
hand-paper-o
hand-peace-o
hand-pointer-o
hand-rock-o
hand-scissors-o
hand-spock-o
handshake-o
hashtag
hdd-o
header
headphones
heart
heart-o
heartbeat
history
home
hospital-o
hourglass
hourglass-end
hourglass-half
hourglass-o
hourglass-start
houzz
html5
i-cursor
id-badge
id-card
id-card-o
ils
imdb
inbox
indent
industry
info
info-circle
inr
instagram
internet-explorer
ioxhost
italic
joomla
jpy
jsfiddle
key
keyboard-o
krw
language
laptop
lastfm
lastfm-square
leaf
leanpub
lemon-o
level-down
level-up
life-ring
lightbulb-o
line-chart
link
linkedin
linkedin-square
linode
linux
list
list-alt
list-ol
list-ul
location-arrow
lock
long-arrow-down
long-arrow-left
long-arrow-right
long-arrow-up
low-vision
magic
magnet
male
map
map-marker
map-o
map-pin
map-signs
mars
mars-double
mars-stroke
mars-stroke-h
mars-stroke-v
maxcdn
meanpath
medium
medkit
meetup
meh-o
mercury
microchip
microphone
microphone-slash
minus
minus-circle
minus-square
minus-square-o
mixcloud
mobile
modx
money
moon-o
motorcycle
mouse-pointer
music
neuter
newspaper-o
object-group
object-ungroup
odnoklassniki
odnoklassniki-square
opencart
openid
opera
optin-monster
outdent
pagelines
paint-brush
paper-plane
paper-plane-o
paperclip
paragraph
pause
pause-circle
pause-circle-o
paw
paypal
pencil
pencil-square
pencil-square-o
percent
phone
phone-square
picture-o
pie-chart
pied-piper
pied-piper-alt
pied-piper-pp
pinterest
pinterest-p
pinterest-square
plane
play
play-circle
play-circle-o
plug
plus
plus-circle
plus-square
plus-square-o
podcast
power-off
print
product-hunt
puzzle-piece
qq
qrcode
question
question-circle
question-circle-o
quora
quote-left
quote-right
random
ravelry
rebel
recycle
reddit
reddit-alien
reddit-square
refresh
registered
renren
repeat
reply
reply-all
retweet
road
rocket
rss
rss-square
rub
safari
scissors
scribd
search
search-minus
search-plus
sellsy
server
share
share-alt
share-alt-square
share-square
share-square-o
shield
ship
shirtsinbulk
shopping-bag
shopping-basket
shopping-cart
shower
sign-in
sign-language
sign-out
signal
simplybuilt
sitemap
skyatlas
skype
slack
sliders
slideshare
smile-o
snapchat
snapchat-ghost
snapchat-square
snowflake-o
sort
sort-alpha-asc
sort-alpha-desc
sort-amount-asc
sort-amount-desc
sort-asc
sort-desc
sort-numeric-asc
sort-numeric-desc
soundcloud
space-shuttle
spinner
spoon
spotify
square
square-o
stack-exchange
stack-overflow
star
star-half
star-half-o
star-o
steam
steam-square
step-backward
step-forward
stethoscope
sticky-note
sticky-note-o
stop
stop-circle
stop-circle-o
street-view
strikethrough
stumbleupon
stumbleupon-circle
subscript
subway
suitcase
sun-o
superpowers
superscript
table
tablet
tachometer
tag
tags
tasks
taxi
telegram
television
tencent-weibo
terminal
text-height
text-width
th
th-large
th-list
themeisle
thermometer-empty
thermometer-full
thermometer-half
thermometer-quarter
thermometer-three-quarters
thumb-tack
thumbs-down
thumbs-o-down
thumbs-o-up
thumbs-up
ticket
times
times-circle
times-circle-o
tint
toggle-off
toggle-on
trademark
train
transgender
transgender-alt
trash
trash-o
tree
trello
tripadvisor
trophy
truck
try
tty
tumblr
tumblr-square
twitch
twitter
twitter-square
umbrella
underline
undo
universal-access
university
unlock
unlock-alt
upload
usb
usd
user
user-circle
user-circle-o
user-md
user-o
user-plus
user-secret
user-times
users
venus
venus-double
venus-mars
viacoin
viadeo
viadeo-square
video-camera
vimeo
vimeo-square
vine
vk
volume-control-phone
volume-down
volume-off
volume-up
weibo
weixin
whatsapp
wheelchair
wheelchair-alt
wifi
wikipedia-w
window-close
window-close-o
window-maximize
window-minimize
window-restore
windows
wordpress
wpbeginner
wpexplorer
wpforms
wrench
xing
xing-square
y-combinator
yahoo
yelp
yoast
youtube
youtube-play
youtube-square