complex.html

<h1 id="an-h1-header">An h1 header</h1>
<p>Paragraphs are separated by a blank line.</p>
<p>2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and <code>monospace</code>. Itemized lists look like:</p>
<ul>
<li>this one</li>
<li>that one</li>
<li>the other one</li>
</ul>
<p>Note that — not considering the asterisk — the actual text content starts at 4-columns in.</p>
<blockquote>
<p>Block quotes are written like so.</p>
<p>They can span multiple paragraphs, if you like.</p>
</blockquote>
<p>Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., “it’s all in chapters 12–14”). Three dots … will be converted to an ellipsis. Unicode is supported. ☺</p>
<h2 id="an-h2-header">An h2 header</h2>
<p>Here’s a numbered list:</p>
<ol type="1">
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
<p>Note again how the actual text starts at 4 columns in (4 characters from the left side). Here’s a code sample:</p>
<pre><code># Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }</code></pre>
<p>As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like:</p>
<pre><code>define foobar() {
    print &quot;Welcome to flavor country!&quot;;
}</code></pre>
<p>(which makes copying &amp; pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it:</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb3-1" data-line-number="1"><span class="im">import</span> time</a>
<a class="sourceLine" id="cb3-2" data-line-number="2"><span class="co"># Quick, count to ten!</span></a>
<a class="sourceLine" id="cb3-3" data-line-number="3"><span class="cf">for</span> i <span class="kw">in</span> <span class="bu">range</span>(<span class="dv">10</span>):</a>
<a class="sourceLine" id="cb3-4" data-line-number="4">    <span class="co"># (but not *too* quick)</span></a>
<a class="sourceLine" id="cb3-5" data-line-number="5">    time.sleep(<span class="fl">0.5</span>)</a>
<a class="sourceLine" id="cb3-6" data-line-number="6">    <span class="bu">print</span> i</a></code></pre></div>
<h3 id="an-h3-header">An h3 header</h3>
<p>Now a nested list:</p>
<ol type="1">
<li><p>First, get these ingredients:</p>
<ul>
<li>carrots</li>
<li>celery</li>
<li>lentils</li>
</ul></li>
<li><p>Boil some water.</p></li>
<li><p>Dump everything in the pot and follow this algorithm:</p>
<pre><code>find wooden spoon
uncover pot
stir
cover pot
balance wooden spoon precariously on pot handle
wait 10 minutes
goto first step (or shut off burner when done)</code></pre>
<p>Do not bump wooden spoon or it will fall.</p></li>
</ol>
<p>Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).</p>
<p>Here’s a link to <a href="http://foo.bar">a website</a>, to a <a href="local-doc.html">local doc</a>, and to a <a href="#an-h2-header">section heading in the current doc</a>. Here’s a footnote <a href="#fn1" class="footnote-ref" id="fnref1"><sup>1</sup></a>.</p>
<p>Tables can look like this:</p>
<table>
<caption>Shoes, their sizes, and what they’re made of</caption>
<thead>
<tr class="header">
<th>size</th>
<th style="text-align: left;">material</th>
<th style="text-align: left;">color</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>9</td>
<td style="text-align: left;">leather</td>
<td style="text-align: left;">brown</td>
</tr>
<tr class="even">
<td>10</td>
<td style="text-align: left;">hemp canvas</td>
<td style="text-align: left;">natural</td>
</tr>
<tr class="odd">
<td>11</td>
<td style="text-align: left;">glass</td>
<td style="text-align: left;">transparent</td>
</tr>
</tbody>
</table>
<p>(The above is the caption for the table.) Pandoc also supports multi-line tables:</p>
<table style="width:47%;">
<colgroup>
<col style="width: 13%" />
<col style="width: 33%" />
</colgroup>
<thead>
<tr class="header">
<th style="text-align: left;">keyword</th>
<th style="text-align: left;">text</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: left;">red</td>
<td style="text-align: left;">Sunsets, apples, and other red or reddish things.</td>
</tr>
<tr class="even">
<td style="text-align: left;">green</td>
<td style="text-align: left;">Leaves, grass, frogs and other things it’s not easy being.</td>
</tr>
</tbody>
</table>
<p>A horizontal rule follows.</p>
<hr />
<p>Here’s a definition list:</p>
<dl>
<dt>apples</dt>
<dd>Good for making applesauce. oranges
</dd>
<dd>Citrus! tomatoes
</dd>
<dd>There’s no “e” in tomatoe.
</dd>
</dl>
<p>Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.)</p>
<p>Here’s a “line block”:</p>
<div class="line-block">Line one<br />
  Line too<br />
Line tree</div>
<p>and images can be specified like so:</p>
<figure>
<img src="example-image.jpg" title="An exemplary image" alt="example image" /><figcaption>example image</figcaption>
</figure>
<p>Inline math equations go in like so: <span class="math inline"><em>ω</em> = <em>d</em><em>ϕ</em>/<em>d</em><em>t</em></span>. Display math should get its own line and be put in in double-dollarsigns:</p>
<p><br /><span class="math display"><em>I</em> = ∫<em>ρ</em><em>R</em><sup>2</sup><em>d</em><em>V</em></span><br /></p>
<p>And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.</p>
<section class="footnotes">
<hr />
<ol>
<li id="fn1"><p>Footnote text goes here.<a href="#fnref1" class="footnote-back">↩</a></p></li>
</ol>
</section>