Highlighted code in slides

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:

Rust code
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);
Bear

A perfectionist? What, you set up highlight.js and called it a day?

Amos

Oh no. No no no.

Amos

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.

Bear

...

Bear

Well.

Bear

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.

The menu when using the Code Syntax plug-in: it goes Extensions, Code Syntax, Colorize Selection as, and I had to zoom out to have it show rust

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.

The default code syntax colors, with a heinous purple for keywords (also bold), a.. greenish blue for everything else? a green that I guess might look decent somewhere else for macros, I don't know. it's a mess. It looks like codemirror or something.

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.

A screenshot of the Rust book, showing some syntax-highlighted code, then an arrow, then the slide, highlighted.

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.

Bear Cool bear's hot tip

On macOS, this operation is named "Paste and match style" and it has the heinous shortcut "Option-Shift-Command-V".

A macOS menu showing the "Paste and Match Style" option

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?

The rest of this article is exclusive!

(JavaScript is required to see this. Or maybe my stuff broke)