diff --git a/pandoc.cabal b/pandoc.cabal
index 582f95351..c64fc1e50 100644
--- a/pandoc.cabal
+++ b/pandoc.cabal
@@ -155,7 +155,7 @@ Library
   else
     Build-depends: base >= 3 && < 4
   if flag(highlighting)
-    Build-depends: highlighting-kate >= 0.2.3
+    Build-depends: highlighting-kate >= 0.2.7
     cpp-options:   -D_HIGHLIGHTING
   if flag(citeproc)
     Build-depends: citeproc-hs
diff --git a/templates/html.template b/templates/html.template
index c53bbf6d7..da4a1b23e 100644
--- a/templates/html.template
+++ b/templates/html.template
@@ -12,24 +12,24 @@ $if(date)$
 $endif$
 $if(highlighting)$
   <style type="text/css">
-    table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode, table.sourceCode pre { margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; }
-    td.lineNumbers { border-right: 1px solid #AAAAAA; text-align: right; color: #AAAAAA; padding-right: 5px; padding-left: 5px; }
-    td.sourceCode { padding-left: 5px; }
-    pre.sourceCode { }
-    pre.sourceCode span.Normal { }
-    pre.sourceCode span.Keyword { color: #007020; font-weight: bold; } 
-    pre.sourceCode span.DataType { color: #902000; }
-    pre.sourceCode span.DecVal { color: #40a070; }
-    pre.sourceCode span.BaseN { color: #40a070; }
-    pre.sourceCode span.Float { color: #40a070; }
-    pre.sourceCode span.Char { color: #4070a0; }
-    pre.sourceCode span.String { color: #4070a0; }
-    pre.sourceCode span.Comment { color: #60a0b0; font-style: italic; }
-    pre.sourceCode span.Others { color: #007020; }
-    pre.sourceCode span.Alert { color: red; font-weight: bold; }
-    pre.sourceCode span.Function { color: #06287e; }
-    pre.sourceCode span.RegionMarker { }
-    pre.sourceCode span.Error { color: red; font-weight: bold; }
+table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode, table.sourceCode pre 
+   { margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; }
+td.lineNumbers { text-align: right; background-color: #EBEBEB; color: black; padding-right: 5px; padding-left: 5px; } 
+td.sourceCode { padding-left: 5px; }
+pre.sourceCode { }
+pre.sourceCode span.kw { font-weight: bold; } 
+pre.sourceCode span.dt { color: #800000; }
+pre.sourceCode span.dv { color: #0000FF; }
+pre.sourceCode span.bn { color: #0000FF; }
+pre.sourceCode span.fl { color: #800080; }
+pre.sourceCode span.ch { color: #FF00FF; }
+pre.sourceCode span.st { color: #DD0000; }
+pre.sourceCode span.co { color: #808080; font-style: italic; }
+pre.sourceCode span.ot { }
+pre.sourceCode span.al { color: green; font-weight: bold; }
+pre.sourceCode span.fu { color: #000080; }
+pre.sourceCode span.re { }
+pre.sourceCode span.er { color: red; font-weight: bold; }
   </style>
 $endif$
 $for(css)$
diff --git a/templates/slidy.template b/templates/slidy.template
index 9278282dc..a7b2327bb 100644
--- a/templates/slidy.template
+++ b/templates/slidy.template
@@ -14,24 +14,24 @@ $if(date)$
 $endif$
 $if(highlighting)$
   <style type="text/css">
-    table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode, table.sourceCode pre { margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; }
-    td.lineNumbers { border-right: 1px solid #AAAAAA; text-align: right; color: #AAAAAA; padding-right: 5px; padding-left: 5px; }
-    td.sourceCode { padding-left: 5px; }
-    pre.sourceCode { }
-    pre.sourceCode span.Normal { }
-    pre.sourceCode span.Keyword { color: #007020; font-weight: bold; } 
-    pre.sourceCode span.DataType { color: #902000; }
-    pre.sourceCode span.DecVal { color: #40a070; }
-    pre.sourceCode span.BaseN { color: #40a070; }
-    pre.sourceCode span.Float { color: #40a070; }
-    pre.sourceCode span.Char { color: #4070a0; }
-    pre.sourceCode span.String { color: #4070a0; }
-    pre.sourceCode span.Comment { color: #60a0b0; font-style: italic; }
-    pre.sourceCode span.Others { color: #007020; }
-    pre.sourceCode span.Alert { color: red; font-weight: bold; }
-    pre.sourceCode span.Function { color: #06287e; }
-    pre.sourceCode span.RegionMarker { }
-    pre.sourceCode span.Error { color: red; font-weight: bold; }
+table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode, table.sourceCode pre 
+   { margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; }
+td.lineNumbers { text-align: right; background-color: #EBEBEB; color: black; padding-right: 5px; padding-left: 5px; } 
+td.sourceCode { padding-left: 5px; }
+pre.sourceCode { }
+pre.sourceCode span.kw { font-weight: bold; } 
+pre.sourceCode span.dt { color: #800000; }
+pre.sourceCode span.dv { color: #0000FF; }
+pre.sourceCode span.bn { color: #0000FF; }
+pre.sourceCode span.fl { color: #800080; }
+pre.sourceCode span.ch { color: #FF00FF; }
+pre.sourceCode span.st { color: #DD0000; }
+pre.sourceCode span.co { color: #808080; font-style: italic; }
+pre.sourceCode span.ot { }
+pre.sourceCode span.al { color: green; font-weight: bold; }
+pre.sourceCode span.fu { color: #000080; }
+pre.sourceCode span.re { }
+pre.sourceCode span.er { color: red; font-weight: bold; }
   </style>
 $endif$
 $for(css)$
diff --git a/tests/lhs-test.fragment.html+lhs b/tests/lhs-test.fragment.html+lhs
index fec6bb750..5ebfcacbf 100644
--- a/tests/lhs-test.fragment.html+lhs
+++ b/tests/lhs-test.fragment.html+lhs
@@ -1,51 +1,39 @@
-<div id="lhs-test"
-><h1
-  >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
-  ><pre class="sourceCode haskell"
-  ><code
-    ><span class="Special"
-      >&gt; </span
-      ><span class="Function FunctionDefinition"
-      >unsplit ::</span
-      ><span class="Normal NormalText"
-      > (Arrow a) =&gt; (b -&gt; c -&gt; d) -&gt; a (b, c) d</span
-      ><br
-       /><span class="Special"
-      >&gt; </span
-      ><span class="Normal NormalText"
-      >unsplit = arr . </span
-      ><span class="Function"
-      >uncurry</span
-      ><span class="Normal NormalText"
-      >       </span
-      ><br
-       /><span class="Special"
-      >&gt; </span
-      ><span class="Normal NormalText"
-      >          </span
-      ><span class="Comment"
-      >-- arr (\op (x,y) -&gt; x `op` y) </span
-      ><br
-       /></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
-  ><pre
-  ><code
-    >f *** g = first f &gt;&gt;&gt; second g
+<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
+><pre class="sourceCode haskell"
+><code
+  >&gt; unsplit :: (<span class="dt"
+    >Arrow</span
+    > a) =&gt; (b -&gt; c -&gt; d) -&gt; a (b, c) d<br
+     />&gt; unsplit <span class="fu"
+    >=</span
+    > arr <span class="fu"
+    >.</span
+    > <span class="fu"
+    >uncurry</span
+    >       <br
+     />&gt;           <span class="co"
+    >-- arr (\op (x,y) -&gt; x `op` y) </span
+    ><br
+     /></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
+><pre
+><code
+  >f *** g = first f &gt;&gt;&gt; second g
 </code
-    ></pre
-  ><p
-  >Block quote:</p
-  ><blockquote
-  ><p
-    >foo bar</p
-    ></blockquote
-  ></div
+  ></pre
+><p
+>Block quote:</p
+><blockquote
+><p
+  >foo bar</p
+  ></blockquote
 >
diff --git a/tests/lhs-test.html b/tests/lhs-test.html
index 5f015db0f..8370c0594 100644
--- a/tests/lhs-test.html
+++ b/tests/lhs-test.html
@@ -4,73 +4,66 @@
   <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="generator" content="pandoc" />
-  <meta name="date" content="" />
   <style type="text/css">
-    table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode, table.sourceCode pre { margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; }
-    td.lineNumbers { border-right: 1px solid #AAAAAA; text-align: right; color: #AAAAAA; padding-right: 5px; padding-left: 5px; }
-    td.sourceCode { padding-left: 5px; }
-    pre.sourceCode { }
-    pre.sourceCode span.Normal { }
-    pre.sourceCode span.Keyword { color: #007020; font-weight: bold; } 
-    pre.sourceCode span.DataType { color: #902000; }
-    pre.sourceCode span.DecVal { color: #40a070; }
-    pre.sourceCode span.BaseN { color: #40a070; }
-    pre.sourceCode span.Float { color: #40a070; }
-    pre.sourceCode span.Char { color: #4070a0; }
-    pre.sourceCode span.String { color: #4070a0; }
-    pre.sourceCode span.Comment { color: #60a0b0; font-style: italic; }
-    pre.sourceCode span.Others { color: #007020; }
-    pre.sourceCode span.Alert { color: red; font-weight: bold; }
-    pre.sourceCode span.Function { color: #06287e; }
-    pre.sourceCode span.RegionMarker { }
-    pre.sourceCode span.Error { color: red; font-weight: bold; }
+table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode, table.sourceCode pre 
+   { margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; }
+td.lineNumbers { text-align: right; background-color: #EBEBEB; color: black; padding-right: 5px; padding-left: 5px; } 
+td.sourceCode { padding-left: 5px; }
+pre.sourceCode { }
+pre.sourceCode span.kw { font-weight: bold; } 
+pre.sourceCode span.dt { color: #800000; }
+pre.sourceCode span.dv { color: #0000FF; }
+pre.sourceCode span.bn { color: #0000FF; }
+pre.sourceCode span.fl { color: #800080; }
+pre.sourceCode span.ch { color: #FF00FF; }
+pre.sourceCode span.st { color: #DD0000; }
+pre.sourceCode span.co { color: #808080; font-style: italic; }
+pre.sourceCode span.ot { }
+pre.sourceCode span.al { color: green; font-weight: bold; }
+pre.sourceCode span.fu { color: #000080; }
+pre.sourceCode span.re { }
+pre.sourceCode span.er { color: red; font-weight: bold; }
   </style>
 </head>
 <body>
-<div id="lhs-test"
-><h1
-  >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
-  ><pre class="sourceCode haskell"
-  ><code
-    ><span class="Function FunctionDefinition"
-      >unsplit ::</span
-      ><span class="Normal NormalText"
-      > (Arrow a) =&gt; (b -&gt; c -&gt; d) -&gt; a (b, c) d</span
-      ><br
-       /><span class="Normal NormalText"
-      >unsplit = arr . </span
-      ><span class="Function"
-      >uncurry</span
-      ><span class="Normal NormalText"
-      >       </span
-      ><br
-       /><span class="Normal NormalText"
-      >          </span
-      ><span class="Comment"
-      >-- arr (\op (x,y) -&gt; x `op` y) </span
-      ><br
-       /></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
-  ><pre
-  ><code
-    >f *** g = first f &gt;&gt;&gt; second g
+<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
+><pre class="sourceCode haskell"
+><code
+  >unsplit :: (<span class="dt"
+    >Arrow</span
+    > a) =&gt; (b -&gt; c -&gt; d) -&gt; a (b, c) d<br
+     />unsplit <span class="fu"
+    >=</span
+    > arr <span class="fu"
+    >.</span
+    > <span class="fu"
+    >uncurry</span
+    >       <br
+     />          <span class="co"
+    >-- arr (\op (x,y) -&gt; x `op` y) </span
+    ><br
+     /></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
+><pre
+><code
+  >f *** g = first f &gt;&gt;&gt; second g
 </code
-    ></pre
-  ><p
-  >Block quote:</p
-  ><blockquote
-  ><p
-    >foo bar</p
-    ></blockquote
-  ></div
+  ></pre
+><p
+>Block quote:</p
+><blockquote
+><p
+  >foo bar</p
+  ></blockquote
 >
 </body>
 </html>
diff --git a/tests/lhs-test.html+lhs b/tests/lhs-test.html+lhs
index 210054bf6..3df53e1aa 100644
--- a/tests/lhs-test.html+lhs
+++ b/tests/lhs-test.html+lhs
@@ -4,79 +4,66 @@
   <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="generator" content="pandoc" />
-  <meta name="date" content="" />
   <style type="text/css">
-    table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode, table.sourceCode pre { margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; }
-    td.lineNumbers { border-right: 1px solid #AAAAAA; text-align: right; color: #AAAAAA; padding-right: 5px; padding-left: 5px; }
-    td.sourceCode { padding-left: 5px; }
-    pre.sourceCode { }
-    pre.sourceCode span.Normal { }
-    pre.sourceCode span.Keyword { color: #007020; font-weight: bold; } 
-    pre.sourceCode span.DataType { color: #902000; }
-    pre.sourceCode span.DecVal { color: #40a070; }
-    pre.sourceCode span.BaseN { color: #40a070; }
-    pre.sourceCode span.Float { color: #40a070; }
-    pre.sourceCode span.Char { color: #4070a0; }
-    pre.sourceCode span.String { color: #4070a0; }
-    pre.sourceCode span.Comment { color: #60a0b0; font-style: italic; }
-    pre.sourceCode span.Others { color: #007020; }
-    pre.sourceCode span.Alert { color: red; font-weight: bold; }
-    pre.sourceCode span.Function { color: #06287e; }
-    pre.sourceCode span.RegionMarker { }
-    pre.sourceCode span.Error { color: red; font-weight: bold; }
+table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode, table.sourceCode pre 
+   { margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; }
+td.lineNumbers { text-align: right; background-color: #EBEBEB; color: black; padding-right: 5px; padding-left: 5px; } 
+td.sourceCode { padding-left: 5px; }
+pre.sourceCode { }
+pre.sourceCode span.kw { font-weight: bold; } 
+pre.sourceCode span.dt { color: #800000; }
+pre.sourceCode span.dv { color: #0000FF; }
+pre.sourceCode span.bn { color: #0000FF; }
+pre.sourceCode span.fl { color: #800080; }
+pre.sourceCode span.ch { color: #FF00FF; }
+pre.sourceCode span.st { color: #DD0000; }
+pre.sourceCode span.co { color: #808080; font-style: italic; }
+pre.sourceCode span.ot { }
+pre.sourceCode span.al { color: green; font-weight: bold; }
+pre.sourceCode span.fu { color: #000080; }
+pre.sourceCode span.re { }
+pre.sourceCode span.er { color: red; font-weight: bold; }
   </style>
 </head>
 <body>
-<div id="lhs-test"
-><h1
-  >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
-  ><pre class="sourceCode haskell"
-  ><code
-    ><span class="Special"
-      >&gt; </span
-      ><span class="Function FunctionDefinition"
-      >unsplit ::</span
-      ><span class="Normal NormalText"
-      > (Arrow a) =&gt; (b -&gt; c -&gt; d) -&gt; a (b, c) d</span
-      ><br
-       /><span class="Special"
-      >&gt; </span
-      ><span class="Normal NormalText"
-      >unsplit = arr . </span
-      ><span class="Function"
-      >uncurry</span
-      ><span class="Normal NormalText"
-      >       </span
-      ><br
-       /><span class="Special"
-      >&gt; </span
-      ><span class="Normal NormalText"
-      >          </span
-      ><span class="Comment"
-      >-- arr (\op (x,y) -&gt; x `op` y) </span
-      ><br
-       /></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
-  ><pre
-  ><code
-    >f *** g = first f &gt;&gt;&gt; second g
+<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
+><pre class="sourceCode haskell"
+><code
+  >&gt; unsplit :: (<span class="dt"
+    >Arrow</span
+    > a) =&gt; (b -&gt; c -&gt; d) -&gt; a (b, c) d<br
+     />&gt; unsplit <span class="fu"
+    >=</span
+    > arr <span class="fu"
+    >.</span
+    > <span class="fu"
+    >uncurry</span
+    >       <br
+     />&gt;           <span class="co"
+    >-- arr (\op (x,y) -&gt; x `op` y) </span
+    ><br
+     /></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
+><pre
+><code
+  >f *** g = first f &gt;&gt;&gt; second g
 </code
-    ></pre
-  ><p
-  >Block quote:</p
-  ><blockquote
-  ><p
-    >foo bar</p
-    ></blockquote
-  ></div
+  ></pre
+><p
+>Block quote:</p
+><blockquote
+><p
+  >foo bar</p
+  ></blockquote
 >
 </body>
 </html>