Get the latest tech news
Font with Built-In Syntax Highlighting
An experiment in javascript-free syntax highlighting, made possible by opentype contextual alternates and COLR table
These scripts work by scanning and chopping up the code into small language-specific patterns, then wrapping each part in tags with special styling that creates the highlighted effect, and then injecting the resulting HTML back into the page. To achieve that, I modified an open source font Monaspace Krypton to include colored versions of each character, and then used OpenType contextual alternates to essentially find & replace specific strings of text based on HTML, CSS and JS syntax. As a demo, I made this tiny HTML, CSS & JS sandbox, with native undo and redo, in a single,~200 line web component.
Or read this on Hacker News