| OLD | NEW |
| (Empty) |
| 1 Markdown: Basics | |
| 2 ================ | |
| 3 | |
| 4 <ul id="ProjectSubmenu"> | |
| 5 <li><a href="/projects/markdown/" title="Markdown Project Page">Main</a></li
> | |
| 6 <li><a class="selected" title="Markdown Basics">Basics</a></li> | |
| 7 <li><a href="/projects/markdown/syntax" 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 Getting the Gist of Markdown's Formatting Syntax | |
| 14 ------------------------------------------------ | |
| 15 | |
| 16 This page offers a brief overview of what it's like to use Markdown. | |
| 17 The [syntax page] [s] provides complete, detailed documentation for | |
| 18 every feature, but Markdown should be very easy to pick up simply by | |
| 19 looking at a few examples of it in action. The examples on this page | |
| 20 are written in a before/after style, showing example syntax and the | |
| 21 HTML output produced by Markdown. | |
| 22 | |
| 23 It's also helpful to simply try Markdown out; the [Dingus] [d] is a | |
| 24 web application that allows you type your own Markdown-formatted text | |
| 25 and translate it to XHTML. | |
| 26 | |
| 27 **Note:** This document is itself written using Markdown; you | |
| 28 can [see the source for it by adding '.text' to the URL] [src]. | |
| 29 | |
| 30 [s]: /projects/markdown/syntax "Markdown Syntax" | |
| 31 [d]: /projects/markdown/dingus "Markdown Dingus" | |
| 32 [src]: /projects/markdown/basics.text | |
| 33 | |
| 34 | |
| 35 ## Paragraphs, Headers, Blockquotes ## | |
| 36 | |
| 37 A paragraph is simply one or more consecutive lines of text, separated | |
| 38 by one or more blank lines. (A blank line is any line that looks like a | |
| 39 blank line -- a line containing nothing spaces or tabs is considered | |
| 40 blank.) Normal paragraphs should not be intended with spaces or tabs. | |
| 41 | |
| 42 Markdown offers two styles of headers: *Setext* and *atx*. | |
| 43 Setext-style headers for `<h1>` and `<h2>` are created by | |
| 44 "underlining" with equal signs (`=`) and hyphens (`-`), respectively. | |
| 45 To create an atx-style header, you put 1-6 hash marks (`#`) at the | |
| 46 beginning of the line -- the number of hashes equals the resulting | |
| 47 HTML header level. | |
| 48 | |
| 49 Blockquotes are indicated using email-style '`>`' angle brackets. | |
| 50 | |
| 51 Markdown: | |
| 52 | |
| 53 A First Level Header | |
| 54 ==================== | |
| 55 | |
| 56 A Second Level Header | |
| 57 --------------------- | |
| 58 | |
| 59 Now is the time for all good men to come to | |
| 60 the aid of their country. This is just a | |
| 61 regular paragraph. | |
| 62 | |
| 63 The quick brown fox jumped over the lazy | |
| 64 dog's back. | |
| 65 | |
| 66 ### Header 3 | |
| 67 | |
| 68 > This is a blockquote. | |
| 69 > | |
| 70 > This is the second paragraph in the blockquote. | |
| 71 > | |
| 72 > ## This is an H2 in a blockquote | |
| 73 | |
| 74 | |
| 75 Output: | |
| 76 | |
| 77 <h1>A First Level Header</h1> | |
| 78 | |
| 79 <h2>A Second Level Header</h2> | |
| 80 | |
| 81 <p>Now is the time for all good men to come to | |
| 82 the aid of their country. This is just a | |
| 83 regular paragraph.</p> | |
| 84 | |
| 85 <p>The quick brown fox jumped over the lazy | |
| 86 dog's back.</p> | |
| 87 | |
| 88 <h3>Header 3</h3> | |
| 89 | |
| 90 <blockquote> | |
| 91 <p>This is a blockquote.</p> | |
| 92 | |
| 93 <p>This is the second paragraph in the blockquote.</p> | |
| 94 | |
| 95 <h2>This is an H2 in a blockquote</h2> | |
| 96 </blockquote> | |
| 97 | |
| 98 | |
| 99 | |
| 100 ### Phrase Emphasis ### | |
| 101 | |
| 102 Markdown uses asterisks and underscores to indicate spans of emphasis. | |
| 103 | |
| 104 Markdown: | |
| 105 | |
| 106 Some of these words *are emphasized*. | |
| 107 Some of these words _are emphasized also_. | |
| 108 | |
| 109 Use two asterisks for **strong emphasis**. | |
| 110 Or, if you prefer, __use two underscores instead__. | |
| 111 | |
| 112 Output: | |
| 113 | |
| 114 <p>Some of these words <em>are emphasized</em>. | |
| 115 Some of these words <em>are emphasized also</em>.</p> | |
| 116 | |
| 117 <p>Use two asterisks for <strong>strong emphasis</strong>. | |
| 118 Or, if you prefer, <strong>use two underscores instead</strong>.</p> | |
| 119 | |
| 120 | |
| 121 | |
| 122 ## Lists ## | |
| 123 | |
| 124 Unordered (bulleted) lists use asterisks, pluses, and hyphens (`*`, | |
| 125 `+`, and `-`) as list markers. These three markers are | |
| 126 interchangable; this: | |
| 127 | |
| 128 * Candy. | |
| 129 * Gum. | |
| 130 * Booze. | |
| 131 | |
| 132 this: | |
| 133 | |
| 134 + Candy. | |
| 135 + Gum. | |
| 136 + Booze. | |
| 137 | |
| 138 and this: | |
| 139 | |
| 140 - Candy. | |
| 141 - Gum. | |
| 142 - Booze. | |
| 143 | |
| 144 all produce the same output: | |
| 145 | |
| 146 <ul> | |
| 147 <li>Candy.</li> | |
| 148 <li>Gum.</li> | |
| 149 <li>Booze.</li> | |
| 150 </ul> | |
| 151 | |
| 152 Ordered (numbered) lists use regular numbers, followed by periods, as | |
| 153 list markers: | |
| 154 | |
| 155 1. Red | |
| 156 2. Green | |
| 157 3. Blue | |
| 158 | |
| 159 Output: | |
| 160 | |
| 161 <ol> | |
| 162 <li>Red</li> | |
| 163 <li>Green</li> | |
| 164 <li>Blue</li> | |
| 165 </ol> | |
| 166 | |
| 167 If you put blank lines between items, you'll get `<p>` tags for the | |
| 168 list item text. You can create multi-paragraph list items by indenting | |
| 169 the paragraphs by 4 spaces or 1 tab: | |
| 170 | |
| 171 * A list item. | |
| 172 | |
| 173 With multiple paragraphs. | |
| 174 | |
| 175 * Another item in the list. | |
| 176 | |
| 177 Output: | |
| 178 | |
| 179 <ul> | |
| 180 <li><p>A list item.</p> | |
| 181 <p>With multiple paragraphs.</p></li> | |
| 182 <li><p>Another item in the list.</p></li> | |
| 183 </ul> | |
| 184 | |
| 185 | |
| 186 | |
| 187 ### Links ### | |
| 188 | |
| 189 Markdown supports two styles for creating links: *inline* and | |
| 190 *reference*. With both styles, you use square brackets to delimit the | |
| 191 text you want to turn into a link. | |
| 192 | |
| 193 Inline-style links use parentheses immediately after the link text. | |
| 194 For example: | |
| 195 | |
| 196 This is an [example link](http://example.com/). | |
| 197 | |
| 198 Output: | |
| 199 | |
| 200 <p>This is an <a href="http://example.com/"> | |
| 201 example link</a>.</p> | |
| 202 | |
| 203 Optionally, you may include a title attribute in the parentheses: | |
| 204 | |
| 205 This is an [example link](http://example.com/ "With a Title"). | |
| 206 | |
| 207 Output: | |
| 208 | |
| 209 <p>This is an <a href="http://example.com/" title="With a Title"> | |
| 210 example link</a>.</p> | |
| 211 | |
| 212 Reference-style links allow you to refer to your links by names, which | |
| 213 you define elsewhere in your document: | |
| 214 | |
| 215 I get 10 times more traffic from [Google][1] than from | |
| 216 [Yahoo][2] or [MSN][3]. | |
| 217 | |
| 218 [1]: http://google.com/ "Google" | |
| 219 [2]: http://search.yahoo.com/ "Yahoo Search" | |
| 220 [3]: http://search.msn.com/ "MSN Search" | |
| 221 | |
| 222 Output: | |
| 223 | |
| 224 <p>I get 10 times more traffic from <a href="http://google.com/" | |
| 225 title="Google">Google</a> than from <a href="http://search.yahoo.com/" | |
| 226 title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/" | |
| 227 title="MSN Search">MSN</a>.</p> | |
| 228 | |
| 229 The title attribute is optional. Link names may contain letters, | |
| 230 numbers and spaces, but are *not* case sensitive: | |
| 231 | |
| 232 I start my morning with a cup of coffee and | |
| 233 [The New York Times][NY Times]. | |
| 234 | |
| 235 [ny times]: http://www.nytimes.com/ | |
| 236 | |
| 237 Output: | |
| 238 | |
| 239 <p>I start my morning with a cup of coffee and | |
| 240 <a href="http://www.nytimes.com/">The New York Times</a>.</p> | |
| 241 | |
| 242 | |
| 243 ### Images ### | |
| 244 | |
| 245 Image syntax is very much like link syntax. | |
| 246 | |
| 247 Inline (titles are optional): | |
| 248 | |
| 249  | |
| 250 | |
| 251 Reference-style: | |
| 252 | |
| 253 ![alt text][id] | |
| 254 | |
| 255 [id]: /path/to/img.jpg "Title" | |
| 256 | |
| 257 Both of the above examples produce the same output: | |
| 258 | |
| 259 <img src="/path/to/img.jpg" alt="alt text" title="Title" /> | |
| 260 | |
| 261 | |
| 262 | |
| 263 ### Code ### | |
| 264 | |
| 265 In a regular paragraph, you can create code span by wrapping text in | |
| 266 backtick quotes. Any ampersands (`&`) and angle brackets (`<` or | |
| 267 `>`) will automatically be translated into HTML entities. This makes | |
| 268 it easy to use Markdown to write about HTML example code: | |
| 269 | |
| 270 I strongly recommend against using any `<blink>` tags. | |
| 271 | |
| 272 I wish SmartyPants used named entities like `—` | |
| 273 instead of decimal-encoded entites like `—`. | |
| 274 | |
| 275 Output: | |
| 276 | |
| 277 <p>I strongly recommend against using any | |
| 278 <code><blink></code> tags.</p> | |
| 279 | |
| 280 <p>I wish SmartyPants used named entities like | |
| 281 <code>&mdash;</code> instead of decimal-encoded | |
| 282 entites like <code>&#8212;</code>.</p> | |
| 283 | |
| 284 | |
| 285 To specify an entire block of pre-formatted code, indent every line of | |
| 286 the block by 4 spaces or 1 tab. Just like with code spans, `&`, `<`, | |
| 287 and `>` characters will be escaped automatically. | |
| 288 | |
| 289 Markdown: | |
| 290 | |
| 291 If you want your page to validate under XHTML 1.0 Strict, | |
| 292 you've got to put paragraph tags in your blockquotes: | |
| 293 | |
| 294 <blockquote> | |
| 295 <p>For example.</p> | |
| 296 </blockquote> | |
| 297 | |
| 298 Output: | |
| 299 | |
| 300 <p>If you want your page to validate under XHTML 1.0 Strict, | |
| 301 you've got to put paragraph tags in your blockquotes:</p> | |
| 302 | |
| 303 <pre><code><blockquote> | |
| 304 <p>For example.</p> | |
| 305 </blockquote> | |
| 306 </code></pre> | |
| OLD | NEW |