ray.so No paid content found

To turn a code snippet into a shareable image, paste your code into a code-to-image tool such as ray.so, pick a syntax color theme, choose whether to show the background and whether the window is dark or light, then export the image. This works best for short snippets you want to post on social media, drop into slides, or share in a chat where plain text would lose its formatting. Very long files or code you cannot share publicly are poor fits.

What you need before you start

• A code snippet, ideally short enough to read at a glance (a function, a config block, a few lines of a query).
• A browser. ray.so runs in the browser, so there is nothing to install.
• A destination for the image: a post, a doc, a slide, or a message.

Step-by-step: generate the image

1. Paste or type your code

Open the tool and put your snippet into the editor. Paste from your IDE if you already have the code, or type it directly for short examples. The editor is where the tool reads your code to apply syntax highlighting, so keep the snippet self-contained — avoid cutting a block mid-statement, since partial syntax can throw off the coloring.

Expected result: your code appears in the editor and is highlighted according to the language it detects.

2. Choose syntax colors and a theme

Select from the range of syntax color options the tool offers. This controls how keywords, strings, comments, and other tokens are colored. Pick a theme that keeps enough contrast between the text and the window background — a low-contrast pairing is the most common reason an exported image looks unreadable on a phone.

Expected result: the preview updates to show your chosen color scheme.

3. Toggle the background and the dark/light window

Two independent controls shape the frame around your code:

Expected result: the preview reflects both toggles, so you can judge the final look before exporting.

4. Export the image

Use the export action to render the snippet as an image file. Check the preview at the size you will actually use it — a snippet that looks fine full-screen can become unreadable when scaled down in a feed.

Expected result: an image file you can download and share.

5. Share it

Attach or upload the exported image to your post, doc, slide, or message. Because it is an image, the formatting and colors travel with it instead of depending on the viewer's editor.

Common issues and how to fix them

Colors look wrong or missing. The highlighter may not recognize your language, or the snippet may be an incomplete fragment. Try a complete, syntactically valid block, and re-check the theme selection.

Text is hard to read. Increase contrast between the syntax colors and the window background, and reconsider the dark/light toggle. Test at the final display size, not just in the preview.

The image is too wide or too tall. Trim the snippet to the lines that matter. Long lines push the image wide; many lines push it tall. Both hurt legibility when scaled down.

The background clashes with where you'll post it. Turn the background off and place the image on a surface you control, or switch the window between dark and light to match the destination.

Sensitive code. Anything you paste into a browser-based tool leaves your machine. If the snippet contains secrets, credentials, or proprietary logic you are not cleared to share, redact it or use a different approach.

When this approach fits — and when it doesn't

Use a code-to-image tool when the goal is presentation: a snippet you want people to notice and read without setup. Skip it when the code needs to be copied, searched, or run — an image cannot be selected or executed, so for those cases share the text or a link to a repository instead.

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.