{"id":3564,"date":"2024-08-20T12:41:45","date_gmt":"2024-08-20T17:41:45","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3564"},"modified":"2024-08-20T17:04:06","modified_gmt":"2024-08-20T22:04:06","slug":"font-with-built-in-syntax-highlighting","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/font-with-built-in-syntax-highlighting\/","title":{"rendered":"Font with Built-In Syntax Highlighting"},"content":{"rendered":"\n

Syntax highlighting code on the web happens like coloring any other text on the web happens. You wrap the bits of text you want colored uniquely in some element, probably a meaningless <span><\/code>, then select that in CSS and apply a color. Ideally, the span-wrapping happens server-side so client-side JavaScript isn’t tied up doing something so rote, but many of the libraries that help with it are client-side.<\/p>\n\n\n\n

What if… you didn’t need to do span-wrapping at all?! That’s what Heikki Lotvonen has cooked up.<\/a> The colorization happens at the font level<\/em>, that is, via “color fonts”<\/a>, the OpenType feature, and “contextual alternates”. This is loaded with advantages. No client-side JavaScript needed, no extra DOM weight, and no exotic processing of any kind. It works just about like using any other custom font. It’s almost certainly faster than whatever you’re doing now!<\/p>\n\n\n\n

Adam made a demo<\/a> that showcases how CSS can override the colors used, making theming and color modes doable.<\/p>\n\n\n\n\n\n\n\n