ronn 0.5 → 0.6.0

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