Code Shot
Turn a code snippet into a framed, syntax-highlighted image and drop it into your design - highlighted locally, fully editable, and dynamic.
Overview Extension #
Turn a code snippet into a framed, syntax-highlighted image and drop it into your design - highlighted locally, fully editable, and dynamic.
Code Shot turns a code snippet into a clean, framed image and drops it 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 and PHP to Python, Go, Rust and SQL.
Style it like a screenshot from a good editor: nine themes (Dracula, One Dark, GitHub, Nord, Tokyo Night and more), a macOS-style window with a title, line numbers, a gradient or solid background and a soft shadow. Emphasise the lines that matter with a focus mode, or tint added and removed lines with diff mode.
Open it from the Extensions menu. The image lands as a re-editable layer; reopen it anytime via Edit Code Shot to change the code, the theme or the frame. Frame it to a social-ready ratio, or copy it straight to your clipboard.
It supports dynamic content: put {{fields}} into the code or the title and the image re-renders per post, so it works as a dynamic featured image. Nothing is uploaded - the highlighting runs entirely in your browser.
Code and language Extension 4 items #
Where the code comes from and how it is read.
Code
#The code editor on the left. Paste or type your snippet; the preview updates as you go.
Language
#Auto-detect, or pick from 29 languages. Auto-detect guesses the language from the code.
Import file
#Load a file from your computer; the language is guessed from its extension and the file name fills the window title.
Dynamic tokens
#The {…} button inserts {{binding}} tokens, so the code can come from a post field and resolve per post.
Appearance Extension 5 items #
The look of the code itself.
Theme
#Nine editor themes, light and dark: Dracula, One Dark, GitHub Dark, GitHub Light, Solarized Dark, Night Owl, Monokai, Nord and Tokyo Night.
Window
#macOS traffic-light dots, a plain bar, or no frame. Add a title in the Window title field.
Line numbers
#Show or hide the line number gutter.
Font size
#The code font size, rendered with the bundled JetBrains Mono.
Tab size
#How many spaces a tab expands to.
Emphasis Extension 3 items #
Direct the eye to the code that matters.
Highlight lines
#Type line numbers or ranges (for example 2-4, 7) to place a subtle band behind those lines.
Focus (dim the rest)
#With lines highlighted, dims every other line so the highlighted ones stand out.
Diff mode
#Tints lines that start with + green (added) and - red (removed), with a colored accent bar, like a code diff.
Background and frame Extension 5 items #
The backdrop behind the window and the shape of the export.
Type
#Gradient, solid color, or transparent.
Colors
#The background color, plus a second color for the gradient.
Padding
#The space between the window and the edge of the image.
Window shadow
#A soft drop shadow under the code window.
Aspect ratio
#Frame the image to a fixed ratio with the window centred.
Insert, copy and dynamic Extension 4 items #
Get the image out: as a layer, to the clipboard, or as a dynamic featured image.
Copy image
#Copies the rendered PNG to your clipboard, ready to paste into a chat or a document.
Insert code shot
#Drops the image in as a re-editable layer, scaled to fit your canvas.
Edit Code Shot
#Reopens the studio for the selected layer so you can change the code, theme, emphasis or frame, then Update.
Dynamic content
#Because the code and title accept {{fields}}, a code shot re-renders per post - use it as a dynamic featured image.