Code to Image

How do you turn a code snippet into a shareable image?

Paste source text into Code, select its Language and Theme, then review the styled preview. Download PNG, JPG or SVG for your article, presentation or message. Unlike a screenshot of your editor window, the card contains the snippet and the appearance settings you choose, including optional line numbers, targeted line highlights and a filename bar.

Try this three-line JavaScript example. Select JavaScript, enable Line numbers, set Start at to 40 and enter 2 in Highlight lines. The visible numbers become 40, 41 and 42, and the return statement receives the highlight. The converter displays the program; it does not run the function or calculate its return value.

function double(value) {
  return value * 2;
}

Choose Width of 800 px and enable Wrap lines. The measured layout stays 800 CSS pixels wide, producing a 1,600-pixel-wide PNG or JPG through the export pixel ratio of 2. SVG uses the measured layout width instead. Image height follows the content and spacing, so width alone does not define an aspect ratio.

Which languages and themes are supported?

The 30 language choices are JavaScript, TypeScript, JSX, TSX, Python, HTML, CSS, SCSS, JSON, YAML, TOML, XML, Markdown, Bash, Dockerfile, SQL, GraphQL, Go, Rust, Java, Kotlin, Swift, Dart, C#, C++, C, PHP, Ruby, Lua and Diff. Language selection is explicit: changing the filename to a different extension does not switch the grammar.

Shiki provides syntax tokenization, with language grammars loaded as needed. The five themes are GitHub Dark, GitHub Light, Dracula, One Dark Pro and Nord. Select a light theme for a light document or a dark theme for a dark slide background, then inspect the actual export. If highlighting fails, the fallback preserves the snippet as plain text with the selected theme's foreground and background colors.

How do line numbers, highlights and diff colors interact?

Start at changes displayed numbering, while Highlight lines uses positions within your pasted snippet. Enter 2,4-5 to mark its second, fourth and fifth lines, regardless of their displayed numbers. Numbering starts between 1 and 9,999; the control normalizes values to whole numbers within that range. Turning numbering off does not disable highlights.

The highlight parser accepts comma-separated numbers and ascending ranges. It removes duplicates, ignores malformed entries and reversed ranges, and clips ranges to the snippet's line count. To show changes, select Diff: a leading + adds a green band and a leading - adds a red band. Prefixes +++ and --- are treated as file headers. Diff bands override a manual highlight on the same line.

Which background and layout settings change the image?

Background offers Purple Blue, Green Blue, Orange Pink, Black and White presets. Select Custom color for a solid background, then enable Second color for a two-color gradient. These settings style the surrounding card; the selected theme still supplies the code panel's colors. Adjust both when matching an article or slide design.

Padding runs from 32 to 80 pixels in steps of 4; Radius runs from 0 to 24 pixels in steps of 2; Font size runs from 12 to 20 pixels in steps of 1. Window chrome toggles the decorative bar and its filename. That filename is a visual label, not the download name: exported files use code-snippet with the format's extension.

Should you export PNG, JPG or SVG?

Choose according to the destination's accepted formats and whether you need pixels or text-based vector output. Copying an image uses PNG; it does not copy an SVG or the original source text.

Code image export differences

Format	Output behavior	What to check
PNG	Raster rendering at pixel ratio 2	Readability at the size readers will see
JPG	Raster rendering at pixel ratio 2, quality 0.95	Fine text edges after JPEG compression
SVG	Vector shapes and real text elements	Font substitution and destination support

SVG uses a system monospace font stack without embedding a font. Its wrapping estimates character width as 0.6 times font size, so do not expect identical line breaks to browser-rendered PNG or JPG. Open the saved SVG in its intended viewer before publishing. For an editable text companion to your image, use Copy code as text.

Why do long lines or mobile previews look different?

Width offers Auto, 600, 800, 1,080 and 1,200 px. With Wrap lines off, the layout expands to accommodate the code up to a 4,000 CSS-pixel cap. A fixed preset therefore does not guarantee a fixed export width unless wrapping is enabled. Lines beyond the cap can be clipped; turn wrapping on or split the snippet before saving.

A small screen scales the card to fit the available preview area. This visual scaling leaves export dimensions intact. Wrapped lines increase height rather than changing the source text. There is no pagination or separate image per function: shorten lengthy snippets into focused examples and inspect the final file rather than assuming every editor-sized file will make a readable card.

How can you share code clearly and protect sensitive text?

Keep the lines needed to explain one idea, and use highlights to direct attention. Include a text alternative alongside the image so readers can copy the code and access it without reading pixels. Add descriptive alt text when embedding the image. For example, describe the function's purpose and highlighted statement rather than repeating only “code screenshot.” Use the Markdown Editor to prepare accompanying prose or the JSON Formatter to format JSON before pasting it here.

Tokenization and rendering happen in your browser; the tool does not execute pasted code. Replace secrets and private identifiers before exporting because there is no automatic redaction. Copy image depends on clipboard support, and device sharing depends on the available sharing interface. A failed copy or unavailable share action does not change your snippet; download the file instead. Sharing the resulting image deliberately sends it to the destination you choose.