Highlighted code in slides
Thanks to my sponsors: Benjamin Röjder Delnavaz, Marcus Brito, Ben Mitchell, Guy Waldman, Shane Lillie, anichno, Lennart Oldenburg, Andy Gocke, ZacJW, Michał Zalewski, johbii, medzernik, Antoine Boegli, Horváth-Lázár Péter, Ahmad Alhashemi, Damir Vandic, Guillaume Demonet, Olly Swanson, Manuel Hutter, Bob Ippolito and 266 more
I have obsessed about this long enough, I think it’s only fair I (and you!) get some content out of it.
When I started writing this article, I was working on my P99 CONF slides. Those slides happen to include some bits of code. And because I’m a perfectionist, I would like this code to be syntax highlighted, like this:
let addr: SocketAddr = config.address.parse()?;
let ln = TcpListener::bind(&addr).await?;
info!("🦊 {}", config.base_url);
Not like this:
let addr: SocketAddr = config.address.parse()?;
let ln = TcpListener::bind(&addr).await?;
info!("🦊 {}", config.base_url);
A perfectionist? What, you set up highlight.js and called it a day?
Oh no. No no no.
I have my own blog engine with my own Markdown processing pipeline that calls out to my tree-sitter, using my own builds of a collection of grammars I’ve collected over the years like a poet collects rhymes, and then I generate compact HTML markup so that your browser doesn’t explode at the mere sight of one of my articles.
…
Well.
We all have hobbies.
Unfortunately, most of the time, I see either:
- Code as text (no colors)
- Screenshots of their code editor (big files, looks crap on high-density displays)
A few weeks ago, I started looking for better options, because surely someone else was bothered by this — there are dozens of us! Dozens!
Not invented here
And I found… some plug-ins for Google Slides (most of them only work on Google Docs, a different product) that take SEVERAL SECONDS to highlight one block of code, since the plug-in code appears to run on-demand on a shared coffee maker in Mountain View.
Oh and it looks absolutely dreadful because, to be fair, colors are hard, but to be real, most developers have absolutely no sense of style.
But then I noticed something.
When you copy text from a web page… and you paste it into Google Slides… it retains some of its formatting.
In fact, I’ve known that forever. Everyone knows that. It’s a really annoying feature: you have to do “clear formatting” after pasting, or you have to remember whichever keyboard combination pastes without formatting.
On macOS, this operation is named “Paste and match style” and it has the heinous shortcut “Option-Shift-Command-V”.
Bright side? Free finger yoga!
We have to go out of our way to make sure that pasting doesn’t retain style.
The problem is… it retains a bit too much. It retains font-size for example, and it retains background color, but only sometimes? Which is something you almost definitely never want.
But if you were to feed it carefully-formatted HTML… HTML generated only for the purpose of being pasted into Google Slides, then maybe… it could work?
