How to Convert a Code Snippet into a Shareable Image with ray.so

ray.so turns a code snippet into a styled image you can export and share. Paste your code into the editor, pick a theme and window style, adjust the layout, then export the rendered result as an image. This works best for short snippets you want to post on social media, in docs, or in chat — not for long files, since the image grows with the code.

Before you start

• Have the code snippet ready to paste, and know which language it's in so the highlighting matches.
• Decide where the image will live (a post, a slide, a README). That tells you whether you want a background, a light or dark window, and how much padding.
• Keep the snippet short. A few dozen lines read well as an image; hundreds do not.

Step-by-step

1. Paste or type your code

Put the snippet into the editor. Check that the syntax highlighting matches your language — keywords, strings, and comments should be colored, not flat text. If the colors look wrong, the language isn't being detected correctly; adjust it before you style anything else, since the theme you pick later depends on it.

2. Choose a color theme

Pick from the available syntax color themes. This controls how the code itself is colored. Choose one with enough contrast that the code stays readable when the image is scaled down in a feed or a slide.

3. Toggle the window and background

• Dark or light window — switches the frame around your code between a dark and light appearance.
• Background — show or hide the colored background behind the window.

If you're posting on a light page, a light window with no background blends in; a dark window with a background stands out. Match this to where the image will appear.

4. Adjust padding, line numbers, and window controls

• Padding — the space around the code inside the frame. More padding gives a calmer, more presentable image; less padding fits more code.
• Line numbers — turn them on if you or your readers need to reference specific lines; turn them off for a cleaner look.
• Window controls — the traffic-light buttons on the frame. Keep them for a familiar editor look, or hide them for a more neutral image.

5. Export the image

Export the rendered snippet as an image and let the file download. Before you post it, open the downloaded file and check:

• The code isn't clipped at the edges.
• Highlighting is present and correct.
• The background is the one you intended (not blank or missing).
• Text is still legible at the size it will be displayed.

Common export problems and fixes

When this is the right tool

Use ray.so when you want a single, self-contained image of a short snippet that looks polished without design work. Skip it when the code is long, when readers need to copy and run it (share a gist or repo instead), or when you need the code to stay searchable and accessible as text.