search

simonw / til

Today I Learned
https://til.simonwillison.net
Apache License 2.0
1.02k stars 81 forks source link

CSS for code syntax highlighting #20

Closed simonw closed 3 years ago

simonw commented 3 years ago

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.

simonw commented 3 years ago

https://github.com/primer/github-syntax-theme-generator looks like the thing.

simonw commented 3 years ago

https://github.com/primer/github-syntax-light/blob/master/lib/github-light.css - it's MIT licensed.

simonw commented 3 years ago

Done: https://til.simonwillison.net/til/til/javascript_dynamically-loading-assets.md