December 23, 2025
When fonts throw shade
Font with Built-In Syntax Highlighting (2024)
Colorful code with no scripts—devs cheer, skeptics yell “bloat”, PowerPoint cries
TLDR: A custom font now colorizes code without JavaScript, even inside text boxes, using built‑in font tricks. The community split fast: admirers love the minimalist hack, critics call it “bloat in a different place,” and pros note deal‑breakers like broken line‑to‑line context and no support in PowerPoint.
A developer turned a font into a tiny color wizard, making code glow without any JavaScript or extra HTML. The trick: OpenType font features that swap characters and add color so plain text in <code> boxes looks highlighted. Nerdy? Sure. But the crowd went full popcorn.
The loudest chorus: Isn’t this just bloat in disguise? One commenter snarked that moving logic from the web page to the font is like hiding your laundry in a different closet. Fans clapped for the purity—no Prism, no highlight.js, just a font—and swooned over the surprise bonus: it even works inside text boxes where color usually can’t go. But the party hit a speed bump when a dev pointed out the big gotcha: line breaks kill the magic, so context doesn’t carry across lines. Translation: great demo, shaky for real projects.
Others called it a glorious tech flex—like squeezing code into a bootloader—while practical folks begged, “Just run a script and keep it simple.” One retro soul even asked for Z80 assembly support via Z80 Sans. And corporate warriors asked the saddest question of all: Does it work in PowerPoint? The post itself says no. Cue the tiny violin.
Key Points
- •The author embeds syntax highlighting directly in a font using OpenType features, avoiding JavaScript libraries.
- •Colored glyphs are implemented via the COLR table, and contextual alternates substitute syntax patterns for HTML, CSS, and JavaScript.
- •A downloadable font (FontWithASyntaxHighlighter-Regular.woff2) and minimal CSS enable highlighting for code blocks.
- •Benefits include clean HTML, no extra spans or classes, fast rendering, and support in environments like InDesign and even <textarea>/<input>.
- •Limitations include basic pattern matching, OpenType support requirements, and the need to edit the font to change styles or add languages.