Try it Live
Download Free
Free

Code Shot

Turn code into a gorgeous, share-ready image - syntax highlighting, editor themes, window frames and diff highlighting - then drop it into your design as a re-editable layer.
Try the live demo
Documentation
Extension

Beautiful, share-ready images of your code - highlighted locally, dropped in as a layer.

Plain code is awkward to share and easy to mangle: a screenshot of your editor looks messy, and pasted text loses everything that made it readable. Code Shot turns a snippet into a clean, framed image you can post anywhere – and drops it straight into your design.

Paste your code or import a file, and it is highlighted locally in your browser – auto-detected across 29 languages, from JavaScript, TypeScript and PHP to Python, Go, Rust and SQL. Pick from nine editor themes (Dracula, One Dark, GitHub, Nord, Tokyo Night and more), add a macOS-style window with a title, line numbers, a gradient or solid background and a soft shadow.

Make the point land. Highlight the lines that matter and dim the rest with focus mode, or switch on diff mode to tint added and removed lines green and red. Frame the result to a social-ready ratio – 16:9, square, or a 9:16 story – and copy it to your clipboard in one click.

Every code shot lands as a re-editable layer; reopen it anytime via Edit Code Shot to change the code, the theme or the frame. It also understands dynamic content: bind the code or the title to your post fields with {{…}} tokens, and the image re-renders per post for dynamic featured images. Nothing is uploaded – the highlighting runs entirely in your browser.

Features

Local syntax highlighting

Paste or import code and it is highlighted in your browser across 29 languages, with auto-detection. Nothing is uploaded.

Features

Nine themes and window frames

Dracula, One Dark, GitHub, Nord, Tokyo Night and more, with a macOS window, a title, line numbers and a background.

Features

Highlight, focus and diff

Emphasise the lines that matter and dim the rest, or tint added and removed lines like a real diff.

Features

Editable and dynamic

Lands as a re-editable layer; bind the code or title to post fields with {{...}} tokens for dynamic featured images.

What is included

  • Syntax highlighting for 29 languages, run locally with auto-detection
  • Nine editor themes, light and dark
  • macOS, plain or no window frame, with an optional title
  • Line numbers, adjustable font size and tab width
  • Line highlighting with a focus mode that dims the rest
  • Diff mode that tints added and removed lines
  • Gradient, solid or transparent background with padding and a window shadow
  • Social-ready aspect ratios (16:9, square, 9:16)
  • Copy the image to your clipboard, or drop it in as a re-editable layer
  • Dynamic {{fields}} in the code and title for per-post featured images

Requirements

Works in every modern browser. Runs on top of the free WunderPaint; nothing is uploaded.
Play Video

Frequently asked questions

No. Highlighting and rendering run entirely in your browser – nothing is sent to a server.
Twenty-nine, including JavaScript, TypeScript, HTML, CSS, PHP, Python, JSON, Bash, SQL, Java, Go, Rust, C/C++, C#, Kotlin and Swift, plus auto-detection.
Yes. Insert {{fields}} into the code or the title and the image re-renders per post, so it works as a dynamic featured image.

Add Code Shot to your editor.

It comes with the Pro plan, updates included, and supports the continued development of the free open-source editor.

See plans and pricing
Back to all extensions

Free

Chaos Art

Autonomous painters make one-of-a-kind abstract art in 3D space - gestures, art movements, painterly media, and embeds that paint a new original for every visitor.
Read More

Pro

Particle Strokes

Paint with swarms of light: twenty-two movements, a stamp you draw yourself, and curves that give a stroke a shape - the swarm keeps painting for a few seconds after you let go.
Read More

Pro

City Diorama

Any place on earth as a miniature you could hold: real streets, water and building footprints raised into a 3D diorama - or wrapped around a sphere as your own tiny planet.
Read More