kramdown 0.13.4 → 0.13.5

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


This version of kramdown might be problematic. Click here for more details.

Files changed (77) hide show
  1. data/CONTRIBUTERS +2 -1
  2. data/ChangeLog +237 -0
  3. data/Rakefile +5 -4
  4. data/VERSION +1 -1
  5. data/bin/kramdown +1 -1
  6. data/doc/bg.png +0 -0
  7. data/doc/default.scss.css +127 -473
  8. data/doc/default.template +27 -40
  9. data/doc/design.scss.css +441 -0
  10. data/doc/documentation.page +4 -1
  11. data/doc/index.page +4 -9
  12. data/doc/installation.page +3 -3
  13. data/doc/news.page +1 -1
  14. data/doc/quickref.page +1 -1
  15. data/doc/sidebar.template +21 -0
  16. data/doc/syntax.page +65 -38
  17. data/doc/tests.page +6 -4
  18. data/lib/kramdown.rb +1 -1
  19. data/lib/kramdown/compatibility.rb +17 -3
  20. data/lib/kramdown/converter.rb +1 -1
  21. data/lib/kramdown/converter/base.rb +1 -1
  22. data/lib/kramdown/converter/html.rb +3 -2
  23. data/lib/kramdown/converter/kramdown.rb +13 -7
  24. data/lib/kramdown/converter/latex.rb +1 -1
  25. data/lib/kramdown/converter/toc.rb +1 -1
  26. data/lib/kramdown/document.rb +2 -2
  27. data/lib/kramdown/element.rb +1 -1
  28. data/lib/kramdown/error.rb +1 -1
  29. data/lib/kramdown/options.rb +1 -1
  30. data/lib/kramdown/parser.rb +1 -1
  31. data/lib/kramdown/parser/base.rb +1 -1
  32. data/lib/kramdown/parser/html.rb +5 -5
  33. data/lib/kramdown/parser/kramdown.rb +1 -1
  34. data/lib/kramdown/parser/kramdown/abbreviation.rb +1 -1
  35. data/lib/kramdown/parser/kramdown/autolink.rb +1 -1
  36. data/lib/kramdown/parser/kramdown/blank_line.rb +1 -1
  37. data/lib/kramdown/parser/kramdown/block_boundary.rb +1 -1
  38. data/lib/kramdown/parser/kramdown/blockquote.rb +1 -1
  39. data/lib/kramdown/parser/kramdown/codeblock.rb +1 -1
  40. data/lib/kramdown/parser/kramdown/codespan.rb +1 -1
  41. data/lib/kramdown/parser/kramdown/emphasis.rb +1 -1
  42. data/lib/kramdown/parser/kramdown/eob.rb +1 -1
  43. data/lib/kramdown/parser/kramdown/escaped_chars.rb +1 -1
  44. data/lib/kramdown/parser/kramdown/extensions.rb +1 -1
  45. data/lib/kramdown/parser/kramdown/footnote.rb +1 -1
  46. data/lib/kramdown/parser/kramdown/header.rb +1 -1
  47. data/lib/kramdown/parser/kramdown/horizontal_rule.rb +1 -1
  48. data/lib/kramdown/parser/kramdown/html.rb +2 -2
  49. data/lib/kramdown/parser/kramdown/html_entity.rb +1 -1
  50. data/lib/kramdown/parser/kramdown/line_break.rb +1 -1
  51. data/lib/kramdown/parser/kramdown/link.rb +1 -1
  52. data/lib/kramdown/parser/kramdown/list.rb +1 -1
  53. data/lib/kramdown/parser/kramdown/math.rb +4 -3
  54. data/lib/kramdown/parser/kramdown/paragraph.rb +1 -1
  55. data/lib/kramdown/parser/kramdown/smart_quotes.rb +1 -1
  56. data/lib/kramdown/parser/kramdown/table.rb +1 -1
  57. data/lib/kramdown/parser/kramdown/typographic_symbol.rb +1 -1
  58. data/lib/kramdown/parser/markdown.rb +1 -1
  59. data/lib/kramdown/utils.rb +6 -1
  60. data/lib/kramdown/utils/entities.rb +1 -1
  61. data/lib/kramdown/utils/html.rb +2 -2
  62. data/lib/kramdown/utils/ordered_hash.rb +1 -1
  63. data/lib/kramdown/version.rb +2 -2
  64. data/man/man1/kramdown.1 +100 -100
  65. data/test/run_tests.rb +1 -1
  66. data/test/test_files.rb +1 -1
  67. data/test/testcases/block/04_header/with_auto_ids.html +2 -0
  68. data/test/testcases/block/04_header/with_auto_ids.text +3 -0
  69. data/test/testcases/block/09_html/html5_attributes.html +13 -0
  70. data/test/testcases/block/09_html/html5_attributes.text +13 -0
  71. data/test/testcases/block/09_html/simple.text +1 -1
  72. data/test/testcases/block/15_math/normal.html +2 -2
  73. data/test/testcases/span/05_html/normal.html +1 -1
  74. data/test/testcases/span/05_html/normal.text +1 -1
  75. data/test/testcases/span/math/normal.html +4 -0
  76. data/test/testcases/span/math/normal.text +5 -1
  77. metadata +55 -35
data/doc/default.template CHANGED
@@ -1,63 +1,50 @@
1
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{lang:}" lang="{lang:}">
1
+ <!doctype html>
2
+ <html xml:lang="{lang:}" lang="{lang:}">
3
3
  <head>
4
4
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5
5
  <meta name="author" content="Thomas Leitner" />
6
- <meta name="copyright" content="2009-2010 Thomas Leitner" />
6
+ <meta name="copyright" content="2009-2012 Thomas Leitner" />
7
7
  <meta name="description" content="kramdown is a fast, pure-Ruby Markdown-superset converter" />
8
8
  <meta name="keywords" content="ruby, kramdown, markdown, text markup" />
9
9
  <link href="{relocatable: default.css}" type="text/css" rel="stylesheet" media="screen,projection" />
10
10
  <link href="{relocatable: news.atom}" type="application/atom+xml" rel="alternate" />
11
- <script src="http://kramdown.rubyforge.org/MathJax/MathJax.js" type="text/javascript"></script>
11
+ <!-- <script src="http://kramdown.rubyforge.org/MathJax/MathJax.js" type="text/javascript"></script> -->
12
12
  <title>{title:} | kramdown</title>
13
13
  </head>
14
14
  <body>
15
- <div id="fullheader">
16
- <div id="header">
17
- <h1 id="logo"><a href="{relocatable: /}" title="Homepage">kramdown <span class='slogan'>fast, pure-Ruby Markdown-superset converter</span></a></h1>
18
- </div>
19
- <div id="donation">
20
- <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
21
- <input type="hidden" name="cmd" value="_s-xclick" />
22
- <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
23
- " />
24
- <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
25
- <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
26
- </form>
27
- </div>
28
- </div>
29
- <div id="fullnav">
30
- <div id="nav">
15
+ <header>
16
+ <hgroup>
17
+ <h1 id="logo"><a href="{relocatable: /}" title="Homepage">kramdown</a></h1>
18
+ <h2 id="slogan">fast, pure-Ruby Markdown-superset converter</h2>
19
+ </hgroup>
20
+
21
+ <nav>
31
22
  {menu: {max_levels: 1, used_nodes: files}}
32
- </div>
33
- </div>
34
- <div id="fullintro">
23
+ </nav>
24
+ </header>
25
+
26
+ <div id="wrapper">
35
27
  <% if context.content_node.node_info[:page].blocks.has_key?('intro') %>
36
- <div id="intro">
37
- <div id="intro-in">
38
- <webgen:block name="intro" node="first" />
39
- </div>
40
- </div>
28
+ <aside class="banner">
29
+ <webgen:block name="intro" node="first" />
30
+ </aside>
41
31
  <% end %>
42
- </div>
43
-
44
- <div id="container">
45
32
 
46
- <div id="sidebar"><div id="sidebar-content">
33
+ <aside>
47
34
  <webgen:block name="sidebar" node="first" notfound="ignore" />
48
- </div></div>
49
35
 
50
- <div id="main">
36
+ <webgen:block name="content" chain="sidebar.template" />
37
+ </aside>
38
+
39
+ <div id="content">
51
40
  <webgen:block name="content" />
52
- <div class="clear"></div>
53
41
  </div>
54
-
55
42
  </div>
56
43
 
57
- <div id="footer" class="shadow">
58
- <div class="float-left">Copyright © 2009 Thomas Leitner</div>
59
- <div class="float-right">Based on a design by <a href="http://www.davidkohout.cz" title="Original template design">David Kohout</a></div>
60
- </div>
44
+ <footer>
45
+ <div class="float-left">Copyright © 2009-2012 Thomas Leitner</div>
46
+ <div class="float-right">Generated by <a href="http://webgen.rubyforge.org">webgen</a></div>
47
+ </footer>
61
48
 
62
49
  <!-- Start of StatCounter Code -->
63
50
  <script type="text/javascript">
@@ -0,0 +1,441 @@
1
+ /* Based on the Less Framework 4
2
+ http://lessframework.com
3
+ by Joni Korpi
4
+ License: http://opensource.org/licenses/mit-license.php */
5
+
6
+
7
+ /***** Variables for easy customization *****/
8
+
9
+ /* the baseline height in px */
10
+ $baseline-height: 24;
11
+
12
+ /* The overlay color for the background image */
13
+ $bg-grad-color: rgba(255,255,128,0.1);
14
+
15
+ /* The font size of the logo in px */
16
+ $logo-size: 36;
17
+
18
+ /* Color settings */
19
+ $link-color: #1666A3;
20
+
21
+
22
+
23
+ /* Resets
24
+ ------ */
25
+
26
+ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
27
+ p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
28
+ img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
29
+ dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
30
+ table, caption, tbody, tfoot, thead, tr, th, td,
31
+ article, aside, canvas, details, figure, figcaption, hgroup,
32
+ menu, footer, header, nav, section, summary, time, mark, audio, video {
33
+ margin: 0;
34
+ padding: 0;
35
+ border: 0;
36
+ }
37
+
38
+ article, aside, canvas, figure, figure img, figcaption, hgroup,
39
+ footer, header, nav, section, audio, video {
40
+ display: block;
41
+ }
42
+
43
+ a img {border: 0;}
44
+
45
+
46
+
47
+ /* Typography presets
48
+ ------------------ */
49
+
50
+ .gigantic {
51
+ font-size: 59px;
52
+ line-height: 72px;
53
+ }
54
+
55
+ .huge {
56
+ font-size: 36px;
57
+ line-height: 48px;
58
+ }
59
+
60
+ .large {
61
+ font-size: 23px;
62
+ line-height: 24px;
63
+ }
64
+
65
+ .bigger {
66
+ font-size: 18px;
67
+ line-height: 24px;
68
+ }
69
+
70
+ .big {
71
+ font-size: 14px;
72
+ line-height: 24px;
73
+ }
74
+
75
+ body {
76
+ font: 14px/24px 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
77
+ }
78
+
79
+ .small, small {
80
+ font-size: 12px;
81
+ line-height: 24px;
82
+ }
83
+
84
+ *:target::after {
85
+ content: " ☜";
86
+ }
87
+
88
+
89
+ /* Typographics grid overlay */
90
+
91
+ .grid{
92
+ background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 95%, rgba(0,0,0,0.3) 100%); /* FF3.6+ */
93
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(95%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.3))); /* Chrome,Safari4+ */
94
+ background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 95%,rgba(0,0,0,0.3) 100%); /* Chrome10+,Safari5.1+ */
95
+ background-image: -o-linear-gradient(top, rgba(0,0,0,0) 95%, rgba(0,0,0,0.3) 100%); /* Opera11.10+ */
96
+ background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 95%,rgba(0,0,0,0.3) 100%); /* IE10+ */
97
+ background-image: linear-gradient(top, rgba(0,0,0,0.3) 95%,rgba(0,0,0,0.3) 100%); /* W3C */
98
+
99
+ -webkit-background-size: 100% #{$baseline-height}px;
100
+ -o-background-size: 100% #{$baseline-height}px;
101
+ background-size: 100% #{$baseline-height}px;
102
+ }
103
+
104
+
105
+ /* Basic mixins */
106
+
107
+ @mixin background {
108
+ background-image: -moz-linear-gradient($bg-grad-color, $bg-grad-color), url('bg.png');
109
+ background-image: -webkit-linear-gradient($bg-grad-color, $bg-grad-color), url('bg.png');
110
+ background-image: -o-linear-gradient($bg-grad-color, $bg-grad-color), url('bg.png');
111
+ background-image: -ms-linear-gradient($bg-grad-color, $bg-grad-color), url('bg.png');
112
+ background-image: linear-gradient($bg-grad-color, $bg-grad-color), url('bg.png');
113
+ }
114
+
115
+ @mixin typography($size: big) {
116
+ h3, h4, h5, h6, p, ul, ol, dl, pre, blockquote, table {
117
+ margin-top: 24px;
118
+ margin-bottom: 24px;
119
+ }
120
+
121
+ @if $size == big {
122
+ h1 { @extend .huge }
123
+ h2 { @extend .large }
124
+ h3 { @extend .bigger }
125
+ h4,h5,h6 { @extend .big }
126
+ } @else {
127
+ h1 { @extend .large }
128
+ h2 { @extend .bigger }
129
+ h3,h4,h5,h6 { @extend .big }
130
+ }
131
+
132
+ h1, h2, h3, h4, h5, h6 {
133
+ font-weight: normal;
134
+ padding-left: 48px;
135
+ margin-left: -48px;
136
+ margin-top: 36px;
137
+ margin-bottom: -12px;
138
+ }
139
+
140
+ ul, ol, dd {
141
+ padding-left: 24px;
142
+ }
143
+
144
+ ul ul, ul ol, ol ul, ol ol {
145
+ margin-top: 0;
146
+ margin-bottom: 0;
147
+ }
148
+
149
+ pre {
150
+ padding-left: 12px;
151
+ padding-right: 12px;
152
+ border: 1px solid #ccc;
153
+ font-family: "Bitstream Vera Sans Mono", Consolas, monospace;
154
+ }
155
+
156
+ dt {
157
+ font-weight: bold;
158
+ }
159
+
160
+ a {
161
+ color: $link-color;
162
+ text-decoration: underline;
163
+ }
164
+
165
+ a:hover, a:link {
166
+ color: $link-color / 2;
167
+ }
168
+ }
169
+
170
+ /* Default Layout: 992px.
171
+ Gutters: 24px.
172
+ Outer margins: 48px.
173
+ Leftover space for scrollbars @1024px: 32px.
174
+ -------------------------------------------------------------------------------
175
+ cols 1 2 3 4 5 6 7 8 9 10
176
+ px 68 160 252 344 436 528 620 712 804 896 */
177
+
178
+ body {
179
+ width: 992px;
180
+ margin: 0 auto 48px;
181
+ color: rgb(60,60,60);
182
+ -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
183
+ @include background;
184
+ }
185
+
186
+ body > header {
187
+ position: relative;
188
+ padding: 12px;
189
+ font-family: Verdana;
190
+ color: #eee;
191
+ -moz-box-shadow: 0 0 24px rgba(0,0,0,0.6);
192
+ -webkit-box-shadow: 0 0 24px rgba(0,0,0,0.6);
193
+ box-shadow: 0 0 24px rgba(0,0,0,0.6);
194
+ z-index: 1;
195
+ }
196
+
197
+ #logo {
198
+ font-size: #{$logo-size}px;
199
+ line-height: #{$baseline-height * (floor($logo-size / $baseline-height) + 1)}px;
200
+ margin: 12px;
201
+ text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
202
+
203
+ a {
204
+ color: #eee;
205
+ text-decoration: none;
206
+
207
+ &:hover {
208
+ color: #fff;
209
+ }
210
+ }
211
+
212
+ }
213
+
214
+ #slogan {
215
+ font-size: 100%;
216
+ margin: 12px;
217
+ text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
218
+ }
219
+
220
+ nav {
221
+ position: absolute;
222
+ bottom: 0px;
223
+ right: 0px;
224
+ background-color: rgba(255,255,255,0.1);
225
+
226
+ li {
227
+ display: inline-block;
228
+ }
229
+
230
+ ul {
231
+ margin: 0;
232
+ padding: 0;
233
+ }
234
+
235
+ a, span {
236
+ display: block;
237
+ padding: 12px;
238
+ color: #ccc;
239
+ text-decoration: none;
240
+ }
241
+
242
+ span {
243
+ background-color: rgba(255,255,255,0.3);
244
+ }
245
+
246
+ a:hover {
247
+ background-color: rgba(255,255,255,0.3);
248
+ }
249
+
250
+ }
251
+
252
+ #wrapper {
253
+ clear: both;
254
+ position: relative;
255
+ background-color: white;
256
+ -moz-box-shadow: 0 0 24px rgba(0,0,0,0.6);
257
+ -webkit-box-shadow: 0 0 24px rgba(0,0,0,0.6);
258
+ box-shadow: 0 0 24px rgba(0,0,0,0.6);
259
+ }
260
+
261
+ aside {
262
+ position: absolute;
263
+ right: 0;
264
+ background-color: white;
265
+ width: 252px;
266
+ padding: 24px;
267
+
268
+ @include typography(small);
269
+
270
+ h1, h2, h3, h4, h5, h6 {
271
+ padding-left: 48px;
272
+ margin-left: -48px;
273
+ }
274
+ }
275
+
276
+
277
+ aside.banner {
278
+ @include background;
279
+ position: relative;
280
+ width: inherit;
281
+ margin: 0;
282
+ float: none;
283
+ padding: 24px;
284
+ border: 10px solid rgba(255,255,255,0.1);
285
+ color: #ccc;
286
+ font-size: 36px;
287
+ line-height: 48px;
288
+
289
+ a {
290
+ color: #ccc;
291
+ text-decoration: underline;
292
+ }
293
+
294
+ a:hover {
295
+ background-color: rgba(255,255,255,0.3);
296
+ }
297
+
298
+ p {
299
+ margin: 0;
300
+ }
301
+
302
+ p + p {
303
+ margin-top: 24px;
304
+ }
305
+ }
306
+
307
+ #content {
308
+ width: 620px;
309
+ padding: 24px 48px;
310
+
311
+ @include typography(big);
312
+ }
313
+
314
+ footer {
315
+ background-color: rgba(255,255,255,0.1);
316
+ min-height: 24px;
317
+ color: #eee;
318
+ }
319
+
320
+
321
+ /* Tablet Layout: 768px.
322
+ Gutters: 24px.
323
+ Outer margins: 28px.
324
+ Inherits styles from: Default Layout.
325
+ -----------------------------------------------------------------
326
+ cols 1 2 3 4 5 6 7 8
327
+ px 68 160 252 344 436 528 620 712 */
328
+
329
+ @media only screen and (min-width: 768px) and (max-width: 1005px) {
330
+
331
+ body {
332
+ width: 716px;
333
+ }
334
+
335
+ body > header {
336
+ padding: 0;
337
+ }
338
+
339
+ aside {
340
+ position: static;
341
+ float: right;
342
+ }
343
+
344
+ nav {
345
+ position: relative;
346
+ margin-top: 12px;
347
+ }
348
+ }
349
+
350
+
351
+
352
+ /* Mobile Layout: 320px.
353
+ Gutters: 24px.
354
+ Outer margins: 34px.
355
+ Inherits styles from: Default Layout.
356
+ ---------------------------------------------
357
+ cols 1 2 3
358
+ px 68 160 252 */
359
+
360
+ @media only screen and (max-width: 767px) {
361
+
362
+ body {
363
+ width: 320px;
364
+ }
365
+
366
+ body > header {
367
+ padding: 0;
368
+ }
369
+
370
+ nav {
371
+ position: relative;
372
+ margin-top: 12px;
373
+ }
374
+
375
+ aside {
376
+ position: relative;
377
+ }
378
+
379
+ #content, aside {
380
+ width: 296px;
381
+ padding: 24px 12px;
382
+ }
383
+
384
+ #content {
385
+ h1, h2, h3, h4, h5, h6 {
386
+ padding-left: 12px;
387
+ margin-left: -12px;
388
+ }
389
+ }
390
+
391
+ }
392
+
393
+
394
+
395
+ /* Wide Mobile Layout: 480px.
396
+ Gutters: 24px.
397
+ Outer margins: 22px.
398
+ Inherits styles from: Default Layout, Mobile Layout.
399
+ ------------------------------------------------------------
400
+ cols 1 2 3 4 5
401
+ px 68 160 252 344 436 */
402
+
403
+ @media only screen and (min-width: 480px) and (max-width: 767px) {
404
+
405
+ body {
406
+ width: 90%;
407
+ }
408
+
409
+ aside {
410
+ position: relative;
411
+ }
412
+
413
+ #content, aside {
414
+ width: inherit;
415
+ padding: 24px 48px;
416
+ }
417
+
418
+ #content {
419
+ h1, h2, h3, h4, h5, h6 {
420
+ padding-left: 48px;
421
+ margin-left: -48px;
422
+ }
423
+ }
424
+
425
+ }
426
+
427
+
428
+ /* Retina media query.
429
+ Overrides styles for devices with a
430
+ device-pixel-ratio of 2+, such as iPhone 4.
431
+ ----------------------------------------------- */
432
+
433
+ @media
434
+ only screen and (-webkit-min-device-pixel-ratio: 2),
435
+ only screen and (min-device-pixel-ratio: 2) {
436
+
437
+ body {
438
+
439
+ }
440
+
441
+ }