lisp – Upon my shoulder http://www.uponmyshoulder.com/blog // TODO: insert witty tagline Tue, 20 Jun 2017 20:25:30 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.8 An interesting CSS hack for highlighting S-expressions http://www.uponmyshoulder.com/blog/2011/an-interesting-css-hack-for-highlighting-s-expressions/ http://www.uponmyshoulder.com/blog/2011/an-interesting-css-hack-for-highlighting-s-expressions/#respond Tue, 28 Jun 2011 21:57:13 +0000 http://www.uponmyshoulder.com/blog/?p=451 Continue reading An interesting CSS hack for highlighting S-expressions]]> The Community-Scheme-Wiki has a pretty interesting way of highlighting lispy code

Scheme being a Lisp dialect, it makes sense to highlight the S-expressions, i.e. “things between parenthesis”. The Community Scheme Wiki does exactly that. As you move your mouse over the code, it will highlight the s-expression you’re in and the ones around in different colors, allowing you to quickly make sense of the code.

An example can be found on this page, which renders like this as you move your mouse:

basic highlighting

half highlighting

full highlighting

How do they do this, you ask? Let’s check the HTML:

<span class="comment">;;; SAFE? tests if the queen in a file is safe from attack.</span>

<span class="paren">(<span class="keyword">define</span> <span class="paren">(safe? file board)</span>

    <span class="paren">(<span class="keyword">define</span> <span class="paren">(get-queen-by-file file board)</span>

        <span class="paren">(find-first <span class="paren">(<span class="keyword">lambda</span> <span class="paren">(queen)</span>

                <span class="paren">(= <span class="paren">(queen-file queen)</span> file)</span>)</span>

            board)</span>)</span>

(Tags linking to documentation were removed for clarity’s sake)

Nothing particularly fishy going on here. We can only see that each S-expression is wrapped into a span of the paren class.

So what is that class? Let’s dig into the CSS:

/* The paren stuff */



/* Top level */

PRE.scheme > SPAN.paren:hover { background-color: #FFCFCF }



/* Paren level 1 */

PRE.scheme > SPAN.paren

> SPAN.paren:hover { background-color: #CFFFCF }



/* Paren level 2 */

PRE.scheme > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #CFCFFF }



/* Paren level 3 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #CFFFFF }



/* Paren level 4 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #FFCFFF }



/* Paren level 5 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #FFFFCF }



/* Paren level 6 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren

> SPAN.paren:hover { background-color: #B4E1EA }



/* Paren level 7 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #BDEAB4 }



/* Paren level 8 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #EAD4B4 }



/* Paren level 9 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #F4D0EC }



/* Paren level 10 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #D0D9F4 }



/* Paren level 11 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren

> SPAN.paren:hover { background-color: #FFCFCF }



/* Paren level 12 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #CFFFCF }



/* Paren level 13 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #CFCFFF }



/* Paren level 14 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #CFFFFF }



/* Paren level 15 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #FFCFFF }



/* Paren level 16 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren

> SPAN.paren:hover { background-color: #FFFFCF }



/* Paren level 17 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #BDEAB4 }



/* Paren level 18 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #EAD4B4 }



/* Paren level 19 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #F4D0EC }



/* Paren level 20 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #D0D9F4 }



/* Paren level 21 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren

> SPAN.paren:hover { background-color: #FFCFCF }



/* Paren level 22 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #CFFFCF }



/* Paren level 23 */

PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren

> SPAN.paren:hover { background-color: #CFFFCF }



PRE.scheme > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren > SPAN.paren

           > SPAN.paren > SPAN.paren > SPAN.paren

> SPAN.paren:before { content: "{{23 levels of indentation?! Yiakes!}}" }



/* extend here if more nestings are needed */

So they are actually using the fact that CSS can recognize whether a class is nested into the same class, and display it in a different manner for each level when you :hover over that span. The interesting part is that the browser also keeps the S-expressions under the current hovered one highlighted in their specific color.

Hats off!

]]> http://www.uponmyshoulder.com/blog/2011/an-interesting-css-hack-for-highlighting-s-expressions/feed/ 0