DEV Community

Cover image for The easiest way to create code images
Brian Morrison II
Brian Morrison II

Posted on

1

The easiest way to create code images

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”.

Raycast searching for

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.

Raycast searching for

Search for ray.so and install it.

Raycast searching for

Using the extension

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

Raycast searching for

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.

The ray.so website with the higlighted code in it

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.

The Raycast extension settings filtered with ray.so

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more