OLD | NEW |
| (Empty) |
1 Markdown: Syntax | |
2 ================ | |
3 | |
4 <ul id="ProjectSubmenu"> | |
5 <li><a href="/projects/markdown/" title="Markdown Project Page">Main</a></li
> | |
6 <li><a href="/projects/markdown/basics" title="Markdown Basics">Basics</a></
li> | |
7 <li><a class="selected" title="Markdown Syntax Documentation">Syntax</a></li
> | |
8 <li><a href="/projects/markdown/license" title="Pricing and License Informat
ion">License</a></li> | |
9 <li><a href="/projects/markdown/dingus" title="Online Markdown Web Form">Din
gus</a></li> | |
10 </ul> | |
11 | |
12 | |
13 * [Overview](#overview) | |
14 * [Philosophy](#philosophy) | |
15 * [Inline HTML](#html) | |
16 * [Automatic Escaping for Special Characters](#autoescape) | |
17 * [Block Elements](#block) | |
18 * [Paragraphs and Line Breaks](#p) | |
19 * [Headers](#header) | |
20 * [Blockquotes](#blockquote) | |
21 * [Lists](#list) | |
22 * [Code Blocks](#precode) | |
23 * [Horizontal Rules](#hr) | |
24 * [Span Elements](#span) | |
25 * [Links](#link) | |
26 * [Emphasis](#em) | |
27 * [Code](#code) | |
28 * [Images](#img) | |
29 * [Miscellaneous](#misc) | |
30 * [Backslash Escapes](#backslash) | |
31 * [Automatic Links](#autolink) | |
32 | |
33 | |
34 **Note:** This document is itself written using Markdown; you | |
35 can [see the source for it by adding '.text' to the URL][src]. | |
36 | |
37 [src]: /projects/markdown/syntax.text | |
38 | |
39 * * * | |
40 | |
41 <h2 id="overview">Overview</h2> | |
42 | |
43 <h3 id="philosophy">Philosophy</h3> | |
44 | |
45 Markdown is intended to be as easy-to-read and easy-to-write as is feasible. | |
46 | |
47 Readability, however, is emphasized above all else. A Markdown-formatted | |
48 document should be publishable as-is, as plain text, without looking | |
49 like it's been marked up with tags or formatting instructions. While | |
50 Markdown's syntax has been influenced by several existing text-to-HTML | |
51 filters -- including [Setext] [1], [atx] [2], [Textile] [3], [reStructuredText]
[4], | |
52 [Grutatext] [5], and [EtText] [6] -- the single biggest source of | |
53 inspiration for Markdown's syntax is the format of plain text email. | |
54 | |
55 [1]: http://docutils.sourceforge.net/mirror/setext.html | |
56 [2]: http://www.aaronsw.com/2002/atx/ | |
57 [3]: http://textism.com/tools/textile/ | |
58 [4]: http://docutils.sourceforge.net/rst.html | |
59 [5]: http://www.triptico.com/software/grutatxt.html | |
60 [6]: http://ettext.taint.org/doc/ | |
61 | |
62 To this end, Markdown's syntax is comprised entirely of punctuation | |
63 characters, which punctuation characters have been carefully chosen so | |
64 as to look like what they mean. E.g., asterisks around a word actually | |
65 look like \*emphasis\*. Markdown lists look like, well, lists. Even | |
66 blockquotes look like quoted passages of text, assuming you've ever | |
67 used email. | |
68 | |
69 | |
70 | |
71 <h3 id="html">Inline HTML</h3> | |
72 | |
73 Markdown's syntax is intended for one purpose: to be used as a | |
74 format for *writing* for the web. | |
75 | |
76 Markdown is not a replacement for HTML, or even close to it. Its | |
77 syntax is very small, corresponding only to a very small subset of | |
78 HTML tags. The idea is *not* to create a syntax that makes it easier | |
79 to insert HTML tags. In my opinion, HTML tags are already easy to | |
80 insert. The idea for Markdown is to make it easy to read, write, and | |
81 edit prose. HTML is a *publishing* format; Markdown is a *writing* | |
82 format. Thus, Markdown's formatting syntax only addresses issues that | |
83 can be conveyed in plain text. | |
84 | |
85 For any markup that is not covered by Markdown's syntax, you simply | |
86 use HTML itself. There's no need to preface it or delimit it to | |
87 indicate that you're switching from Markdown to HTML; you just use | |
88 the tags. | |
89 | |
90 The only restrictions are that block-level HTML elements -- e.g. `<div>`, | |
91 `<table>`, `<pre>`, `<p>`, etc. -- must be separated from surrounding | |
92 content by blank lines, and the start and end tags of the block should | |
93 not be indented with tabs or spaces. Markdown is smart enough not | |
94 to add extra (unwanted) `<p>` tags around HTML block-level tags. | |
95 | |
96 For example, to add an HTML table to a Markdown article: | |
97 | |
98 This is a regular paragraph. | |
99 | |
100 <table> | |
101 <tr> | |
102 <td>Foo</td> | |
103 </tr> | |
104 </table> | |
105 | |
106 This is another regular paragraph. | |
107 | |
108 Note that Markdown formatting syntax is not processed within block-level | |
109 HTML tags. E.g., you can't use Markdown-style `*emphasis*` inside an | |
110 HTML block. | |
111 | |
112 Span-level HTML tags -- e.g. `<span>`, `<cite>`, or `<del>` -- can be | |
113 used anywhere in a Markdown paragraph, list item, or header. If you | |
114 want, you can even use HTML tags instead of Markdown formatting; e.g. if | |
115 you'd prefer to use HTML `<a>` or `<img>` tags instead of Markdown's | |
116 link or image syntax, go right ahead. | |
117 | |
118 Unlike block-level HTML tags, Markdown syntax *is* processed within | |
119 span-level tags. | |
120 | |
121 | |
122 <h3 id="autoescape">Automatic Escaping for Special Characters</h3> | |
123 | |
124 In HTML, there are two characters that demand special treatment: `<` | |
125 and `&`. Left angle brackets are used to start tags; ampersands are | |
126 used to denote HTML entities. If you want to use them as literal | |
127 characters, you must escape them as entities, e.g. `<`, and | |
128 `&`. | |
129 | |
130 Ampersands in particular are bedeviling for web writers. If you want to | |
131 write about 'AT&T', you need to write '`AT&T`'. You even need to | |
132 escape ampersands within URLs. Thus, if you want to link to: | |
133 | |
134 http://images.google.com/images?num=30&q=larry+bird | |
135 | |
136 you need to encode the URL as: | |
137 | |
138 http://images.google.com/images?num=30&q=larry+bird | |
139 | |
140 in your anchor tag `href` attribute. Needless to say, this is easy to | |
141 forget, and is probably the single most common source of HTML validation | |
142 errors in otherwise well-marked-up web sites. | |
143 | |
144 Markdown allows you to use these characters naturally, taking care of | |
145 all the necessary escaping for you. If you use an ampersand as part of | |
146 an HTML entity, it remains unchanged; otherwise it will be translated | |
147 into `&`. | |
148 | |
149 So, if you want to include a copyright symbol in your article, you can write: | |
150 | |
151 © | |
152 | |
153 and Markdown will leave it alone. But if you write: | |
154 | |
155 AT&T | |
156 | |
157 Markdown will translate it to: | |
158 | |
159 AT&T | |
160 | |
161 Similarly, because Markdown supports [inline HTML](#html), if you use | |
162 angle brackets as delimiters for HTML tags, Markdown will treat them as | |
163 such. But if you write: | |
164 | |
165 4 < 5 | |
166 | |
167 Markdown will translate it to: | |
168 | |
169 4 < 5 | |
170 | |
171 However, inside Markdown code spans and blocks, angle brackets and | |
172 ampersands are *always* encoded automatically. This makes it easy to use | |
173 Markdown to write about HTML code. (As opposed to raw HTML, which is a | |
174 terrible format for writing about HTML syntax, because every single `<` | |
175 and `&` in your example code needs to be escaped.) | |
176 | |
177 | |
178 * * * | |
179 | |
180 | |
181 <h2 id="block">Block Elements</h2> | |
182 | |
183 | |
184 <h3 id="p">Paragraphs and Line Breaks</h3> | |
185 | |
186 A paragraph is simply one or more consecutive lines of text, separated | |
187 by one or more blank lines. (A blank line is any line that looks like a | |
188 blank line -- a line containing nothing but spaces or tabs is considered | |
189 blank.) Normal paragraphs should not be intended with spaces or tabs. | |
190 | |
191 The implication of the "one or more consecutive lines of text" rule is | |
192 that Markdown supports "hard-wrapped" text paragraphs. This differs | |
193 significantly from most other text-to-HTML formatters (including Movable | |
194 Type's "Convert Line Breaks" option) which translate every line break | |
195 character in a paragraph into a `<br />` tag. | |
196 | |
197 When you *do* want to insert a `<br />` break tag using Markdown, you | |
198 end a line with two or more spaces, then type return. | |
199 | |
200 Yes, this takes a tad more effort to create a `<br />`, but a simplistic | |
201 "every line break is a `<br />`" rule wouldn't work for Markdown. | |
202 Markdown's email-style [blockquoting][bq] and multi-paragraph [list items][l] | |
203 work best -- and look better -- when you format them with hard breaks. | |
204 | |
205 [bq]: #blockquote | |
206 [l]: #list | |
207 | |
208 | |
209 | |
210 <h3 id="header">Headers</h3> | |
211 | |
212 Markdown supports two styles of headers, [Setext] [1] and [atx] [2]. | |
213 | |
214 Setext-style headers are "underlined" using equal signs (for first-level | |
215 headers) and dashes (for second-level headers). For example: | |
216 | |
217 This is an H1 | |
218 ============= | |
219 | |
220 This is an H2 | |
221 ------------- | |
222 | |
223 Any number of underlining `=`'s or `-`'s will work. | |
224 | |
225 Atx-style headers use 1-6 hash characters at the start of the line, | |
226 corresponding to header levels 1-6. For example: | |
227 | |
228 # This is an H1 | |
229 | |
230 ## This is an H2 | |
231 | |
232 ###### This is an H6 | |
233 | |
234 Optionally, you may "close" atx-style headers. This is purely | |
235 cosmetic -- you can use this if you think it looks better. The | |
236 closing hashes don't even need to match the number of hashes | |
237 used to open the header. (The number of opening hashes | |
238 determines the header level.) : | |
239 | |
240 # This is an H1 # | |
241 | |
242 ## This is an H2 ## | |
243 | |
244 ### This is an H3 ###### | |
245 | |
246 | |
247 <h3 id="blockquote">Blockquotes</h3> | |
248 | |
249 Markdown uses email-style `>` characters for blockquoting. If you're | |
250 familiar with quoting passages of text in an email message, then you | |
251 know how to create a blockquote in Markdown. It looks best if you hard | |
252 wrap the text and put a `>` before every line: | |
253 | |
254 > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, | |
255 > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. | |
256 > Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. | |
257 > | |
258 > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse | |
259 > id sem consectetuer libero luctus adipiscing. | |
260 | |
261 Markdown allows you to be lazy and only put the `>` before the first | |
262 line of a hard-wrapped paragraph: | |
263 | |
264 > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, | |
265 consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. | |
266 Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. | |
267 | |
268 > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse | |
269 id sem consectetuer libero luctus adipiscing. | |
270 | |
271 Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by | |
272 adding additional levels of `>`: | |
273 | |
274 > This is the first level of quoting. | |
275 > | |
276 > > This is nested blockquote. | |
277 > | |
278 > Back to the first level. | |
279 | |
280 Blockquotes can contain other Markdown elements, including headers, lists, | |
281 and code blocks: | |
282 | |
283 > ## This is a header. | |
284 > | |
285 > 1. This is the first list item. | |
286 > 2. This is the second list item. | |
287 > | |
288 > Here's some example code: | |
289 > | |
290 > return shell_exec("echo $input | $markdown_script"); | |
291 | |
292 Any decent text editor should make email-style quoting easy. For | |
293 example, with BBEdit, you can make a selection and choose Increase | |
294 Quote Level from the Text menu. | |
295 | |
296 | |
297 <h3 id="list">Lists</h3> | |
298 | |
299 Markdown supports ordered (numbered) and unordered (bulleted) lists. | |
300 | |
301 Unordered lists use asterisks, pluses, and hyphens -- interchangably | |
302 -- as list markers: | |
303 | |
304 * Red | |
305 * Green | |
306 * Blue | |
307 | |
308 is equivalent to: | |
309 | |
310 + Red | |
311 + Green | |
312 + Blue | |
313 | |
314 and: | |
315 | |
316 - Red | |
317 - Green | |
318 - Blue | |
319 | |
320 Ordered lists use numbers followed by periods: | |
321 | |
322 1. Bird | |
323 2. McHale | |
324 3. Parish | |
325 | |
326 It's important to note that the actual numbers you use to mark the | |
327 list have no effect on the HTML output Markdown produces. The HTML | |
328 Markdown produces from the above list is: | |
329 | |
330 <ol> | |
331 <li>Bird</li> | |
332 <li>McHale</li> | |
333 <li>Parish</li> | |
334 </ol> | |
335 | |
336 If you instead wrote the list in Markdown like this: | |
337 | |
338 1. Bird | |
339 1. McHale | |
340 1. Parish | |
341 | |
342 or even: | |
343 | |
344 3. Bird | |
345 1. McHale | |
346 8. Parish | |
347 | |
348 you'd get the exact same HTML output. The point is, if you want to, | |
349 you can use ordinal numbers in your ordered Markdown lists, so that | |
350 the numbers in your source match the numbers in your published HTML. | |
351 But if you want to be lazy, you don't have to. | |
352 | |
353 If you do use lazy list numbering, however, you should still start the | |
354 list with the number 1. At some point in the future, Markdown may support | |
355 starting ordered lists at an arbitrary number. | |
356 | |
357 List markers typically start at the left margin, but may be indented by | |
358 up to three spaces. List markers must be followed by one or more spaces | |
359 or a tab. | |
360 | |
361 To make lists look nice, you can wrap items with hanging indents: | |
362 | |
363 * Lorem ipsum dolor sit amet, consectetuer adipiscing elit. | |
364 Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, | |
365 viverra nec, fringilla in, laoreet vitae, risus. | |
366 * Donec sit amet nisl. Aliquam semper ipsum sit amet velit. | |
367 Suspendisse id sem consectetuer libero luctus adipiscing. | |
368 | |
369 But if you want to be lazy, you don't have to: | |
370 | |
371 * Lorem ipsum dolor sit amet, consectetuer adipiscing elit. | |
372 Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, | |
373 viverra nec, fringilla in, laoreet vitae, risus. | |
374 * Donec sit amet nisl. Aliquam semper ipsum sit amet velit. | |
375 Suspendisse id sem consectetuer libero luctus adipiscing. | |
376 | |
377 If list items are separated by blank lines, Markdown will wrap the | |
378 items in `<p>` tags in the HTML output. For example, this input: | |
379 | |
380 * Bird | |
381 * Magic | |
382 | |
383 will turn into: | |
384 | |
385 <ul> | |
386 <li>Bird</li> | |
387 <li>Magic</li> | |
388 </ul> | |
389 | |
390 But this: | |
391 | |
392 * Bird | |
393 | |
394 * Magic | |
395 | |
396 will turn into: | |
397 | |
398 <ul> | |
399 <li><p>Bird</p></li> | |
400 <li><p>Magic</p></li> | |
401 </ul> | |
402 | |
403 List items may consist of multiple paragraphs. Each subsequent | |
404 paragraph in a list item must be intended by either 4 spaces | |
405 or one tab: | |
406 | |
407 1. This is a list item with two paragraphs. Lorem ipsum dolor | |
408 sit amet, consectetuer adipiscing elit. Aliquam hendrerit | |
409 mi posuere lectus. | |
410 | |
411 Vestibulum enim wisi, viverra nec, fringilla in, laoreet | |
412 vitae, risus. Donec sit amet nisl. Aliquam semper ipsum | |
413 sit amet velit. | |
414 | |
415 2. Suspendisse id sem consectetuer libero luctus adipiscing. | |
416 | |
417 It looks nice if you indent every line of the subsequent | |
418 paragraphs, but here again, Markdown will allow you to be | |
419 lazy: | |
420 | |
421 * This is a list item with two paragraphs. | |
422 | |
423 This is the second paragraph in the list item. You're | |
424 only required to indent the first line. Lorem ipsum dolor | |
425 sit amet, consectetuer adipiscing elit. | |
426 | |
427 * Another item in the same list. | |
428 | |
429 To put a blockquote within a list item, the blockquote's `>` | |
430 delimiters need to be indented: | |
431 | |
432 * A list item with a blockquote: | |
433 | |
434 > This is a blockquote | |
435 > inside a list item. | |
436 | |
437 To put a code block within a list item, the code block needs | |
438 to be indented *twice* -- 8 spaces or two tabs: | |
439 | |
440 * A list item with a code block: | |
441 | |
442 <code goes here> | |
443 | |
444 | |
445 It's worth noting that it's possible to trigger an ordered list by | |
446 accident, by writing something like this: | |
447 | |
448 1986. What a great season. | |
449 | |
450 In other words, a *number-period-space* sequence at the beginning of a | |
451 line. To avoid this, you can backslash-escape the period: | |
452 | |
453 1986\. What a great season. | |
454 | |
455 | |
456 | |
457 <h3 id="precode">Code Blocks</h3> | |
458 | |
459 Pre-formatted code blocks are used for writing about programming or | |
460 markup source code. Rather than forming normal paragraphs, the lines | |
461 of a code block are interpreted literally. Markdown wraps a code block | |
462 in both `<pre>` and `<code>` tags. | |
463 | |
464 To produce a code block in Markdown, simply indent every line of the | |
465 block by at least 4 spaces or 1 tab. For example, given this input: | |
466 | |
467 This is a normal paragraph: | |
468 | |
469 This is a code block. | |
470 | |
471 Markdown will generate: | |
472 | |
473 <p>This is a normal paragraph:</p> | |
474 | |
475 <pre><code>This is a code block. | |
476 </code></pre> | |
477 | |
478 One level of indentation -- 4 spaces or 1 tab -- is removed from each | |
479 line of the code block. For example, this: | |
480 | |
481 Here is an example of AppleScript: | |
482 | |
483 tell application "Foo" | |
484 beep | |
485 end tell | |
486 | |
487 will turn into: | |
488 | |
489 <p>Here is an example of AppleScript:</p> | |
490 | |
491 <pre><code>tell application "Foo" | |
492 beep | |
493 end tell | |
494 </code></pre> | |
495 | |
496 A code block continues until it reaches a line that is not indented | |
497 (or the end of the article). | |
498 | |
499 Within a code block, ampersands (`&`) and angle brackets (`<` and `>`) | |
500 are automatically converted into HTML entities. This makes it very | |
501 easy to include example HTML source code using Markdown -- just paste | |
502 it and indent it, and Markdown will handle the hassle of encoding the | |
503 ampersands and angle brackets. For example, this: | |
504 | |
505 <div class="footer"> | |
506 © 2004 Foo Corporation | |
507 </div> | |
508 | |
509 will turn into: | |
510 | |
511 <pre><code><div class="footer"> | |
512 &copy; 2004 Foo Corporation | |
513 </div> | |
514 </code></pre> | |
515 | |
516 Regular Markdown syntax is not processed within code blocks. E.g., | |
517 asterisks are just literal asterisks within a code block. This means | |
518 it's also easy to use Markdown to write about Markdown's own syntax. | |
519 | |
520 | |
521 | |
522 <h3 id="hr">Horizontal Rules</h3> | |
523 | |
524 You can produce a horizontal rule tag (`<hr>`) by placing three or | |
525 more hyphens, asterisks, or underscores on a line by themselves. If you | |
526 wish, you may use spaces between the hyphens or asterisks. Each of the | |
527 following lines will produce a horizontal rule: | |
528 | |
529 * * * | |
530 | |
531 *** | |
532 | |
533 ***** | |
534 | |
535 - - - | |
536 | |
537 --------------------------------------- | |
538 | |
539 _ _ _ | |
540 | |
541 | |
542 * * * | |
543 | |
544 <h2 id="span">Span Elements</h2> | |
545 | |
546 <h3 id="link">Links</h3> | |
547 | |
548 Markdown supports two style of links: *inline* and *reference*. | |
549 | |
550 In both styles, the link text is delimited by [square brackets]. | |
551 | |
552 To create an inline link, use a set of regular parentheses immediately | |
553 after the link text's closing square bracket. Inside the parentheses, | |
554 put the URL where you want the link to point, along with an *optional* | |
555 title for the link, surrounded in quotes. For example: | |
556 | |
557 This is [an example](http://example.com/ "Title") inline link. | |
558 | |
559 [This link](http://example.net/) has no title attribute. | |
560 | |
561 Will produce: | |
562 | |
563 <p>This is <a href="http://example.com/" title="Title"> | |
564 an example</a> inline link.</p> | |
565 | |
566 <p><a href="http://example.net/">This link</a> has no | |
567 title attribute.</p> | |
568 | |
569 If you're referring to a local resource on the same server, you can | |
570 use relative paths: | |
571 | |
572 See my [About](/about/) page for details. | |
573 | |
574 Reference-style links use a second set of square brackets, inside | |
575 which you place a label of your choosing to identify the link: | |
576 | |
577 This is [an example][id] reference-style link. | |
578 | |
579 You can optionally use a space to separate the sets of brackets: | |
580 | |
581 This is [an example] [id] reference-style link. | |
582 | |
583 Then, anywhere in the document, you define your link label like this, | |
584 on a line by itself: | |
585 | |
586 [id]: http://example.com/ "Optional Title Here" | |
587 | |
588 That is: | |
589 | |
590 * Square brackets containing the link identifier (optionally | |
591 indented from the left margin using up to three spaces); | |
592 * followed by a colon; | |
593 * followed by one or more spaces (or tabs); | |
594 * followed by the URL for the link; | |
595 * optionally followed by a title attribute for the link, enclosed | |
596 in double or single quotes. | |
597 | |
598 The link URL may, optionally, be surrounded by angle brackets: | |
599 | |
600 [id]: <http://example.com/> "Optional Title Here" | |
601 | |
602 You can put the title attribute on the next line and use extra spaces | |
603 or tabs for padding, which tends to look better with longer URLs: | |
604 | |
605 [id]: http://example.com/longish/path/to/resource/here | |
606 "Optional Title Here" | |
607 | |
608 Link definitions are only used for creating links during Markdown | |
609 processing, and are stripped from your document in the HTML output. | |
610 | |
611 Link definition names may constist of letters, numbers, spaces, and punctuation
-- but they are *not* case sensitive. E.g. these two links: | |
612 | |
613 [link text][a] | |
614 [link text][A] | |
615 | |
616 are equivalent. | |
617 | |
618 The *implicit link name* shortcut allows you to omit the name of the | |
619 link, in which case the link text itself is used as the name. | |
620 Just use an empty set of square brackets -- e.g., to link the word | |
621 "Google" to the google.com web site, you could simply write: | |
622 | |
623 [Google][] | |
624 | |
625 And then define the link: | |
626 | |
627 [Google]: http://google.com/ | |
628 | |
629 Because link names may contain spaces, this shortcut even works for | |
630 multiple words in the link text: | |
631 | |
632 Visit [Daring Fireball][] for more information. | |
633 | |
634 And then define the link: | |
635 | |
636 [Daring Fireball]: http://daringfireball.net/ | |
637 | |
638 Link definitions can be placed anywhere in your Markdown document. I | |
639 tend to put them immediately after each paragraph in which they're | |
640 used, but if you want, you can put them all at the end of your | |
641 document, sort of like footnotes. | |
642 | |
643 Here's an example of reference links in action: | |
644 | |
645 I get 10 times more traffic from [Google] [1] than from | |
646 [Yahoo] [2] or [MSN] [3]. | |
647 | |
648 [1]: http://google.com/ "Google" | |
649 [2]: http://search.yahoo.com/ "Yahoo Search" | |
650 [3]: http://search.msn.com/ "MSN Search" | |
651 | |
652 Using the implicit link name shortcut, you could instead write: | |
653 | |
654 I get 10 times more traffic from [Google][] than from | |
655 [Yahoo][] or [MSN][]. | |
656 | |
657 [google]: http://google.com/ "Google" | |
658 [yahoo]: http://search.yahoo.com/ "Yahoo Search" | |
659 [msn]: http://search.msn.com/ "MSN Search" | |
660 | |
661 Both of the above examples will produce the following HTML output: | |
662 | |
663 <p>I get 10 times more traffic from <a href="http://google.com/" | |
664 title="Google">Google</a> than from | |
665 <a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a> | |
666 or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p> | |
667 | |
668 For comparison, here is the same paragraph written using | |
669 Markdown's inline link style: | |
670 | |
671 I get 10 times more traffic from [Google](http://google.com/ "Google") | |
672 than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or | |
673 [MSN](http://search.msn.com/ "MSN Search"). | |
674 | |
675 The point of reference-style links is not that they're easier to | |
676 write. The point is that with reference-style links, your document | |
677 source is vastly more readable. Compare the above examples: using | |
678 reference-style links, the paragraph itself is only 81 characters | |
679 long; with inline-style links, it's 176 characters; and as raw HTML, | |
680 it's 234 characters. In the raw HTML, there's more markup than there | |
681 is text. | |
682 | |
683 With Markdown's reference-style links, a source document much more | |
684 closely resembles the final output, as rendered in a browser. By | |
685 allowing you to move the markup-related metadata out of the paragraph, | |
686 you can add links without interrupting the narrative flow of your | |
687 prose. | |
688 | |
689 | |
690 <h3 id="em">Emphasis</h3> | |
691 | |
692 Markdown treats asterisks (`*`) and underscores (`_`) as indicators of | |
693 emphasis. Text wrapped with one `*` or `_` will be wrapped with an | |
694 HTML `<em>` tag; double `*`'s or `_`'s will be wrapped with an HTML | |
695 `<strong>` tag. E.g., this input: | |
696 | |
697 *single asterisks* | |
698 | |
699 _single underscores_ | |
700 | |
701 **double asterisks** | |
702 | |
703 __double underscores__ | |
704 | |
705 will produce: | |
706 | |
707 <em>single asterisks</em> | |
708 | |
709 <em>single underscores</em> | |
710 | |
711 <strong>double asterisks</strong> | |
712 | |
713 <strong>double underscores</strong> | |
714 | |
715 You can use whichever style you prefer; the lone restriction is that | |
716 the same character must be used to open and close an emphasis span. | |
717 | |
718 Emphasis can be used in the middle of a word: | |
719 | |
720 un*fucking*believable | |
721 | |
722 But if you surround an `*` or `_` with spaces, it'll be treated as a | |
723 literal asterisk or underscore. | |
724 | |
725 To produce a literal asterisk or underscore at a position where it | |
726 would otherwise be used as an emphasis delimiter, you can backslash | |
727 escape it: | |
728 | |
729 \*this text is surrounded by literal asterisks\* | |
730 | |
731 | |
732 | |
733 <h3 id="code">Code</h3> | |
734 | |
735 To indicate a span of code, wrap it with backtick quotes (`` ` ``). | |
736 Unlike a pre-formatted code block, a code span indicates code within a | |
737 normal paragraph. For example: | |
738 | |
739 Use the `printf()` function. | |
740 | |
741 will produce: | |
742 | |
743 <p>Use the <code>printf()</code> function.</p> | |
744 | |
745 To include a literal backtick character within a code span, you can use | |
746 multiple backticks as the opening and closing delimiters: | |
747 | |
748 ``There is a literal backtick (`) here.`` | |
749 | |
750 which will produce this: | |
751 | |
752 <p><code>There is a literal backtick (`) here.</code></p> | |
753 | |
754 The backtick delimiters surrounding a code span may include spaces -- | |
755 one after the opening, one before the closing. This allows you to place | |
756 literal backtick characters at the beginning or end of a code span: | |
757 | |
758 A single backtick in a code span: `` ` `` | |
759 | |
760 A backtick-delimited string in a code span: `` `foo` `` | |
761 | |
762 will produce: | |
763 | |
764 <p>A single backtick in a code span: <code>`</code></p> | |
765 | |
766 <p>A backtick-delimited string in a code span: <code>`foo`</code></p> | |
767 | |
768 With a code span, ampersands and angle brackets are encoded as HTML | |
769 entities automatically, which makes it easy to include example HTML | |
770 tags. Markdown will turn this: | |
771 | |
772 Please don't use any `<blink>` tags. | |
773 | |
774 into: | |
775 | |
776 <p>Please don't use any <code><blink></code> tags.</p> | |
777 | |
778 You can write this: | |
779 | |
780 `—` is the decimal-encoded equivalent of `—`. | |
781 | |
782 to produce: | |
783 | |
784 <p><code>&#8212;</code> is the decimal-encoded | |
785 equivalent of <code>&mdash;</code>.</p> | |
786 | |
787 | |
788 | |
789 <h3 id="img">Images</h3> | |
790 | |
791 Admittedly, it's fairly difficult to devise a "natural" syntax for | |
792 placing images into a plain text document format. | |
793 | |
794 Markdown uses an image syntax that is intended to resemble the syntax | |
795 for links, allowing for two styles: *inline* and *reference*. | |
796 | |
797 Inline image syntax looks like this: | |
798 | |
799  | |
800 | |
801  | |
802 | |
803 That is: | |
804 | |
805 * An exclamation mark: `!`; | |
806 * followed by a set of square brackets, containing the `alt` | |
807 attribute text for the image; | |
808 * followed by a set of parentheses, containing the URL or path to | |
809 the image, and an optional `title` attribute enclosed in double | |
810 or single quotes. | |
811 | |
812 Reference-style image syntax looks like this: | |
813 | |
814 ![Alt text][id] | |
815 | |
816 Where "id" is the name of a defined image reference. Image references | |
817 are defined using syntax identical to link references: | |
818 | |
819 [id]: url/to/image "Optional title attribute" | |
820 | |
821 As of this writing, Markdown has no syntax for specifying the | |
822 dimensions of an image; if this is important to you, you can simply | |
823 use regular HTML `<img>` tags. | |
824 | |
825 | |
826 * * * | |
827 | |
828 | |
829 <h2 id="misc">Miscellaneous</h2> | |
830 | |
831 <h3 id="autolink">Automatic Links</h3> | |
832 | |
833 Markdown supports a shortcut style for creating "automatic" links for URLs and e
mail addresses: simply surround the URL or email address with angle brackets. Wh
at this means is that if you want to show the actual text of a URL or email addr
ess, and also have it be a clickable link, you can do this: | |
834 | |
835 <http://example.com/> | |
836 | |
837 Markdown will turn this into: | |
838 | |
839 <a href="http://example.com/">http://example.com/</a> | |
840 | |
841 Automatic links for email addresses work similarly, except that | |
842 Markdown will also perform a bit of randomized decimal and hex | |
843 entity-encoding to help obscure your address from address-harvesting | |
844 spambots. For example, Markdown will turn this: | |
845 | |
846 <address@example.com> | |
847 | |
848 into something like this: | |
849 | |
850 <a href="mailto:addre | |
851 ss@example.co | |
852 m">address@exa | |
853 mple.com</a> | |
854 | |
855 which will render in a browser as a clickable link to "address@example.com". | |
856 | |
857 (This sort of entity-encoding trick will indeed fool many, if not | |
858 most, address-harvesting bots, but it definitely won't fool all of | |
859 them. It's better than nothing, but an address published in this way | |
860 will probably eventually start receiving spam.) | |
861 | |
862 | |
863 | |
864 <h3 id="backslash">Backslash Escapes</h3> | |
865 | |
866 Markdown allows you to use backslash escapes to generate literal | |
867 characters which would otherwise have special meaning in Markdown's | |
868 formatting syntax. For example, if you wanted to surround a word with | |
869 literal asterisks (instead of an HTML `<em>` tag), you can backslashes | |
870 before the asterisks, like this: | |
871 | |
872 \*literal asterisks\* | |
873 | |
874 Markdown provides backslash escapes for the following characters: | |
875 | |
876 \ backslash | |
877 ` backtick | |
878 * asterisk | |
879 _ underscore | |
880 {} curly braces | |
881 [] square brackets | |
882 () parentheses | |
883 # hash mark | |
884 + plus sign | |
885 - minus sign (hyphen) | |
886 . dot | |
887 ! exclamation mark | |
888 | |
OLD | NEW |