CSS for code syntax highlighting #20
Description
The GitHub Markdown renderer produces HTML with classes like this:
<pre>with today_points <span class="pl-k">as</span> (
<span class="pl-k">select</span>
datetime,
mllw_feet
<span class="pl-k">from</span>
tide_predictions
<span class="pl-k">where</span>
<span class="pl-k">date</span>(<span class="pl-s"><span class="pl-pds">"</span>datetime<span class="pl-pds">"</span></span>) <span class="pl-k">=</span> :p0
<span class="pl-k">and</span> <span class="pl-s"><span class="pl-pds">"</span>station_id<span class="pl-pds">"</span></span> <span class="pl-k">=</span> :p1
),
min_max <span class="pl-k">as</span> (
<span class="pl-k">select</span>
<span class="pl-c1">min</span>(mllw_feet) <span class="pl-k">as</span> min_feet,
<span class="pl-c1">max</span>(mllw_feet) <span class="pl-k">as</span> max_feet
<span class="pl-k">from</span>
today_points
),
points <span class="pl-k">as</span> (
<span class="pl-k">select</span>
RANK () OVER (
<span class="pl-k">ORDER BY</span>
datetime
) <span class="pl-k">-</span><span class="pl-c1">1</span> <span class="pl-k">as</span> rank,
<span class="pl-c1">min_max</span>.<span class="pl-c1">min_feet</span>,
<span class="pl-c1">min_max</span>.<span class="pl-c1">max_feet</span>,
mllw_feet,
(
<span class="pl-c1">100</span> <span class="pl-k">*</span> (mllw_feet <span class="pl-k">-</span> <span class="pl-c1">min_max</span>.<span class="pl-c1">min_feet</span>) <span class="pl-k">/</span> (<span class="pl-c1">min_max</span>.<span class="pl-c1">max_feet</span> <span class="pl-k">-</span> <span class="pl-c1">min_max</span>.<span class="pl-c1">min_feet</span>)
) <span class="pl-k">as</span> line_height_pct
<span class="pl-k">from</span>
tide_predictions,
min_max
<span class="pl-k">where</span>
<span class="pl-k">date</span>(<span class="pl-s"><span class="pl-pds">"</span>datetime<span class="pl-pds">"</span></span>) <span class="pl-k">=</span> :p0
<span class="pl-k">and</span> <span class="pl-s"><span class="pl-pds">"</span>station_id<span class="pl-pds">"</span></span> <span class="pl-k">=</span> :p1
<span class="pl-k">order by</span>
datetime
)
<span class="pl-k">select</span>
group_concat(rank <span class="pl-k">||</span> <span class="pl-s"><span class="pl-pds">'</span>,<span class="pl-pds">'</span></span> <span class="pl-k">||</span> line_height_pct, <span class="pl-s"><span class="pl-pds">'</span> <span class="pl-pds">'</span></span>)
<span class="pl-k">from</span>
points</pre>I'd like to add CSS that colours those in sensible ways.