Font with Built-In Syntax Highlighting (2024)

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 ). View from Glyps app. Each alternate character has a different color. 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 used OpenType contextual alternates to essentially find & replace specific strings of text based on HTML, CSS and JS syntax. The result is a simple syntax highlighter, built-in to the font itself. If you want to try it yourself, download the font: FontWithASyntaxHighlighter-Regular.woff2 And include the following bits of CSS: @font-face { font-family: 'FontWithASyntaxHighlighter'; src: url('/FontWithASyntaxHighlighter-Regular.woff2') format('woff2') ; } code { font-family: "FontWithASyntaxHighlighter", monospace; } And that's it! What are the Pros and Cons of this method? This method opens up some interesting possibilities... Pros Install is as easy as using any custom font. Works without JavaScript. Works without CSS themes. ...but can be themed with CSS. It's fast. Snippets of code can be put into <pre> and <code> , with no extra classes or <span> s. Clean HTML source code. Works everywhere that supports OpenType features, like InDesign. Doesn't require maintenance or updating. Works in <textarea> and <input> ! Syntax highlighting inside <textarea> has been previously impossible...

Preview: ~500 words