TodayTools

Code to image

Type or paste code, pick a look, and save a beautiful picture of it.

PrivateNo uploadsRuns in your browser

Donate

Looks like TypeScript

Ready looks

Show looks for
PrivateNo uploadsRuns in your browser

How to turn code into a picture

  1. Paste or type your code

    Type right on the picture or paste a snippet. The language and colours are found by itself.

  2. Pick a look

    Start from a ready look, then change the theme, background, window frame, font and spacing.

  3. Point at what matters

    Tap line numbers to spotlight lines, or mark added and removed lines for a code review.

  4. Save or share

    Download a PNG at 1x, 2x or 4x, or an SVG, copy the picture to paste into a chat, or copy a link.

Good to know

  • Click anywhere on the code in the picture to edit it there. Tab adds two spaces.
  • Ctrl+C with nothing selected copies the picture. Ctrl+S downloads the PNG.
  • Keep the code short: 5 to 25 lines read best on a slide or a post.
  • Choose Keep my code under Ready looks to try a look without losing your snippet.
  • Your code and settings stay in this browser, so the page opens where you left off.

Where people use it

  • A post about a coding tip

    Share a short hook or query as a sharp picture that reads well in any feed.

  • Slides for a talk

    Pick Slide 16:9, spotlight the lines you are talking about, and drop it into your deck.

  • Explain a code review

    Show added and removed lines in green and red, so the change is clear at a glance.

  • Docs and blog posts

    Save an SVG that stays sharp at any size and matches your page colours.

  • A mockup for your app

    Put an app screenshot in a phone or laptop frame for the same post.

    Screenshot mockup

Why this one

You type right on the picture, tap line numbers to spotlight them, and one tap fits the code to a post, story or slide.

  • Colours for about 30 languages, found by itself.
  • Edit the code right on the picture.
  • Sizes for posts, stories and slides in one tap.
  • Your code never leaves your device.

What you can change

  • 13 light and dark themes
  • Gradient, soft blend, plain or see-through background
  • Window frame with file name
  • Font, text size and line numbers
  • Spotlight lines and show changes
  • PNG at 1x, 2x or 4x, or SVG

People find this page by searching

  • code to image
  • code screenshot
  • code snippet image
  • beautiful code screenshots
  • code to png
  • syntax highlight image
  • code image generator
  • share code as image
  • code picture for slides
Cite this tool
  • APA
    sdev.in. (n.d.). Code to image [Web tool]. https://www.sdev.in/tools/code-to-image
  • MLA
    "Code to image." sdev.in, https://www.sdev.in/tools/code-to-image.
  • Chicago
    sdev.in. "Code to image." https://www.sdev.in/tools/code-to-image.
  • BibTeX
    @misc{sdev-code-to-image,
  title = {Code to image},
  author = {{sdev.in}},
  howpublished = {\url{https://www.sdev.in/tools/code-to-image}},
  note = {Web tool}
}

Questions people ask

Is my code uploaded anywhere?

No. The picture is drawn in your browser and saved straight to your device. Only the font file is fetched, never your code. A shared link keeps the code after the # sign, a part of a link that browsers do not send to any server.

Which languages get colours?

JavaScript, TypeScript, React, Python, Java, Go, Rust, C, C++, C#, PHP, Ruby, Kotlin, Swift, Dart, SQL, HTML, XML, CSS, JSON, YAML, TOML, shell scripts, PowerShell, Dockerfile, Nginx, GraphQL and Markdown. The language is found by itself as you type, and you can pick it in Text.

How do I make the picture sharp for slides or print?

Choose 2x or 4x in Save. 2x is right for most screens and posts; 4x gives a very large picture for print or big displays. SVG stays sharp at any size.

How do I spotlight a few lines?

Tap a line number on the picture, or type lines like 3-5, 9 in Lines. Those lines get a soft band and the others fade back, so people look where you want.

Can I show a code change, like a review?

Yes. Turn on Show added and removed lines in Lines, then start a line with + for added (green) or - for removed (red).

How do I make a picture for a post or a story?

Open Size and pick Square post, Tall post, Story, Slide 16:9 or Link preview. The code is scaled to fit the frame and centred, ready to post.

Can I share the picture so others can change it?

Copy link puts the code and every setting into the link itself. Whoever opens it sees the same picture and can change it. Nothing is stored on a server.

Donate