For a while now, I’ve wanted some way to include richer terminal output in blog posts; I’d like to present longer chunks of output without interfering with the rest of the text, and ideally preserve colours. There’s probably some fairly simple HTML/CSS option to encapsulate the long text in to a smaller view, however the colour preservation seems like it would be pretty hard with my existing blog workflow. Screen recording is one possibility that could satisfy both goals, but typical video formats don’t compress text very well so there would be a tradeoff between file size (and thereby bandwidth that I might have to pay for) and legibility so I haven’t pursued screen recording.

Yesterday, I started a blog post about [fixing a bug] which would be nicely illustrated by something like a terminal video, so I looked around a little and found asciinema which is a really neat option!

Recording terminal output with asciinema output is pretty easy, and so far it hasn’t taken too much effort to get the basics of the web player integrated in to this blog, to enable content like this:

--This would be an asciinema video player if JS were enabled--

The above was recorded using a rather long command:

asciinema rec --tty-size 120x24 --overwrite -c "DEFMT_LOG=debug cargo embed --example=blinky_basic --features=usb" ~/Projects/blog/media/20250404-demo.cast

…but it’ll be easy enough to wrap up the relevant bits in to a shell script/alias. Or, I understand wezterm supports recording asciicast natively; maybe it’s time to try switching away from Alacritty.

To date, the changes to my blog have been absolutely minimal - really just cribbing from the player docs, but there are a number of things to sort out with the blog integration:

  • Only include the asciinema CSS and JS when a post will use it
  • Set up deferred loading of the player JS, and perhaps there’s some way to have the browser download the asciicast file upfront too?
  • Create a Jekyll macro (or whatever it’s called) to make it easier to integrate asciinema recordings in to posts
  • Extend that macro to generate a useful output for people using browsers with JS disabled
  • Figure out how to edit asciicast recordings
  • Is it possible to serve+play compressed asciicast?