While it’s best to use the actual code text in tech blogs, some platforms don’t natively support syntax highlighting. The best solution in this case is to use pre-highlighted images.

There are plenty of tools that let you do this easily, but I like to do things with as little effort as possible. In my opinion, using Raycast + the ray.so extension is by far the fastest way to do this!

What is Raycast?

Raycast is a Spotlight replacement for Macs (sorry Windows users) that also supports adding third-party extensions. These extensions add new and interesting capabilities to the search box that displays when you call Raycast using its keybinding.

For example, I have the @todoist extension enabled and now have a list of different commands when I type “Todoist”.

Creating code images with the ray.so extension

Ray.so is a great website for creating beautiful images of code, and there is a community extension that adds a command directly into Raycast to create a snapshot of whatever code you have selected.

Installing the extension

You can install the extension by using the “Store” command to search the Raycast extension library.

Search for ray.so and install it.

Using the extension

To create an image, highlight some code on your computer, open Raycast using your hotkey, and search for “Generate image”.

Selecting that will open ray.so with your highlighted code! You can edit the code and export the image once you’re satisfied with the result.

Customize the extension settings

Ray.so supports a few themes and has a padding setting on the website. You can set default values for these configurations in the Raycast settings.