Use skylighting 0.4.2.

This prevents the problem with extra space around highlighted
code blocks (closes #3996).

Note that we no longer put an enclosing div around highlighted
code blocks.  The pre is the outer element, just as for unhighlighted
blocks.

2 files changed, 10 insertions, 12 deletions

diff --git a/test/lhs-test.html b/test/lhs-test.html
index 4d032c8e3..28cfdf7a4 100644
--- a/test/lhs-test.html
+++ b/test/lhs-test.html
@@ -12,7 +12,6 @@
       .column{display: inline-block;}
   </style>
   <style type="text/css">
-div.sourceCode { overflow-x: auto; }
 div.sourceLine, a.sourceLine { display: inline-block; min-height: 1.25em; }
 a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
 .sourceCode { overflow: visible; }
@@ -21,9 +20,9 @@ code.sourceCode { white-space: pre; }
 code.sourceCode { white-space: pre-wrap; }
 div.sourceLine, a.sourceLine { text-indent: -1em; padding-left: 1em; }
 }
-.numberSource div.sourceLine, .numberSource a.sourceLine
+pre.numberSource div.sourceLine, .numberSource a.sourceLine
   { position: relative; }
-.numberSource div.sourceLine::before, .numberSource a.sourceLine::before
+pre.numberSource div.sourceLine::before, .numberSource a.sourceLine::before
   { content: attr(data-line-number);
     position: absolute; left: -5em; text-align: right; vertical-align: baseline;
     border: none; pointer-events: all;
@@ -31,7 +30,7 @@ div.sourceLine, a.sourceLine { text-indent: -1em; padding-left: 1em; }
     -khtml-user-select: none; -moz-user-select: none;
     -ms-user-select: none; user-select: none;
     padding: 0 4px; width: 4em; }
-.numberSource pre.sourceCode { margin-left: 3em; border-left: 1px solid #aaaaaa; color: #aaaaaa;  padding-left: 4px; }
+pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; color: #aaaaaa;  padding-left: 4px; }
 @media screen {
 a.sourceLine::before { text-decoration: underline; color = initial; }
 }
@@ -73,9 +72,9 @@ code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Infor
 <h1 id="lhs-test">lhs test</h1>
 <p><code>unsplit</code> is an arrow that takes a pair of values and combines them to
 return a single value:</p>
-<div class="sourceCode"><pre class="sourceCode literate haskell"><code class="sourceCode haskell"><div class="sourceLine" id="1" href="#1" data-line-number="1"><span class="ot">unsplit ::</span> (<span class="dt">Arrow</span> a) <span class="ot">=&gt;</span> (b <span class="ot">-&gt;</span> c <span class="ot">-&gt;</span> d) <span class="ot">-&gt;</span> a (b, c) d</div>
+<pre class="sourceCode literate haskell"><code class="sourceCode haskell"><div class="sourceLine" id="1" href="#1" data-line-number="1"><span class="ot">unsplit ::</span> (<span class="dt">Arrow</span> a) <span class="ot">=&gt;</span> (b <span class="ot">-&gt;</span> c <span class="ot">-&gt;</span> d) <span class="ot">-&gt;</span> a (b, c) d</div>
 <div class="sourceLine" id="2" href="#2" data-line-number="2">unsplit <span class="fu">=</span> arr <span class="fu">.</span> uncurry</div>
-<div class="sourceLine" id="3" href="#3" data-line-number="3">          <span class="co">-- arr (\op (x,y) -&gt; x `op` y)</span></div></code></pre></div>
+<div class="sourceLine" id="3" href="#3" data-line-number="3">          <span class="co">-- arr (\op (x,y) -&gt; x `op` y)</span></div></code></pre>
 <p><code>(***)</code> combines two arrows into a new arrow by running the two arrows on a
 pair of values (one arrow on the first item of the pair and one arrow on the
 second item of the pair).</p>
diff --git a/test/lhs-test.html+lhs b/test/lhs-test.html+lhs
index 2f57b627b..f7a8302a4 100644
--- a/test/lhs-test.html+lhs
+++ b/test/lhs-test.html+lhs
@@ -12,7 +12,6 @@
       .column{display: inline-block;}
   </style>
   <style type="text/css">
-div.sourceCode { overflow-x: auto; }
 div.sourceLine, a.sourceLine { display: inline-block; min-height: 1.25em; }
 a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
 .sourceCode { overflow: visible; }
@@ -21,9 +20,9 @@ code.sourceCode { white-space: pre; }
 code.sourceCode { white-space: pre-wrap; }
 div.sourceLine, a.sourceLine { text-indent: -1em; padding-left: 1em; }
 }
-.numberSource div.sourceLine, .numberSource a.sourceLine
+pre.numberSource div.sourceLine, .numberSource a.sourceLine
   { position: relative; }
-.numberSource div.sourceLine::before, .numberSource a.sourceLine::before
+pre.numberSource div.sourceLine::before, .numberSource a.sourceLine::before
   { content: attr(data-line-number);
     position: absolute; left: -5em; text-align: right; vertical-align: baseline;
     border: none; pointer-events: all;
@@ -31,7 +30,7 @@ div.sourceLine, a.sourceLine { text-indent: -1em; padding-left: 1em; }
     -khtml-user-select: none; -moz-user-select: none;
     -ms-user-select: none; user-select: none;
     padding: 0 4px; width: 4em; }
-.numberSource pre.sourceCode { margin-left: 3em; border-left: 1px solid #aaaaaa; color: #aaaaaa;  padding-left: 4px; }
+pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; color: #aaaaaa;  padding-left: 4px; }
 @media screen {
 a.sourceLine::before { text-decoration: underline; color = initial; }
 }
@@ -73,9 +72,9 @@ code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Infor
 <h1 id="lhs-test">lhs test</h1>
 <p><code>unsplit</code> is an arrow that takes a pair of values and combines them to
 return a single value:</p>
-<div class="sourceCode"><pre class="sourceCode literate literatehaskell"><code class="sourceCode literatehaskell"><div class="sourceLine" id="1" href="#1" data-line-number="1"><span class="ot">&gt; unsplit ::</span> (<span class="dt">Arrow</span> a) <span class="ot">=&gt;</span> (b <span class="ot">-&gt;</span> c <span class="ot">-&gt;</span> d) <span class="ot">-&gt;</span> a (b, c) d</div>
+<pre class="sourceCode literate literatehaskell"><code class="sourceCode literatehaskell"><div class="sourceLine" id="1" href="#1" data-line-number="1"><span class="ot">&gt; unsplit ::</span> (<span class="dt">Arrow</span> a) <span class="ot">=&gt;</span> (b <span class="ot">-&gt;</span> c <span class="ot">-&gt;</span> d) <span class="ot">-&gt;</span> a (b, c) d</div>
 <div class="sourceLine" id="2" href="#2" data-line-number="2"><span class="ot">&gt;</span> unsplit <span class="fu">=</span> arr <span class="fu">.</span> uncurry</div>
-<div class="sourceLine" id="3" href="#3" data-line-number="3"><span class="ot">&gt;</span>           <span class="co">-- arr (\op (x,y) -&gt; x `op` y)</span></div></code></pre></div>
+<div class="sourceLine" id="3" href="#3" data-line-number="3"><span class="ot">&gt;</span>           <span class="co">-- arr (\op (x,y) -&gt; x `op` y)</span></div></code></pre>
 <p><code>(***)</code> combines two arrows into a new arrow by running the two arrows on a
 pair of values (one arrow on the first item of the pair and one arrow on the
 second item of the pair).</p>