Font with Built-in Syntax Highlighting (2024)

Posted11 days agoActive1d ago

california-og

151 points

36 comments

blog.glyphdrawing.clubTech Discussionstory

excitedpositive

Debate

20/100

Design_toolsEditors

Key topics

Design_tools

Editors

The font world just got a whole lot more interesting with the introduction of a font that comes with built-in syntax highlighting, sparking a lively debate about the merits of embedding scripts within fonts. Some commenters, like vbezhenar, questioned the logic of having a font with embedded scripts, while others, such as benrutter, pointed out that the motivation wasn't about reducing bloat, but rather about functionality without JavaScript. The discussion took a fascinating turn with references to llama.ttf, a font that embeds a large language model, and suggestions to embed a Z80 emulator within a font, highlighting the potential for creative and complex applications. As commenters weighed in, it became clear that this innovation has the potential to push the boundaries of what's possible with typography.

Snapshot generated from the HN discussion

Discussion Activity

Very active discussion

First comment

Peak period

Day 1

Avg / period

12.7

Comment distribution38 data points

Loading chart...

Based on 38 loaded comments

Key moments

01Story posted
Dec 23, 2025 at 5:28 AM EST
11 days ago
Step 01
02First comment
Dec 23, 2025 at 7:03 AM EST
2h after posting
Step 02
03Peak activity
36 comments in Day 1
Hottest window of the conversation
Step 03
04Latest activity
Jan 1, 2026 at 1:28 PM EST
1d ago
Step 04

Generating AI Summary...

Analyzing up to 500 comments to identify key contributors and discussion patterns

Discussion (36 comments)

Showing 38 comments

vbezhenar

11 days ago

4 replies

So script inside web page is bad, but script inside font is good? That's interesting definition of bloat. I'd prefer ordinary webpage using locally installed fonts with explicit JavaScript snippet to highlight keywords.

WesolyKubeczek

11 days ago

1 reply

Remember llama.otf?

zappchance

11 days ago

llama.ttf

https://fuglede.github.io/llama.ttf

blauditore

11 days ago

Is it really a script though? IIUC it's more like contextual declaration (e.g. of previous char is X, then use style Y), no?

benrutter

11 days ago

Unless I missed it, the OP doesn't quote reducing bloat as a motivation- more just working without javascript.

I took it to be along the lines of an "easier to work with" type motivation, rather than reducing package sizes.

zahlman

10 days ago

Is the "script" inside the font Turing-complete?

Gracana

11 days ago

1 reply

Perhaps you could add this technology to Z80 sans, to get syntax highlighted Z80 disassembly.

https://github.com/nevesnunes/z80-sans

koct9i

11 days ago

1 reply

And add Z80 emulator as well. Just in case.

ErroneousBosh

11 days ago

Well someone else mentioned llama.ttf which is a font that embeds an llm, using Harfbuzz's WASM engine.

So, you could absolutely write a WASM Z80 emulator and embed it in a font. Whether or not you could make it do anything useful, or how strong your grip on reality would remain after? I don't know.

But it wasn't like you were doing anything else on the days between Christmas and New Year, right?

cyanmagenta

11 days ago

2 replies

I view stuff like this kind of like code that fits into a bootloader or whatever. It’s really more of the technical challenge than to actually solve a problem. The result is much better if you just run a script on your hand-coded file to add syntax highlighting as DOM elements. Still, love seeing stuff like this.

balou23

10 days ago

In a similar vein: font with integrated story-telling LLM [1]

[1] https://fuglede.github.io/llama.ttf/

michaelsshaw

11 days ago

For blogs, I like the site to stay static. This is a neat way to keep it that way. Having your generator do it is better in my opinion though.

spockz

11 days ago

2 replies

Has anyone tried this with PowerPoint yet? Our org is very PowerPoint centric and always struggle a bit with the workflow for code.

Copy pasting from IntelliJ does give colours but none of the other niceties such as kerning or litigation. Screenshots are nice visually but a pain to maintain.

Sayrus

11 days ago

1 reply

From the article cons section:

> It only works where OpenType is supported. Fortunately, that's all major browsers and most modern programs. However, something like PowerPoint doesn't support OpenType.

spockz

10 days ago

[delayed]

layer8

11 days ago

1 reply

*ligatures

Is kerning a thing for monospace fonts?

spockz

10 days ago

Yes, ligatures. No idea where “litigations” came from.

I think there is still some kerning going on where the individual letters are placed closer together and the entire word has the same width so more spacing in between words.

11 days ago

2 replies

This is interesting.

I have yet to see a good web based text editor with syntax highlighting. They all mess with the native search functionality of the browser. Because they can't just use a textarea for the edit area. With this approach, it would be possible.

I wonder how usable a Python version of this would be?

gethly

11 days ago

1 reply

FYI, IDEs and editors too don't use "textarea". Contenteditable essentially makes the web browser work like editor does.

11 days ago

1 reply

Contenteditable plus the CSS Custom Highlight API (which hightlights ranges instead of elements) might indeed allow for a good solution. I have just not seen an editor do it yet.

hyperhello

10 days ago

I built a prototype that does work. https://hypervariety.com/ScriptHighlighter/

onion2k

11 days ago

1 reply

I have yet to see a good web based text editor with syntax highlighting.

I slightly expect you to pull a "no true Scotsman" here and suggest it's actually no good because it doesn't really support mobile browsers very well, but Microsoft's Monaco editor that's driven from VS Code is quite good. https://microsoft.github.io/monaco-editor/

11 days ago

It seems to have the same problems all of the web based editors I have seen have. Either they capture ctrl+f and take away the native search experience. Or they have a broken search experience. This one is in the latter category.

When I hit ctrl+f on that page and type "export":

First it says "1 of 4 matches" but nothing is highlighted.

When I hit enter, it says "2 of 4 matches" and again, nothing is highlighted.

When I hit enter again, it says "3 of 4 matches" and the first match is highlighted.

When I hit enter again, it says "4 of 4 matches" and the second match is highlighted.

TheRealPomax

10 days ago

1 reply

> The colors in the HTML snippet above comes from within the font itself, the code is plain text, and requires no JavaScript.

But then why does the color disappear if I disallow scripts on this page? Are you using JS to load the font in? (if so... why? Web fonts don't need JS to load)

california-ogAuthor

10 days ago

1 reply

Most likely because your JS blocker also blocks custom fonts. It works fine without JS.

TheRealPomax

10 days ago

1 reply

It does not: with JS blocked, the stylesheet for the webfont never gets injected. Even though it shouldn't need injecting in the first place.

california-ogAuthor

10 days ago

1 reply

I'm 100% sure it does. Check again.

TheRealPomax

10 days ago

1 reply

Then you need to curl the URL, pipe it to an .html file, and then search the resulting file for "FontWithASyntaxHighlighter". The only place that has the @font-face rule is inside a <template>, meaning it will do nothing until JS copies that template and puts it in the DOM.

california-ogAuthor

10 days ago

1 reply

That's for the code-editor webcomponent, the rest of the site doesn't use JS.

TheRealPomax

10 days ago

1 reply

Correct. The code editor that has the subscript: "The colors in the HTML snippet above comes from within the font itself, the code is plain text, and requires no JavaScript."

Which doesn't work without JS. So adding the @font-face to the page itself, so that things works even without JS, would be lovely.

california-ogAuthor

10 days ago

You are correct, JS doesn't work without JS. The font does. The site has it.

eichin

1d ago

Hmm, is there a simple way to force chrome to use this for view source and/or Inspect? (didn't see anything in the earlier thread either, but those are the two really obvious places that a font would be a reasonable approach...)

jasonjmcghee

10 days ago

Large discussion from the last time it was posted:

665 points | 137 comments

https://news.ycombinator.com/item?id=41245159

eviks

10 days ago

> I want to keep things as simple as possible.

The whole post proves the opposite is true!

exasperaited

11 days ago

This is a curious sort of hazy modern mirror image of the world of Sinclair computers, that embedded their BASIC parsing in the keyboard driver — that is to say, it essentially wasn't possible to type a syntactically incorrect BASIC program.

zX41ZdbW

11 days ago

> it breaks when your code goes to a newline. there's no way to keep context line to line...

This is a blocker for my applications.

cluckindan

11 days ago

Using a variable font with r, g, b axes for each alt would maybe make it possible to change the colors?

mock-possum

11 days ago

> Works in <textarea> and <input>! Syntax highlighting inside <textarea> has been previously impossible, because textareas and inputs can only contain plain text. This is where the interesting

Interesting indeed! This bit feels like a neat bit of hackery to keep in my back pocket for sure.

View full discussion on Hacker News

ID: 46364131Type: storyLast synced: 12/26/2025, 10:25:31 AM

Want the full context?

Jump to the original sources

Read the primary article or dive into the live Hacker News thread when you're ready.

Open link View on HN