Using bat, termshot, and vhs to create snippets of code for blog posts

When I'm sharing my code in a blog post, I have a few tools to get the job done.

Of course I can use an extension in VS Code like polacode but sometimes I'm doing my terminal thing in either the VS Code terminal or in Warp.

Step 0: Installing the tools

We're going to talk about four tools that you can install via homebrew (or chocolatey I hope. Thank you WSL).

brew install \
bat \
ripgrep \
bat-extras \
homeport/tap/termshot\
vhs 

Getting code snippets with bat, batgrep

bat is like cat but better. Basically it's cat with some good features like line-numbering and a lot of things to help you find exactly what you're looking for. I'm probably underutilizing it.

The easiest way of getting all of the code for a specific file is to run bat and the filename. You can even limit which lines you pull using the range command

bat pyproject.toml 0:5

But what if you don't know the file name. This is where you can use batgrep. batgrep uses bat and ripgrep to search for a portion of the code. You can also use B and A to count how many lines you want to add around it.

The following command shows ALL areas where dependencies are called in the pyproject.toml with the following 10 lines.

batgrep "dependencies" pyproject.toml -A=10

With both of these you can append | pbcopy to your command to save the output to your clipboard.

Capturing the output as a screenshot

We've been showing the contents of files but what about the output of commands? You can use termshot to run a command and capture the output as a screenshot.

Here's a capture of the help for render-engine serve

termshot -c -- render-engine serve --help

Recording Commands and output

Earlier I created some gifs of commands being ran. For that I'm using one of the coolest products I've discovered in the last few years and that's vhs.

vhs allows you to run a command and create a tape file that can be used to generate a gif or video of the command being ran.

You can manually create the file using the syntax but I prefer to use the record feature. This creates a new shell where your commands can be recorded. It can also record things like backspaces and Enter keypresses. When you're done type exit and then you are given a tape file. This file can be edited to fix any mistakes and even add some configuration for your output file.

Lastly when you are ready you can run vhs < <YOUR TAPE FILE> to convert it to a gif or mp4 (default is gif).

They also have a server that you can use to upload your tapes to and share them with others.