HTML writer: Spacing adjustments for Plain and RawHtml blocks.

This commit is contained in:
John MacFarlane 2011-02-04 21:05:48 -08:00
parent 90647a56f6
commit ce4f9a3787
7 changed files with 180 additions and 386 deletions

View file

@ -317,6 +317,8 @@ attrsToHtml opts (id',classes',keyvals) =
-- | Convert Pandoc block element to HTML.
blockToHtml :: WriterOptions -> Block -> State WriterState Html
blockToHtml opts b@(Plain _) = blockToHtml' opts b
blockToHtml opts b@(RawBlock _ _) = blockToHtml' opts b
blockToHtml opts b = blockToHtml' opts b >>= return . (nl opts +++)
blockToHtml' :: WriterOptions -> Block -> State WriterState Html

View file

@ -40,25 +40,19 @@
<h1>First slide</h1>
<ul>
<li>
first bullet</li>
<li>
second bullet</li>
<li>first bullet</li>
<li>second bullet</li>
</ul>
</div>
<div class="slide">
<h1>Math</h1>
<ul>
<li>
<span class="math">$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$</span></li>
<li><span class="math">$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$</span></li>
</ul>
</div>
</div>
</body>

View file

@ -239,25 +239,19 @@
<h1>First slide</h1>
<ul class="incremental">
<li>
first bullet</li>
<li>
second bullet</li>
<li>first bullet</li>
<li>second bullet</li>
</ul>
</div>
<div class="slide">
<h1>Math</h1>
<ul class="incremental">
<li>
<span class="LaTeX">$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$</span></li>
<li><span class="LaTeX">$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$</span></li>
</ul>
</div>
</div>
</body>

View file

@ -1,15 +1,12 @@
<h1 id="first-slide">First slide</h1>
<ul>
<li>
first bullet</li>
<li>
second bullet</li>
<li>first bullet</li>
<li>second bullet</li>
</ul>
<h1 id="math">Math</h1>
<ul>
<li>
<span class="math">$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$</span></li>
<li><span class="math">$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$</span></li>
</ul>

View file

@ -16,17 +16,14 @@ STUFF INSERTED
<h1 id="first-slide">First slide</h1>
<ul>
<li>
first bullet</li>
<li>
second bullet</li>
<li>first bullet</li>
<li>second bullet</li>
</ul>
<h1 id="math">Math</h1>
<ul>
<li>
<span class="math">$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$</span></li>
<li><span class="math">$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$</span></li>
</ul>
STUFF INSERTED
</body>

View file

@ -1,234 +1,142 @@
<p>Simple table with caption:</p>
<table><caption>Demonstration of simple table syntax.</caption><thead><tr class="header"><th align="right">
Right</th>
<th align="left">
Left</th>
<th align="center">
Center</th>
<th align="left">
Default</th>
<table><caption>Demonstration of simple table syntax.</caption><thead><tr class="header"><th align="right">Right</th>
<th align="left">Left</th>
<th align="center">Center</th>
<th align="left">Default</th>
</tr>
</thead><tbody><tr class="odd"><td align="right">
12</td>
<td align="left">
12</td>
<td align="center">
12</td>
<td align="left">
12</td>
</thead><tbody><tr class="odd"><td align="right">12</td>
<td align="left">12</td>
<td align="center">12</td>
<td align="left">12</td>
</tr>
<tr class="even"><td align="right">
123</td>
<td align="left">
123</td>
<td align="center">
123</td>
<td align="left">
123</td>
<tr class="even"><td align="right">123</td>
<td align="left">123</td>
<td align="center">123</td>
<td align="left">123</td>
</tr>
<tr class="odd"><td align="right">
1</td>
<td align="left">
1</td>
<td align="center">
1</td>
<td align="left">
1</td>
<tr class="odd"><td align="right">1</td>
<td align="left">1</td>
<td align="center">1</td>
<td align="left">1</td>
</tr>
</tbody></table>
<p>Simple table without caption:</p>
<table><thead><tr class="header"><th align="right">
Right</th>
<th align="left">
Left</th>
<th align="center">
Center</th>
<th align="left">
Default</th>
<table><thead><tr class="header"><th align="right">Right</th>
<th align="left">Left</th>
<th align="center">Center</th>
<th align="left">Default</th>
</tr>
</thead><tbody><tr class="odd"><td align="right">
12</td>
<td align="left">
12</td>
<td align="center">
12</td>
<td align="left">
12</td>
</thead><tbody><tr class="odd"><td align="right">12</td>
<td align="left">12</td>
<td align="center">12</td>
<td align="left">12</td>
</tr>
<tr class="even"><td align="right">
123</td>
<td align="left">
123</td>
<td align="center">
123</td>
<td align="left">
123</td>
<tr class="even"><td align="right">123</td>
<td align="left">123</td>
<td align="center">123</td>
<td align="left">123</td>
</tr>
<tr class="odd"><td align="right">
1</td>
<td align="left">
1</td>
<td align="center">
1</td>
<td align="left">
1</td>
<tr class="odd"><td align="right">1</td>
<td align="left">1</td>
<td align="center">1</td>
<td align="left">1</td>
</tr>
</tbody></table>
<p>Simple table indented two spaces:</p>
<table><caption>Demonstration of simple table syntax.</caption><thead><tr class="header"><th align="right">
Right</th>
<th align="left">
Left</th>
<th align="center">
Center</th>
<th align="left">
Default</th>
<table><caption>Demonstration of simple table syntax.</caption><thead><tr class="header"><th align="right">Right</th>
<th align="left">Left</th>
<th align="center">Center</th>
<th align="left">Default</th>
</tr>
</thead><tbody><tr class="odd"><td align="right">
12</td>
<td align="left">
12</td>
<td align="center">
12</td>
<td align="left">
12</td>
</thead><tbody><tr class="odd"><td align="right">12</td>
<td align="left">12</td>
<td align="center">12</td>
<td align="left">12</td>
</tr>
<tr class="even"><td align="right">
123</td>
<td align="left">
123</td>
<td align="center">
123</td>
<td align="left">
123</td>
<tr class="even"><td align="right">123</td>
<td align="left">123</td>
<td align="center">123</td>
<td align="left">123</td>
</tr>
<tr class="odd"><td align="right">
1</td>
<td align="left">
1</td>
<td align="center">
1</td>
<td align="left">
1</td>
<tr class="odd"><td align="right">1</td>
<td align="left">1</td>
<td align="center">1</td>
<td align="left">1</td>
</tr>
</tbody></table>
<p>Multiline table with caption:</p>
<table><caption>Here's the caption. It may span multiple lines.</caption><col width="15%" /><col width="13%" /><col width="16%" /><col width="33%" /><thead><tr class="header"><th align="center">
Centered Header</th>
<th align="left">
Left Aligned</th>
<th align="right">
Right Aligned</th>
<th align="left">
Default aligned</th>
<table><caption>Here's the caption. It may span multiple lines.</caption><col width="15%" /><col width="13%" /><col width="16%" /><col width="33%" /><thead><tr class="header"><th align="center">Centered Header</th>
<th align="left">Left Aligned</th>
<th align="right">Right Aligned</th>
<th align="left">Default aligned</th>
</tr>
</thead><tbody><tr class="odd"><td align="center">
First</td>
<td align="left">
row</td>
<td align="right">
12.0</td>
<td align="left">
Example of a row that spans multiple lines.</td>
</thead><tbody><tr class="odd"><td align="center">First</td>
<td align="left">row</td>
<td align="right">12.0</td>
<td align="left">Example of a row that spans multiple lines.</td>
</tr>
<tr class="even"><td align="center">
Second</td>
<td align="left">
row</td>
<td align="right">
5.0</td>
<td align="left">
Here's another one. Note the blank line between rows.</td>
<tr class="even"><td align="center">Second</td>
<td align="left">row</td>
<td align="right">5.0</td>
<td align="left">Here's another one. Note the blank line between rows.</td>
</tr>
</tbody></table>
<p>Multiline table without caption:</p>
<table><col width="15%" /><col width="13%" /><col width="16%" /><col width="33%" /><thead><tr class="header"><th align="center">
Centered Header</th>
<th align="left">
Left Aligned</th>
<th align="right">
Right Aligned</th>
<th align="left">
Default aligned</th>
<table><col width="15%" /><col width="13%" /><col width="16%" /><col width="33%" /><thead><tr class="header"><th align="center">Centered Header</th>
<th align="left">Left Aligned</th>
<th align="right">Right Aligned</th>
<th align="left">Default aligned</th>
</tr>
</thead><tbody><tr class="odd"><td align="center">
First</td>
<td align="left">
row</td>
<td align="right">
12.0</td>
<td align="left">
Example of a row that spans multiple lines.</td>
</thead><tbody><tr class="odd"><td align="center">First</td>
<td align="left">row</td>
<td align="right">12.0</td>
<td align="left">Example of a row that spans multiple lines.</td>
</tr>
<tr class="even"><td align="center">
Second</td>
<td align="left">
row</td>
<td align="right">
5.0</td>
<td align="left">
Here's another one. Note the blank line between rows.</td>
<tr class="even"><td align="center">Second</td>
<td align="left">row</td>
<td align="right">5.0</td>
<td align="left">Here's another one. Note the blank line between rows.</td>
</tr>
</tbody></table>
<p>Table without column headers:</p>
<table><tbody><tr class="odd"><td align="right">
12</td>
<td align="left">
12</td>
<td align="center">
12</td>
<td align="right">
12</td>
<table><tbody><tr class="odd"><td align="right">12</td>
<td align="left">12</td>
<td align="center">12</td>
<td align="right">12</td>
</tr>
<tr class="even"><td align="right">
123</td>
<td align="left">
123</td>
<td align="center">
123</td>
<td align="right">
123</td>
<tr class="even"><td align="right">123</td>
<td align="left">123</td>
<td align="center">123</td>
<td align="right">123</td>
</tr>
<tr class="odd"><td align="right">
1</td>
<td align="left">
1</td>
<td align="center">
1</td>
<td align="right">
1</td>
<tr class="odd"><td align="right">1</td>
<td align="left">1</td>
<td align="center">1</td>
<td align="right">1</td>
</tr>
</tbody></table>
<p>Multiline table without column headers:</p>
<table><col width="15%" /><col width="13%" /><col width="16%" /><col width="33%" /><tbody><tr class="odd"><td align="center">
First</td>
<td align="left">
row</td>
<td align="right">
12.0</td>
<td align="left">
Example of a row that spans multiple lines.</td>
<table><col width="15%" /><col width="13%" /><col width="16%" /><col width="33%" /><tbody><tr class="odd"><td align="center">First</td>
<td align="left">row</td>
<td align="right">12.0</td>
<td align="left">Example of a row that spans multiple lines.</td>
</tr>
<tr class="even"><td align="center">
Second</td>
<td align="left">
row</td>
<td align="right">
5.0</td>
<td align="left">
Here's another one. Note the blank line between rows.</td>
<tr class="even"><td align="center">Second</td>
<td align="left">row</td>
<td align="right">5.0</td>
<td align="left">Here's another one. Note the blank line between rows.</td>
</tr>
</tbody></table>

View file

@ -68,10 +68,8 @@
<p>A list:</p>
<ol style="list-style-type: decimal">
<li>
item one</li>
<li>
item two</li>
<li>item one</li>
<li>item two</li>
</ol>
<p>Nested block quotes:</p>
@ -117,12 +115,9 @@ These should not be escaped: \$ \\ \&gt; \[ \{
<p>Asterisks tight:</p>
<ul>
<li>
asterisk 1</li>
<li>
asterisk 2</li>
<li>
asterisk 3</li>
<li>asterisk 1</li>
<li>asterisk 2</li>
<li>asterisk 3</li>
</ul>
<p>Asterisks loose:</p>
@ -139,12 +134,9 @@ asterisk 3</li>
<p>Pluses tight:</p>
<ul>
<li>
Plus 1</li>
<li>
Plus 2</li>
<li>
Plus 3</li>
<li>Plus 1</li>
<li>Plus 2</li>
<li>Plus 3</li>
</ul>
<p>Pluses loose:</p>
@ -161,12 +153,9 @@ Plus 3</li>
<p>Minuses tight:</p>
<ul>
<li>
Minus 1</li>
<li>
Minus 2</li>
<li>
Minus 3</li>
<li>Minus 1</li>
<li>Minus 2</li>
<li>Minus 3</li>
</ul>
<p>Minuses loose:</p>
@ -185,23 +174,17 @@ Minus 3</li>
<p>Tight:</p>
<ol style="list-style-type: decimal">
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<p>and:</p>
<ol style="list-style-type: decimal">
<li>
One</li>
<li>
Two</li>
<li>
Three</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
<p>Loose using tabs:</p>
@ -242,16 +225,13 @@ Three</li>
<h2 id="nested">Nested</h2>
<ul>
<li>
Tab
<li>Tab
<ul>
<li>
Tab
<li>Tab
<ul>
<li>
Tab</li>
<li>Tab</li>
</ul></li>
</ul></li>
</ul>
@ -259,21 +239,15 @@ Tab</li>
<p>Heres another:</p>
<ol style="list-style-type: decimal">
<li>
First</li>
<li>
Second:
<li>First</li>
<li>Second:
<ul>
<li>
Fee</li>
<li>
Fie</li>
<li>
Foe</li>
<li>Fee</li>
<li>Fie</li>
<li>Foe</li>
</ul></li>
<li>
Third</li>
<li>Third</li>
</ol>
<p>Same thing but with paragraphs:</p>
@ -285,12 +259,9 @@ Third</li>
<p>Second:</p>
<ul>
<li>
Fee</li>
<li>
Fie</li>
<li>
Foe</li>
<li>Fee</li>
<li>Fie</li>
<li>Foe</li>
</ul></li>
<li>
<p>Third</p></li>
@ -315,24 +286,19 @@ Foe</li>
<h2 id="fancy-list-markers">Fancy list markers</h2>
<ol start="2" style="list-style-type: decimal">
<li>
begins with 2</li>
<li>begins with 2</li>
<li>
<p>and now 3</p>
<p>with a continuation</p>
<ol start="4" style="list-style-type: lower-roman">
<li>
sublist with roman numerals, starting with 4</li>
<li>
more items
<li>sublist with roman numerals, starting with 4</li>
<li>more items
<ol style="list-style-type: upper-alpha">
<li>
a subsublist</li>
<li>
a subsublist</li>
<li>a subsublist</li>
<li>a subsublist</li>
</ol></li>
</ol></li>
</ol>
@ -340,20 +306,16 @@ a subsublist</li>
<p>Nesting:</p>
<ol style="list-style-type: upper-alpha">
<li>
Upper Alpha
<li>Upper Alpha
<ol style="list-style-type: upper-roman">
<li>
Upper Roman.
<li>Upper Roman.
<ol start="6" style="list-style-type: decimal">
<li>
Decimal start with 6
<li>Decimal start with 6
<ol start="3" style="list-style-type: lower-alpha">
<li>
Lower alpha with paren</li>
<li>Lower alpha with paren</li>
</ol></li>
</ol></li>
</ol></li>
@ -362,14 +324,11 @@ Lower alpha with paren</li>
<p>Autonumbering:</p>
<ol>
<li>
Autonumber.</li>
<li>
More.
<li>Autonumber.</li>
<li>More.
<ol>
<li>
Nested.</li>
<li>Nested.</li>
</ol></li>
</ol>
@ -387,16 +346,13 @@ Nested.</li>
<dl>
<dt>apple</dt>
<dd>
red fruit
<dd>red fruit
</dd>
<dt>orange</dt>
<dd>
orange fruit
<dd>orange fruit
</dd>
<dt>banana</dt>
<dd>
yellow fruit
<dd>yellow fruit
</dd>
</dl>
@ -404,16 +360,13 @@ yellow fruit
<dl>
<dt>apple</dt>
<dd>
red fruit
<dd>red fruit
</dd>
<dt>orange</dt>
<dd>
orange fruit
<dd>orange fruit
</dd>
<dt>banana</dt>
<dd>
yellow fruit
<dd>yellow fruit
</dd>
</dl>
@ -459,16 +412,12 @@ yellow fruit
<dl>
<dt>apple</dt>
<dd>
red fruit
</dd><dd>
computer
<dd>red fruit
</dd><dd>computer
</dd>
<dt>orange</dt>
<dd>
orange fruit
</dd><dd>
bank
<dd>orange fruit
</dd><dd>bank
</dd>
</dl>
@ -503,10 +452,8 @@ bank
<p>orange fruit</p>
<ol style="list-style-type: decimal">
<li>
sublist</li>
<li>
sublist</li>
<li>sublist</li>
<li>sublist</li>
</ol>
</dd>
</dl>
@ -514,45 +461,32 @@ sublist</li>
<h1 id="html-blocks">HTML Blocks</h1>
<p>Simple block on one line:</p>
<div>
foo
</div>
<p>And nested without indentation:</p>
<div>
<div>
<div>
foo
</div>
</div>
<div>
bar
</div>
</div>
<p>Interpreted markdown in a table:</p>
<table>
<tr>
<td>
This is <em>emphasized</em>
</td>
<td>
And this is <strong>strong</strong>
</td>
</tr>
</table>
@ -561,12 +495,9 @@ And this is <strong>strong</strong>
<p>Heres a simple block:</p>
<div>
foo
</div>
@ -583,26 +514,21 @@ foo
</code></pre>
<p>Now, nested:</p>
<div>
<div>
<div>
foo
</div>
</div>
</div>
<p>This should just be an HTML comment:</p>
<!-- Comment -->
<p>Multiline:</p>
<!--
Blah
Blah
@ -619,7 +545,6 @@ Blah
</code></pre>
<p>Just plain comment, with trailing spaces on the line:</p>
<!-- foo -->
@ -629,7 +554,6 @@ Blah
</code></pre>
<p>Hrs:</p>
<hr>
<hr />
@ -702,41 +626,28 @@ Blah
<h1 id="latex">LaTeX</h1>
<ul>
<li>
</li>
<li>
<span class="math">2+2=4</span></li>
<li>
<span class="math"><em>x</em> ∈ <em>y</em></span></li>
<li>
<span class="math">α ∧ ω</span></li>
<li>
<span class="math">223</span></li>
<li>
<span class="math"><em>p</em></span>-Tree</li>
<li>
Heres some display math: <br /><span class="math">$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$</span><br /></li>
<li>
Heres one that has a line break in it: <span class="math">α+ ω × <em>x</em><sup>2</sup></span>.</li>
<li></li>
<li><span class="math">2+2=4</span></li>
<li><span class="math"><em>x</em> ∈ <em>y</em></span></li>
<li><span class="math">α ∧ ω</span></li>
<li><span class="math">223</span></li>
<li><span class="math"><em>p</em></span>-Tree</li>
<li>Heres some display math: <br /><span class="math">$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$</span><br /></li>
<li>Heres one that has a line break in it: <span class="math">α+ ω × <em>x</em><sup>2</sup></span>.</li>
</ul>
<p>These shouldnt be math:</p>
<ul>
<li>
To get the famous equation, write <code>$e = mc^2$</code>.</li>
<li>
$22,000 is a <em>lot</em> of money. So is $34,000. (It worked if “lot” is emphasized.)</li>
<li>
Shoes ($20) and socks ($5).</li>
<li>
Escaped <code>$</code>: $73 <em>this should be emphasized</em> 23$.</li>
<li>To get the famous equation, write <code>$e = mc^2$</code>.</li>
<li>$22,000 is a <em>lot</em> of money. So is $34,000. (It worked if “lot” is emphasized.)</li>
<li>Shoes ($20) and socks ($5).</li>
<li>Escaped <code>$</code>: $73 <em>this should be emphasized</em> 23$.</li>
</ul>
<p>Heres a LaTeX table:</p>
<hr />
<h1 id="special-characters">Special Characters</h1>
@ -744,16 +655,11 @@ Escaped <code>$</code>: $73 <em>this should be emphasized</em> 23$.</li>
<p>Here is some unicode:</p>
<ul>
<li>
I hat: Î</li>
<li>
o umlaut: ö</li>
<li>
section: §</li>
<li>
set membership: ∈</li>
<li>
copyright: ©</li>
<li>I hat: Î</li>
<li>o umlaut: ö</li>
<li>section: §</li>
<li>set membership: ∈</li>
<li>copyright: ©</li>
</ul>
<p>AT&amp;T has an ampersand in their name.</p>
@ -869,12 +775,9 @@ document.write('<a h'+'ref'+'="ma'+'ilto'+':'+e+'">'+'Email link'+'<\/'+'a'+'>')
<p>With an ampersand: <a href="http://example.com/?foo=1&amp;bar=2"><code class="url">http://example.com/?foo=1&amp;bar=2</code></a></p>
<ul>
<li>
In a list?</li>
<li>
<a href="http://example.com/"><code class="url">http://example.com/</code></a></li>
<li>
It should.</li>
<li>In a list?</li>
<li><a href="http://example.com/"><code class="url">http://example.com/</code></a></li>
<li>It should.</li>
</ul>
<p>An e-mail address: <script type="text/javascript">
@ -914,8 +817,7 @@ document.write('<a h'+'ref'+'="ma'+'ilto'+':'+e+'">'+'<code>'+e+'</code>'+'<\/'+
<p>Notes can go in quotes.<sup><a href="#fn4" class="footnoteRef" id="fnref4">4</a></sup></p></blockquote>
<ol style="list-style-type: decimal">
<li>
And in list items.<sup><a href="#fn5" class="footnoteRef" id="fnref5">5</a></sup></li>
<li>And in list items.<sup><a href="#fn5" class="footnoteRef" id="fnref5">5</a></sup></li>
</ol>
<p>This paragraph should not be part of the note, as it is not indented.</p><div class="footnotes">