Block Elements␊ |
==============␊ |
␊ |
␊ |
Paragraphs and Line Breaks␊ |
--------------------------␊ |
␊ |
A paragraph is simply one or more consecutive lines of text, separated␊ |
by one or more blank lines. (A blank line is any line that looks like a␊ |
blank line -- a line containing nothing but spaces or tabs is considered␊ |
blank.) Normal paragraphs should not be indented with spaces or tabs.␊ |
␊ |
The implication of the "one or more consecutive lines of text" rule is␊ |
that Markdown supports "hard-wrapped" text paragraphs. This differs␊ |
significantly from most other text-to-HTML formatters (including Movable␊ |
Type's "Convert Line Breaks" option) which translate every line break␊ |
character in a paragraph into a `<br />` tag.␊ |
␊ |
When you *do* want to insert a `<br />` break tag using Markdown, you␊ |
end a line with two or more spaces, then type return.␊ |
␊ |
␊ |
␊ |
␊ |
Headers␊ |
-------␊ |
␊ |
Markdown supports two styles of headers, [Setext] [1] and [atx] [2].␊ |
␊ |
Setext-style headers are "underlined" using equal signs (for first-level␊ |
headers) and dashes (for second-level headers). For example:␊ |
␊ |
This is an H1␊ |
=============␊ |
␊ |
This is an H2␊ |
-------------␊ |
␊ |
Any number of underlining `=`'s or `-`'s will work.␊ |
␊ |
Atx-style headers use 1-6 hash characters at the start of the line,␊ |
corresponding to header levels 1-6. For example:␊ |
␊ |
# This is an H1␊ |
␊ |
## This is an H2␊ |
␊ |
###### This is an H6␊ |
␊ |
Optionally, you may "close" atx-style headers. This is purely␊ |
cosmetic -- you can use this if you think it looks better. The␊ |
closing hashes don't even need to match the number of hashes␊ |
used to open the header. (The number of opening hashes␊ |
determines the header level.) :␊ |
␊ |
# This is an H1 #␊ |
␊ |
## This is an H2 ##␊ |
␊ |
### This is an H3 ######␊ |
␊ |
␊ |
␊ |
␊ |
Blockquotes␊ |
-----------␊ |
␊ |
Markdown uses email-style `>` characters for blockquoting. If you're␊ |
familiar with quoting passages of text in an email message, then you␊ |
know how to create a blockquote in Markdown. It looks best if you hard␊ |
wrap the text and put a `>` before every line:␊ |
␊ |
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,␊ |
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.␊ |
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.␊ |
> ␊ |
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse␊ |
> id sem consectetuer libero luctus adipiscing.␊ |
␊ |
Markdown allows you to be lazy and only put the `>` before the first␊ |
line of a hard-wrapped paragraph:␊ |
␊ |
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,␊ |
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.␊ |
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.␊ |
␊ |
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse␊ |
id sem consectetuer libero luctus adipiscing.␊ |
␊ |
Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by␊ |
adding additional levels of `>`:␊ |
␊ |
> This is the first level of quoting.␊ |
>␊ |
> > This is nested blockquote.␊ |
>␊ |
> Back to the first level.␊ |
␊ |
Blockquotes can contain other Markdown elements, including headers, lists,␊ |
and code blocks:␊ |
␊ |
␉> ## This is a header.␊ |
␉> ␊ |
␉> 1. This is the first list item.␊ |
␉> 2. This is the second list item.␊ |
␉> ␊ |
␉> Here's some example code:␊ |
␉> ␊ |
␉> return shell_exec("echo $input | $markdown_script");␊ |
␊ |
Any decent text editor should make email-style quoting easy. For␊ |
example, with BBEdit, you can make a selection and choose Increase␊ |
Quote Level from the Text menu.␊ |
␊ |
␊ |
␊ |
␊ |
Lists␊ |
-----␊ |
␊ |
Markdown supports ordered (numbered) and unordered (bulleted) lists.␊ |
␊ |
Unordered lists use asterisks, pluses, and hyphens -- interchangably␊ |
-- as list markers:␊ |
␊ |
* Red␊ |
* Green␊ |
* Blue␊ |
␊ |
is equivalent to:␊ |
␊ |
+ Red␊ |
+ Green␊ |
+ Blue␊ |
␊ |
and:␊ |
␊ |
- Red␊ |
- Green␊ |
- Blue␊ |
␊ |
Ordered lists use numbers followed by periods:␊ |
␊ |
1. Bird␊ |
2. McHale␊ |
3. Parish␊ |
␊ |
It's important to note that the actual numbers you use to mark the␊ |
list have no effect on the HTML output Markdown produces. The HTML␊ |
Markdown produces from the above list is:␊ |
␊ |
<ol>␊ |
<li>Bird</li>␊ |
<li>McHale</li>␊ |
<li>Parish</li>␊ |
</ol>␊ |
␊ |
If you instead wrote the list in Markdown like this:␊ |
␊ |
1. Bird␊ |
1. McHale␊ |
1. Parish␊ |
␊ |
or even:␊ |
␊ |
3. Bird␊ |
1. McHale␊ |
8. Parish␊ |
␊ |
you'd get the exact same HTML output. The point is, if you want to,␊ |
you can use ordinal numbers in your ordered Markdown lists, so that␊ |
the numbers in your source match the numbers in your published HTML.␊ |
But if you want to be lazy, you don't have to.␊ |
␊ |
If you do use lazy list numbering, however, you should still start the␊ |
list with the number 1. At some point in the future, Markdown may support␊ |
starting ordered lists at an arbitrary number.␊ |
␊ |
List markers typically start at the left margin, but may be indented by␊ |
up to three spaces. List markers must be followed by one or more spaces␊ |
or a tab.␊ |
␊ |
To make lists look nice, you can wrap items with hanging indents:␊ |
␊ |
* Lorem ipsum dolor sit amet, consectetuer adipiscing elit.␊ |
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,␊ |
viverra nec, fringilla in, laoreet vitae, risus.␊ |
* Donec sit amet nisl. Aliquam semper ipsum sit amet velit.␊ |
Suspendisse id sem consectetuer libero luctus adipiscing.␊ |
␊ |
But if you want to be lazy, you don't have to:␊ |
␊ |
* Lorem ipsum dolor sit amet, consectetuer adipiscing elit.␊ |
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,␊ |
viverra nec, fringilla in, laoreet vitae, risus.␊ |
* Donec sit amet nisl. Aliquam semper ipsum sit amet velit.␊ |
Suspendisse id sem consectetuer libero luctus adipiscing.␊ |
␊ |
If list items are separated by blank lines, Markdown will wrap the␊ |
items in `<p>` tags in the HTML output. For example, this input:␊ |
␊ |
* Bird␊ |
* Magic␊ |
␊ |
will turn into:␊ |
␊ |
<ul>␊ |
<li>Bird</li>␊ |
<li>Magic</li>␊ |
</ul>␊ |
␊ |
But this:␊ |
␊ |
* Bird␊ |
␊ |
* Magic␊ |
␊ |
will turn into:␊ |
␊ |
<ul>␊ |
<li><p>Bird</p></li>␊ |
<li><p>Magic</p></li>␊ |
</ul>␊ |
␊ |
List items may consist of multiple paragraphs. Each subsequent␊ |
paragraph in a list item must be indented by either 4 spaces␊ |
or one tab:␊ |
␊ |
1. This is a list item with two paragraphs. Lorem ipsum dolor␊ |
sit amet, consectetuer adipiscing elit. Aliquam hendrerit␊ |
mi posuere lectus.␊ |
␊ |
Vestibulum enim wisi, viverra nec, fringilla in, laoreet␊ |
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum␊ |
sit amet velit.␊ |
␊ |
2. Suspendisse id sem consectetuer libero luctus adipiscing.␊ |
␊ |
It looks nice if you indent every line of the subsequent␊ |
paragraphs, but here again, Markdown will allow you to be␊ |
lazy:␊ |
␊ |
* This is a list item with two paragraphs.␊ |
␊ |
This is the second paragraph in the list item. You're␊ |
only required to indent the first line. Lorem ipsum dolor␊ |
sit amet, consectetuer adipiscing elit.␊ |
␊ |
* Another item in the same list.␊ |
␊ |
To put a blockquote within a list item, the blockquote's `>`␊ |
delimiters need to be indented:␊ |
␊ |
* A list item with a blockquote:␊ |
␊ |
> This is a blockquote␊ |
> inside a list item.␊ |
␊ |
To put a code block within a list item, the code block needs␊ |
to be indented *twice* -- 8 spaces or two tabs:␊ |
␊ |
* A list item with a code block:␊ |
␊ |
<code goes here>␊ |
␊ |
␊ |
It's worth noting that it's possible to trigger an ordered list by␊ |
accident, by writing something like this:␊ |
␊ |
1986. What a great season.␊ |
␊ |
In other words, a *number-period-space* sequence at the beginning of a␊ |
line. To avoid this, you can backslash-escape the period:␊ |
␊ |
1986\. What a great season.␊ |
␊ |
␊ |
␊ |
␊ |
Code Blocks␊ |
-----------␊ |
␊ |
Pre-formatted code blocks are used for writing about programming or␊ |
markup source code. Rather than forming normal paragraphs, the lines␊ |
of a code block are interpreted literally. Markdown wraps a code block␊ |
in both `<pre>` and `<code>` tags.␊ |
␊ |
To produce a code block in Markdown, simply indent every line of the␊ |
block by at least 4 spaces or 1 tab. For example, given this input:␊ |
␊ |
This is a normal paragraph:␊ |
␊ |
This is a code block.␊ |
␊ |
Markdown will generate:␊ |
␊ |
<p>This is a normal paragraph:</p>␊ |
␊ |
<pre><code>This is a code block.␊ |
</code></pre>␊ |
␊ |
One level of indentation -- 4 spaces or 1 tab -- is removed from each␊ |
line of the code block. For example, this:␊ |
␊ |
Here is an example of AppleScript:␊ |
␊ |
tell application "Foo"␊ |
beep␊ |
end tell␊ |
␊ |
will turn into:␊ |
␊ |
<p>Here is an example of AppleScript:</p>␊ |
␊ |
<pre><code>tell application "Foo"␊ |
beep␊ |
end tell␊ |
</code></pre>␊ |
␊ |
A code block continues until it reaches a line that is not indented␊ |
(or the end of the article).␊ |
␊ |
Within a code block, ampersands (`&`) and angle brackets (`<` and `>`)␊ |
are automatically converted into HTML entities. This makes it very␊ |
easy to include example HTML source code using Markdown -- just paste␊ |
it and indent it, and Markdown will handle the hassle of encoding the␊ |
ampersands and angle brackets. For example, this:␊ |
␊ |
<div class="footer">␊ |
© 2004 Foo Corporation␊ |
</div>␊ |
␊ |
will turn into:␊ |
␊ |
<pre><code><div class="footer">␊ |
&copy; 2004 Foo Corporation␊ |
</div>␊ |
</code></pre>␊ |
␊ |
Regular Markdown syntax is not processed within code blocks. E.g.,␊ |
asterisks are just literal asterisks within a code block. This means␊ |
it's also easy to use Markdown to write about Markdown's own syntax.␊ |
␊ |
␊ |
␊ |
␊ |
Span Elements␊ |
=============␊ |
␊ |
␊ |
Links␊ |
-----␊ |
␊ |
Markdown supports two style of links: *inline* and *reference*.␊ |
␊ |
In both styles, the link text is delimited by [square brackets].␊ |
␊ |
To create an inline link, use a set of regular parentheses immediately␊ |
after the link text's closing square bracket. Inside the parentheses,␊ |
put the URL where you want the link to point, along with an *optional*␊ |
title for the link, surrounded in quotes. For example:␊ |
␊ |
This is [an example](http://example.com/ "Title") inline link.␊ |
␊ |
[This link](http://example.net/) has no title attribute.␊ |
␊ |
Will produce:␊ |
␊ |
<p>This is <a href="http://example.com/" title="Title">␊ |
an example</a> inline link.</p>␊ |
␊ |
<p><a href="http://example.net/">This link</a> has no␊ |
title attribute.</p>␊ |
␊ |
If you're referring to a local resource on the same server, you can␊ |
use relative paths:␊ |
␊ |
See my [About](/about/) page for details. ␊ |
␊ |
Reference-style links use a second set of square brackets, inside␊ |
which you place a label of your choosing to identify the link:␊ |
␊ |
This is [an example][id] reference-style link.␊ |
␊ |
You can optionally use a space to separate the sets of brackets:␊ |
␊ |
This is [an example] [id] reference-style link.␊ |
␊ |
Then, anywhere in the document, you define your link label like this,␊ |
on a line by itself:␊ |
␊ |
[id]: http://example.com/ "Optional Title Here"␊ |
␊ |
That is:␊ |
␊ |
* Square brackets containing the link identifier (optionally␊ |
indented from the left margin using up to three spaces);␊ |
* followed by a colon;␊ |
* followed by one or more spaces (or tabs);␊ |
* followed by the URL for the link;␊ |
* optionally followed by a title attribute for the link, enclosed␊ |
in double or single quotes, or enclosed in parentheses.␊ |
␊ |
The following three link definitions are equivalent:␊ |
␊ |
␉[foo]: http://example.com/ "Optional Title Here"␊ |
␉[foo]: http://example.com/ 'Optional Title Here'␊ |
␉[foo]: http://example.com/ (Optional Title Here)␊ |
␊ |
**Note:** There is a known bug in Markdown.pl 1.0.1 which prevents␊ |
single quotes from being used to delimit link titles.␊ |
␊ |
The link URL may, optionally, be surrounded by angle brackets:␊ |
␊ |
[id]: <http://example.com/> "Optional Title Here"␊ |
␊ |
You can put the title attribute on the next line and use extra spaces␊ |
or tabs for padding, which tends to look better with longer URLs:␊ |
␊ |
[id]: http://example.com/longish/path/to/resource/here␊ |
"Optional Title Here"␊ |
␊ |
Link definitions are only used for creating links during Markdown␊ |
processing, and are stripped from your document in the HTML output.␊ |
␊ |
Link definition names may consist of letters, numbers, spaces, and␊ |
punctuation -- but they are *not* case sensitive. E.g. these two␊ |
links:␊ |
␊ |
␉[link text][a]␊ |
␉[link text][A]␊ |
␊ |
are equivalent.␊ |
␊ |
The *implicit link name* shortcut allows you to omit the name of the␊ |
link, in which case the link text itself is used as the name.␊ |
Just use an empty set of square brackets -- e.g., to link the word␊ |
"Google" to the google.com web site, you could simply write:␊ |
␊ |
␉[Google][]␊ |
␊ |
And then define the link:␊ |
␊ |
␉[Google]: http://google.com/␊ |
␊ |
Because link names may contain spaces, this shortcut even works for␊ |
multiple words in the link text:␊ |
␊ |
␉Visit [Daring Fireball][] for more information.␊ |
␊ |
And then define the link:␊ |
␉␊ |
␉[Daring Fireball]: http://daringfireball.net/␊ |
␊ |
Link definitions can be placed anywhere in your Markdown document. I␊ |
tend to put them immediately after each paragraph in which they're␊ |
used, but if you want, you can put them all at the end of your␊ |
document, sort of like footnotes.␊ |
␊ |
Here's an example of reference links in action:␊ |
␊ |
I get 10 times more traffic from [Google] [1] than from␊ |
[Yahoo] [2] or [MSN] [3].␊ |
␊ |
[1]: http://google.com/ "Google"␊ |
[2]: http://search.yahoo.com/ "Yahoo Search"␊ |
␊ |
␊ |
␊ |
Emphasis␊ |
--------␊ |
␊ |
Markdown treats asterisks (`*`) and underscores (`_`) as indicators of␊ |
emphasis. Text wrapped with one `*` or `_` will be wrapped with an␊ |
HTML `<em>` tag; double `*`'s or `_`'s will be wrapped with an HTML␊ |
`<strong>` tag. E.g., this input:␊ |
␊ |
*single asterisks*␊ |
␊ |
_single underscores_␊ |
␊ |
**double asterisks**␊ |
␊ |
__double underscores__␊ |
␊ |
will produce:␊ |
␊ |
<em>single asterisks</em>␊ |
␊ |
<em>single underscores</em>␊ |
␊ |
<strong>double asterisks</strong>␊ |
␊ |
<strong>double underscores</strong>␊ |
␊ |
You can use whichever style you prefer; the lone restriction is that␊ |
the same character must be used to open and close an emphasis span.␊ |
␊ |
Emphasis can be used in the middle of a word:␊ |
␊ |
un*frigging*believable␊ |
␊ |
But if you surround an `*` or `_` with spaces, it'll be treated as a␊ |
literal asterisk or underscore.␊ |
␊ |
To produce a literal asterisk or underscore at a position where it␊ |
would otherwise be used as an emphasis delimiter, you can backslash␊ |
escape it:␊ |
␊ |
\*this text is surrounded by literal asterisks\*␊ |
␊ |
␊ |
␊ |
␊ |
Code␊ |
----␊ |
␊ |
To indicate a span of code, wrap it with backtick quotes (`` ` ``).␊ |
Unlike a pre-formatted code block, a code span indicates code within a␊ |
normal paragraph. For example:␊ |
␊ |
Use the `printf()` function.␊ |
␊ |
will produce:␊ |
␊ |
<p>Use the <code>printf()</code> function.</p>␊ |
␊ |
To include a literal backtick character within a code span, you can use␊ |
multiple backticks as the opening and closing delimiters:␊ |
␊ |
``There is a literal backtick (`) here.``␊ |
␊ |
which will produce this:␊ |
␊ |
<p><code>There is a literal backtick (`) here.</code></p>␊ |
␊ |
The backtick delimiters surrounding a code span may include spaces --␊ |
one after the opening, one before the closing. This allows you to place␊ |
literal backtick characters at the beginning or end of a code span:␊ |
␊ |
␉A single backtick in a code span: `` ` ``␊ |
␉␊ |
␉A backtick-delimited string in a code span: `` `foo` ``␊ |
␊ |
will produce:␊ |
␊ |
␉<p>A single backtick in a code span: <code>`</code></p>␊ |
␉␊ |
␉<p>A backtick-delimited string in a code span: <code>`foo`</code></p>␊ |
␊ |
With a code span, ampersands and angle brackets are encoded as HTML␊ |
entities automatically, which makes it easy to include example HTML␊ |
tags. Markdown will turn this:␊ |
␊ |
Please don't use any `<blink>` tags.␊ |
␊ |
into:␊ |
␊ |
<p>Please don't use any <code><blink></code> tags.</p>␊ |
␊ |
You can write this:␊ |
␊ |
`—` is the decimal-encoded equivalent of `—`.␊ |
␊ |
to produce:␊ |
␊ |
<p><code>&#8212;</code> is the decimal-encoded␊ |
equivalent of <code>&mdash;</code>.</p>␊ |
␊ |