Font with Built-In Syntax Highlighting

What a fun hack!

One small note: the post seems slightly confused about the use of OpenType features, as it calls for:

    font-feature-settings: "colr", "calt";

but there's no 'colr' feature tag in the font's OpenType layout tables, so that's meaningless here.

I suppose this was intended to "activate" the color glyph table (COLR) in the font; but that isn't an OpenType layout feature that would be controlled by font-feature-settings, and doesn't need to be "turned on" like this.

(In addition, the 'calt' feature is (according to the spec[1]) supposed to be active by default, so it shouldn't be necessary to explicitly set it either. And indeed, the font works for me in both Firefox and Chrome without this rule; sadly Safari doesn't seem to handle it.)

[1] https://learn.microsoft.com/en-gb/typography/opentype/spec/f...

This is a horrible, horrible hack and it's terrifying and I am aghast at how amazing this is. Such a wonderful abuse of OpenType contextual alternatives. Well done and thank you for sharing!!

I think the author has underestimated the power of the substitution rules - it looks like it should be possible to drag a state machine along, hence recognise any regular language. Something like the following should handle quoted strings (untested and needs every character to be listed out in the definitions of @Char, @CharQuoted and @NonQuoteQuoted):

    sub Quote @Char' by @CharQuoted;
    sub Backslash.quoted Backslash' by Backslash.quoted2;
    sub Backslash.quoted Quote' by Quote.escaped;
    sub [@NonQuoteQuoted Quote.escaped Backslash.quoted2] @Char' by @CharQuoted;

I don't know if context can be carried between different lines.

Kudos * 1000 ! ! !

Impossible before. It can't be less invasive: _original text stays intact_ - no wrapping tags.. no JS.. just works with userContent.css.. - simply another dimension.

> I'm also not an OpenType expert, so I'm sure the substitution logics could be improved upon. I'm open to sharing the modified source file to anyone interested. If you have any ideas, suggestions or feedback, let me know. You can reach me at hlotvonen@gmail.com.

- so, how far can it be improved then ?!

- what other font editors moreover to Glyph (mac only) have good support for advanced contextual alternates ?

Really a minor nitpick, but "It's as fast as plain text, because it is plain text" is definitely not true. Evaluating all these rules when shaping the text is not gonna be cheap, and if you overuse this type of font your end users' CPUs will probably be screaming. As would anyone who's implemented parts of the OpenType spec from scratch before. Worse still, this doesn't just impact rendering, since the output of shaping determines how big elements in the document are, so things like scrolling and window resizing and text selection can all lag.

Really fun to see a font that can do this though. Never would've expected it.

I find it amusing that the motivation for creating a complex font program that supports syntax highlighting internally is the desire to avoid a complex syntax highlighter JavaScript library. The complexity is still there; it's just been moved around.

Edit: Perhaps this is a reminder that custom fonts are a potential attack vector for security-sensitive websites since font rendering runs highly-complex programs, probably in a language that isn't memory safe.

If you read to the end, the page footer has this nice message:

  > This site doesn't use cookies or link to any third party site.

I love this. Thank you!

This seems like something that could be automated with code? It feels like a genuinely useful way of solving highlighting for most common use cases.

This is actually really cool. I can see the usages in textarea and inputs but also even in plain HTML documents for large code formatting. No need for exploding the DOM with tons of spans and other HTML tags, if you can have the hardware accelerated font rendering software take care of everything. I’d imagine that would save lots of memory and CPU.

I imagine you'd want to have something that works like a parser generator up front to create the rules. What's not clear to me however is how expressive the rules are.

Great hack. Note that it's approx the same size as baseline highlight.js at ~45kB. However it has the great benefit of functioning in contexts where javascript is disabled, at the cost of runtime configurability and narrower language support.

There seems to be a bug in Chromium-based browsers where, if you type e.g. `color: blue` in the textarea, it only highlights the r before the colon, rather than the whole property name. If you copy+paste the text instead, it works properly. (Still, that doesn't detract from this being really cool, of course!)

Just converted MonaspaceKrypton-SyntaxHighlighter-Regular.woff2 with FontCreator to .otf (or .ttf) and installed it in the system, then in Firefox changed about:preferences -> fonts -> monospace to Monaspace Krypton, unchecked Allow pages to choose their own fonts .. - and now I have:

*every* monospace text in the browser *syntax colored * :)

(as expected.. wherever it does make sense or not.. - viewsource, text files, parts of pages.. :)

Great idea! No need to use Hightlight.js, Prism.js or CSS Custom Highlight API for syntax highlighting.

Could anybody make an online tool to choose another monospace font, programming language and color theme, and generate a syntax-highlighted font?

Would this work if the font was used in a PDF typeset using LaTeX? (EDIT: when running on top of a TeX engine which can access OpenType, or some other tool (such as InDesign)?)

Sometimes you end up with code in one language that has string literals which contain code in another language.

It would be so cool if you could override the contextual language (likely determined by file extension or explicitly in markdown or whatever) with a different one just by applying a font.

How is this syntax highlighting? If you put "<div>" in quotes as string, it's still green instead of white. Proper syntax highlighting must account for both languages and content in context, which can't be done with just a bunch of simple static rules.

This is amazing and seems to just work, the only gotcha I see is that you'd need different versions of the font for different background colors

This is the coolest thing I've seen in a very long time.

> However, eg. PowerPoint doesn't support OpenType (as far as I know).

Ironically, it is Microsoft which developed CPAL/COLR (at least intially), and this is the least atrocious format across colored suggestions. The other options are SVG-in-OpenType (Adobe/Mozilla; https://helpx.adobe.com/fonts/using/ot-svg-color-fonts.html), PNG-in-OpenType/SBIX (Apple; https://developer.apple.com/fonts/TrueType-Reference-Manual/...), and CustomBitmap-in-OpenType/CBDT (Google; https://fonts.google.com/noto/use).

All of them are now OpenType standards, for better or worse.

it seems like you should be able to use the same pattern you do for searching for keywords to handle string sections and comments, by assigning a .instring or .incomment state and having all characters check the prior character for .instring or .incomment and replacing itself with its .instring or .incomment variant as appropriate

Can't you just make a single-word ligature and manipulate its appearance, instead of chaining single letters?

So Con #3 makes it rather unusable

>For example, words within <p> tags that are JS keywords will be always highlighted

Cannot be themed or customized without regenerating the font.

Can be used when syntax highlighting is not available.

Imagine inputting syntax highlighted code while running inference w LLMs? Currently its hard to read what's in your text area when asking ChatGPT a code question.

This is the most interesting post in a long time, bravo!

This is incredibly awesome. Looking forward to seeing this but with a nicer typeface (maybe Inconsolata or JetBrains Mono). I can actually see a lot of uses for this-- just displaying JSON in a nice way easily would be handy.

BTW, I'm not sure why it says adding syntax highlighting to a <textarea> is impossible -- as the linked post says, you can turn the text invisible and add styled text in a separate div at the same position.

I wonder if the author has experience with Excel, because some of those substitution "monstrosities" look similar to some monstrosities I've created with Excel formulas! Good work, this is an awesome hack.

Love how crazy this is. Small nit that shouldn't take away from the enjoyment - one downside not mentioned is that brackets aren't colour-coded based on depth, something I find very useful in my IDE.

Really cool. Your demo would have been even better if you add contenteditable on there so the user can edit and see how it works:

<pre contenteditable="plaintext-only" class=""><code>...

I really like the idea of the hack, but I couldn't bring myself to actually load the webpage - thinking of crazy font-code exfiltrating all of my emails that have ligatures.

Really awesome work, @california-og!

I would love to see separate fonts for HTML, CSS, and JS only, as I would want to use it for lightweight HTML highlighting in textareas in a CMS.

Would like to see a Harfbuzz WASM implementation for this :)

Could be useful for presentations :)

Really cool! I can’t wait to try it on a blog using the techniques mentioned, nifty.

Damn, I was so excited to see Monaspace, but they used Krypton instead of Xenon.

This is wild! It’s always mind blowing how people is hacking HTML/CSS.

Great explanation, never knew this was possible

very cool!

does anyone know the original target of this OpenType feature? Struggling to imagine where it would fit apart from code highlighting

The design of this blog post is lovely! Despite seemingly having no right to be. It goes against all of my design instincts, but it somehow nails a vibe while remaining pleasant and easy on the eyes. I love it!

That this can even be done is absolutely atrocious.

I heard about security issues related to fonts and wondered “how in the world”. This helps clarify why.

It simply should not be possible.

Bloody hell, mate. This is ridiculously smart. Crazy clever hack.

cool

Fonts are awesome, I once made a font that embeds (guitar) chords as ligatures, so when you write the they “stick” to the words they belong to.

https://tunetype.com

As an experiment, it is awesome. We should strive to push the limits of technology and try new things. Kudos. I tip my hat to the creativity.

As something practical, the author started with the wrong tool for the job (JavaScript), and then used an even more wrong tool for the same job (The font itself!)

Just use a code editor with Syntax Highlighting! Vim solved this decades ago!

Very interesting read, but don't try this at home.

Edit: Pandora's box is opened, I can see Jira and GitHub rushing to add support for this on their websites starting tomorrow =)

I’d make a font with a colored red squiggle over the apostrophe, because so many people misuse apostrophe’s. Cough.