FIRST CHTools

FIRST CH TOOLS / Images / 79 CODE IMAGE

Code to Image

Turn a pasted code snippet into a PNG with syntax highlighting, a window-style frame, padding, rounded corners, a shadow and a background — ready to drop into a blog post, a social feed or a slide. Japanese and other wide characters stay aligned. Everything happens inside your own browser.

Code

Background

Shape

Export

How to Use

  1. Paste your codePaste it into the box, or load a text file with "Open a file" or drag and drop. The language is detected automatically; if the guess is wrong, pick it from the list.
  2. Style itChoose the colour theme (dark or light), font size and line numbers, then a background swatch, padding, corner radius and shadow. If you know where it is going, set the canvas ratio (16:9, 1:1 and so on) too.
  3. Export"Save PNG" downloads the file and "Copy image" puts it on the clipboard, ready to paste into Slack, X or Google Slides.

About This Tool

A screenshot of your editor drags in panels, tabs and whatever font size you happened to be using. This tool redraws the code as text and wraps it in a background, padding and a window-style frame instead. The title bar can show a file name (or nothing), line numbers are optional, and long lines can wrap at 40 to 100 columns. If you copied a block from the middle of a function, "Remove common indentation" pulls it back to the left edge.

Highlighting uses the copy of highlight.js already bundled for Marp Slides. It is about 600 KB, so the first sample ships pre-highlighted and the highlighter is only downloaded once you change the code or the language (after that the browser cache serves it). Auto-detect chooses among 24 common languages; for very short snippets, pick the language yourself. Code is drawn in IBM Plex Mono, with your device's Japanese font filling in for characters it lacks. Each coloured segment is measured at its real width, so wide Japanese comments never push the following characters out of place.

Drawing happens on a browser Canvas and your code is never sent to a server. The background, shadow and canvas-ratio handling is the same as the Screenshot Frame & Background Maker, so code images and framed screenshots match side by side. To shrink the exported PNG use the WebP Converter; to compare two versions of the code use the Diff Checker.

Style settings can also be passed as URL parameters (the code itself is always pasted locally). For example /en/code-image/?lang=python&theme=light&fs=16&ln=1&title=main.py&bg=gradient&c1=%231f2a44&c2=%234b6cb7&ratio=16:9 (lang=auto,none,javascript,python… / theme=dark,light / fs=10–28 / ln=1,0 (line numbers) / dedent=1,0 / wrap=0,40,60,80,100 / frame=window,none / title=file name / bg=gradient,solid,none / c1, c2=colours / angle=degrees / pad, radius=px / shadow=0–100 / ratio=auto,16:9,1.91:1,4:3,1:1,4:5,9:16 / scale=1,2,3).

Other Tools