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