Pandoc upgrade changes HTML output slightly

Author: jez

docs/index.html

@@ -9,28 +9,27 @@
   <title>Tufte Pandoc CSS</title>
   <style type="text/css">code{white-space: pre;}</style>
   <style type="text/css">
-a.sourceLine { display: inline-block; line-height: 1.25; }
-a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
-a.sourceLine:empty { height: 1.2em; position: absolute; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
+code.sourceCode > span { color: inherit; text-decoration: inherit; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-a.sourceLine { text-indent: -1em; padding-left: 1em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
-pre.numberSource a.sourceLine
-  { position: relative; }
-pre.numberSource a.sourceLine:empty
-  { position: absolute; }
-pre.numberSource a.sourceLine::before
-  { content: attr(data-line-number);
-    position: absolute; left: -5em; text-align: right; vertical-align: baseline;
-    border: none; pointer-events: all;
+pre.numberSource code
+  { counter-reset: source-line 0; }
+pre.numberSource code > span
+  { position: relative; left: -4em; counter-increment: source-line; }
+pre.numberSource code > span > a:first-child::before
+  { content: counter(source-line);
+    position: relative; left: -1em; text-align: right; vertical-align: baseline;
+    border: none; display: inline-block;
     -webkit-touch-callout: none; -webkit-user-select: none;
     -khtml-user-select: none; -moz-user-select: none;
     -ms-user-select: none; user-select: none;
@@ -39,9 +38,9 @@
   }
 pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
 div.sourceCode
-  {  }
+  {   }
 @media screen {
-a.sourceLine::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -107,48 +106,48 @@ <h2>Sidenotes in Markdown</h2>
 <p>The biggest barrier that this project overcomes is that Pandoc Markdown doesn’t support side notes nor margin notes by default. This project adds that functionality.<span><label for="sn-1" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">In particular, a separate library called <a href="https://github.com/jez/pandoc-sidenote"><code>pandoc-sidenote</code></a> handles the transformation of footnotes into sidenotes.<br />
 <br />
 </span></span> Here’s how you can use them:</p>
-<div class="sourceCode" id="cb1"><pre class="sourceCode markdown"><code class="sourceCode markdown"><a class="sourceLine" id="cb1-1" data-line-number="1">... In print, Tufte has used the proprietary Monotype</a>
-<a class="sourceLine" id="cb1-2" data-line-number="2">Bembo<span class="ot">[^note]</span> font. ...</a>
-<a class="sourceLine" id="cb1-3" data-line-number="3"></a>
-<a class="sourceLine" id="cb1-4" data-line-number="4"><span class="ot">[^note]</span>:</a>
-<a class="sourceLine" id="cb1-5" data-line-number="5">  See Tufte&#39;s comment in the Tufte book fonts thread.</a></code></pre></div>
+<div class="sourceCode" id="cb1"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a>... In print, Tufte has used the proprietary Monotype</span>
+<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a>Bembo<span class="ot">[^note]</span> font. ...</span>
+<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a><span class="ot">[^note]</span>:</span>
+<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a>  See Tufte&#39;s comment in the Tufte book fonts thread.</span></code></pre></div>
 <p>By default, if you use the normal Pandoc syntax for creating footnotes, they’ll become Tufte CSS-style side notes. To get margin notes (i.e., side notes without numbers), just include <code>{-}</code> at the beginning of the note:</p>
 <figure class="fullwidth">
-<div class="sourceCode" id="cb2"><pre class="sourceCode markdown"><code class="sourceCode markdown"><a class="sourceLine" id="cb2-1" data-line-number="1">... If you want a sidenote without footnote-style numberings, then you want a</a>
-<a class="sourceLine" id="cb2-2" data-line-number="2">margin note.<span class="ot">[^mn]</span> On large screens, ...</a>
-<a class="sourceLine" id="cb2-3" data-line-number="3"></a>
-<a class="sourceLine" id="cb2-4" data-line-number="4"><span class="ot">[^mn]</span>:</a>
-<a class="sourceLine" id="cb2-5" data-line-number="5">  {-} This is a margin note. Notice there isn&#39;t a number preceding the note.</a></code></pre></div>
+<div class="sourceCode" id="cb2"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a>... If you want a sidenote without footnote-style numberings, then you want a</span>
+<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a>margin note.<span class="ot">[^mn]</span> On large screens, ...</span>
+<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a><span class="ot">[^mn]</span>:</span>
+<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a>  {-} This is a margin note. Notice there isn&#39;t a number preceding the note.</span></code></pre></div>
 </figure>
 </section>
 <section id="syntax-highlighted-codeblocks" class="level2">
 <h2>Syntax-Highlighted Codeblocks</h2>
 <p>Pandoc Markdown is excellent for styling code blocks. Indeed, you’ve already seen their effect in this document. You can use any of the methods for creating syntax highlighted code blocks Pandoc permits. For example:</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="co"># Compute elements of the mandelbrot set</span></a>
-<a class="sourceLine" id="cb3-2" data-line-number="2"><span class="kw">def</span> mandelbrot(a):</a>
-<a class="sourceLine" id="cb3-3" data-line-number="3">    <span class="cf">return</span> <span class="bu">reduce</span>(<span class="kw">lambda</span> z, _: z <span class="op">*</span> z <span class="op">+</span> a, <span class="bu">range</span>(<span class="dv">50</span>), <span class="dv">0</span>)</a>
-<a class="sourceLine" id="cb3-4" data-line-number="4"></a>
-<a class="sourceLine" id="cb3-5" data-line-number="5"><span class="kw">def</span> step(start, step, iterations):</a>
-<a class="sourceLine" id="cb3-6" data-line-number="6">    <span class="cf">return</span> (start <span class="op">+</span> (i <span class="op">*</span> step) <span class="cf">for</span> i <span class="kw">in</span> <span class="bu">range</span>(iterations))</a>
-<a class="sourceLine" id="cb3-7" data-line-number="7"></a>
-<a class="sourceLine" id="cb3-8" data-line-number="8">rows <span class="op">=</span> ((<span class="st">&quot;*&quot;</span> <span class="cf">if</span> <span class="bu">abs</span>(mandelbrot(<span class="bu">complex</span>(x, y))) <span class="op">&lt;</span> <span class="dv">2</span> <span class="cf">else</span> <span class="st">&quot; &quot;</span></a>
-<a class="sourceLine" id="cb3-9" data-line-number="9">        <span class="cf">for</span> x <span class="kw">in</span> step(<span class="op">-</span><span class="fl">2.0</span>, <span class="fl">.0315</span>, <span class="dv">80</span>))</a>
-<a class="sourceLine" id="cb3-10" data-line-number="10">        <span class="cf">for</span> y <span class="kw">in</span> step(<span class="dv">1</span>, <span class="fl">-.05</span>, <span class="dv">41</span>))</a></code></pre></div>
+<div class="sourceCode" id="cb3"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Compute elements of the mandelbrot set</span></span>
+<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> mandelbrot(a):</span>
+<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="bu">reduce</span>(<span class="kw">lambda</span> z, _: z <span class="op">*</span> z <span class="op">+</span> a, <span class="bu">range</span>(<span class="dv">50</span>), <span class="dv">0</span>)</span>
+<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> step(start, step, iterations):</span>
+<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> (start <span class="op">+</span> (i <span class="op">*</span> step) <span class="cf">for</span> i <span class="kw">in</span> <span class="bu">range</span>(iterations))</span>
+<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a>rows <span class="op">=</span> ((<span class="st">&quot;*&quot;</span> <span class="cf">if</span> <span class="bu">abs</span>(mandelbrot(<span class="bu">complex</span>(x, y))) <span class="op">&lt;</span> <span class="dv">2</span> <span class="cf">else</span> <span class="st">&quot; &quot;</span></span>
+<span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a>        <span class="cf">for</span> x <span class="kw">in</span> step(<span class="op">-</span><span class="fl">2.0</span>, <span class="fl">.0315</span>, <span class="dv">80</span>))</span>
+<span id="cb3-10"><a href="#cb3-10" aria-hidden="true" tabindex="-1"></a>        <span class="cf">for</span> y <span class="kw">in</span> step(<span class="dv">1</span>, <span class="op">-</span><span class="fl">.05</span>, <span class="dv">41</span>))</span></code></pre></div>
 <p>In this document, you’re also seeing the effect of the Solarized color scheme. You can use any of the color schemes Pandoc ships with by default, or this one.</p>
 <p>Another feature Pandoc allows that Tufte Pandoc CSS supports is generating line numbers to accompany a code sample:</p>
-<div class="sourceCode" id="cb4"><pre class="sourceCode numberSource haskell numberLines"><code class="sourceCode haskell"><a class="sourceLine" id="cb4-1" data-line-number="1">merge []         ys                   <span class="fu">=</span> ys</a>
-<a class="sourceLine" id="cb4-2" data-line-number="2">merge xs         []                   <span class="fu">=</span> xs</a>
-<a class="sourceLine" id="cb4-3" data-line-number="3">merge xs<span class="fu">@</span>(x<span class="fu">:</span>xt) ys<span class="fu">@</span>(y<span class="fu">:</span>yt) <span class="fu">|</span> x <span class="fu">&lt;=</span> y    <span class="fu">=</span> x <span class="fu">:</span> merge xt ys</a>
-<a class="sourceLine" id="cb4-4" data-line-number="4">                          <span class="fu">|</span> otherwise <span class="fu">=</span> y <span class="fu">:</span> merge xs yt</a>
-<a class="sourceLine" id="cb4-5" data-line-number="5"></a>
-<a class="sourceLine" id="cb4-6" data-line-number="6">split (x<span class="fu">:</span>y<span class="fu">:</span>zs) <span class="fu">=</span> <span class="kw">let</span> (xs,ys) <span class="fu">=</span> split zs <span class="kw">in</span> (x<span class="fu">:</span>xs,y<span class="fu">:</span>ys)</a>
-<a class="sourceLine" id="cb4-7" data-line-number="7">split [x]      <span class="fu">=</span> ([x],[])</a>
-<a class="sourceLine" id="cb4-8" data-line-number="8">split []       <span class="fu">=</span> ([],[])</a>
-<a class="sourceLine" id="cb4-9" data-line-number="9"></a>
-<a class="sourceLine" id="cb4-10" data-line-number="10">mergeSort []  <span class="fu">=</span> []</a>
-<a class="sourceLine" id="cb4-11" data-line-number="11">mergeSort [x] <span class="fu">=</span> [x]</a>
-<a class="sourceLine" id="cb4-12" data-line-number="12">mergeSort xs  <span class="fu">=</span> <span class="kw">let</span> (as,bs) <span class="fu">=</span> split xs</a>
-<a class="sourceLine" id="cb4-13" data-line-number="13">                <span class="kw">in</span> merge (mergeSort as) (mergeSort bs)</a></code></pre></div>
+<div class="sourceCode" id="cb4"><pre class="sourceCode numberSource haskell numberLines"><code class="sourceCode haskell"><span id="cb4-1"><a href="#cb4-1"></a>merge []         ys                   <span class="ot">=</span> ys</span>
+<span id="cb4-2"><a href="#cb4-2"></a>merge xs         []                   <span class="ot">=</span> xs</span>
+<span id="cb4-3"><a href="#cb4-3"></a>merge xs<span class="op">@</span>(x<span class="op">:</span>xt) ys<span class="op">@</span>(y<span class="op">:</span>yt) <span class="op">|</span> x <span class="op">&lt;=</span> y    <span class="ot">=</span> x <span class="op">:</span> merge xt ys</span>
+<span id="cb4-4"><a href="#cb4-4"></a>                          <span class="op">|</span> <span class="fu">otherwise</span> <span class="ot">=</span> y <span class="op">:</span> merge xs yt</span>
+<span id="cb4-5"><a href="#cb4-5"></a></span>
+<span id="cb4-6"><a href="#cb4-6"></a>split (x<span class="op">:</span>y<span class="op">:</span>zs) <span class="ot">=</span> <span class="kw">let</span> (xs,ys) <span class="ot">=</span> split zs <span class="kw">in</span> (x<span class="op">:</span>xs,y<span class="op">:</span>ys)</span>
+<span id="cb4-7"><a href="#cb4-7"></a>split [x]      <span class="ot">=</span> ([x],[])</span>
+<span id="cb4-8"><a href="#cb4-8"></a>split []       <span class="ot">=</span> ([],[])</span>
+<span id="cb4-9"><a href="#cb4-9"></a></span>
+<span id="cb4-10"><a href="#cb4-10"></a>mergeSort []  <span class="ot">=</span> []</span>
+<span id="cb4-11"><a href="#cb4-11"></a>mergeSort [x] <span class="ot">=</span> [x]</span>
+<span id="cb4-12"><a href="#cb4-12"></a>mergeSort xs  <span class="ot">=</span> <span class="kw">let</span> (as,bs) <span class="ot">=</span> split xs</span>
+<span id="cb4-13"><a href="#cb4-13"></a>                <span class="kw">in</span> merge (mergeSort as) (mergeSort bs)</span></code></pre></div>
 </section>
 <section id="figures-sections" class="level2">
 <h2>Figures &amp; Sections</h2>

docs/tufte-md/index.html

@@ -127,12 +127,12 @@ <h2>Figures</h2>
 <br />
 </span></span> <img src="img/exports-imports.png" alt="Exports and Imports to and from Denmark &amp; Norway from 1700 to 1780" />
 </figure>
-<p><span><label for="sn-6" class="margin-toggle">&#8853;</label><input type="checkbox" id="sn-6" class="margin-toggle"/><span class="marginnote"> <img src="img/rhino.png" alt="Image of a Rhinoceros" /> F.J. Cole, “The History of Albrecht Dürer’s Rhinoceros in Zooological Literature,” <em>Science, Medicine, and History: Essays on the Evolution of Scientific Thought and Medical Practice</em> (London, 1953), ed. E. Ashworth Underwood, 337-356. From page 71 of Edward Tufte’s <em>Visual Explanations</em>.<br />
+<p><span><label for="sn-6" class="margin-toggle">&#8853;</label><input type="checkbox" id="sn-6" class="margin-toggle"/><span class="marginnote"> <img src="img/rhino.png" alt="Image of a Rhinoceros" /> F.J. Cole, “The History of Albrecht Dürer’s Rhinoceros in Zooological Literature,” <em>Science, Medicine, and History: Essays on the Evolution of Scientific Thought and Medical Practice</em> (London, 1953), ed. E. Ashworth Underwood, 337-356. From page 71 of Edward Tufte’s <em>Visual Explanations</em>.<br />
 <br />
 </span></span> But tight integration of graphics with text is central to Tufte’s work even when those graphics are ancillary to the main body of a text. In many of those cases, a margin figure may be most appropriate. To place figures in the margin, just wrap an image (or whatever) in a margin note inside a <code>p</code> tag, as seen to the right of this paragraph.</p>
 <p>If you need a full-width figure, give it the <code>fullwidth</code> class. Make sure that’s inside an <code>article</code>, and it will take up (almost) the full width of the screen. This approach is demonstrated below using Edward Tufte’s English translation of the Napoleon’s March data visualization. From <em>Beautiful Evidence</em>, page 122-124.</p>
 <figure class="fullwidth">
-<img src="img/napoleons-march.png" alt="Figurative map of the successive losses of the French Army in the Russian campaign, 1812-1813" />
+<img src="img/napoleons-march.png" title="fig:" alt="Figurative map of the successive losses of the French Army in the Russian campaign, 1812-1813" />
 </figure>
 </section>
 <section id="code" class="level2">
@@ -162,11 +162,11 @@ <h2>ImageQuilts</h2>
 <p>Tufte CSS provides support for Edward Tufte and Adam Schwartz’s <a href="http://imagequilts.com/">ImageQuilts</a>. See the <a href="http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0003wk">ET forum announcement thread</a> for more on quilts. Some have ragged edges, others straight. Include these images just as you would any other <code>figure</code>.</p>
 <p>This is an ImageQuilt surveying Chinese calligraphy, placed in a full-width figure to accomodate its girth:</p>
 <figure class="fullwidth">
-<img src="img/imagequilt-chinese-calligraphy.png" alt="Image of Chinese Calligraphy" />
+<img src="img/imagequilt-chinese-calligraphy.png" title="fig:" alt="Image of Chinese Calligraphy" />
 </figure>
 <p>Here is an ImageQuilt of 47 animal sounds over and over, in a figure constrained to the main text region. This quilt has ragged edges, but the image itself is of course still rectangular.</p>
 <figure>
-<img src="img/imagequilt-animal-sounds.png" alt="Image of animal sounds" />
+<img src="img/imagequilt-animal-sounds.png" title="fig:" alt="Image of animal sounds" />
 </figure>
 </section>
 <section id="epilogue" class="level2">