Font with Built-In Syntax Highlighting (2024)

Summary

Syntax Highlighting in Hand-Coded Websites The problem I have been trying to identify practical reasons why hand-coding websites with HTML and CSS is so hard (by hand-coding, I mean not relying on frameworks, generators or 3rd party scripts that modify the DOM). Let's say, I want to make a blog. What are the actual things that prevent me from making—and maintaining—it by hand? What would it take to clear these roadblocks? There are many, of course, but for a hand-coded programming oriented blog one of these roadblocks is syntax highlighting. When I display snippets of code, I want to make the code easy to read and understand by highlighting it with colors. To do that, I would normally need to use a complex syntax highlighter library, like Prism or highlight.js. 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. But, I want to write code by hand. I don't want any external scripts to inject things I didn't write myself. Syntax highlighters also add to the overall complexity and bloat of each page, which I'm trying to avoid. I want to keep things as simple as possible. Leveraging OpenType features to build a simple syntax highlighter inside the font This lead me to think: could it be possible to build syntax highlighting directly into a font, skipping JavaScript altogether? Could I somehow leverage OpenType features, by creating colored glyphs with the COLR table, and identifying and substituting code syntax with contextual alternates? <div class="spoilers"> <strong>Yes, it's possible!</strong> <small>...to some extent =)</small> </div> The colors in the HTML snippet above comes from within the font itself, the code is plain text, and requires no JavaScript. To achieve that, I modified an open source font Monaspace Krypton to include colored versions of each character, and then us...