Overview Version History Q & A Rating & Review
CodeImg
VSCode extension that generate beautiful image for you code and terminal with your favorite font and theme.
Powered by Solid.js.
Why another one?
The popular existing extensions lack maintenance and have limited customization options. I spent some weekend time creating this extension, hoping to add a more modern UI and additional configuration options.
How it works?
Call VSCode's built-in command to copy generated HTML text and render the parsed clipboard content.
For code, use editor.action.clipboardCopyWithSyntaxHighlightingAction
For terminal, use workbench.action.terminal.copySelectionAsHtml
Features
Generate beautiful image of code and terminal
Copy or save image in PNG / JPG / WEBP format
Click line number to highlight lines in 3 styles
Showcase
Code:
Terminal:
Limitation
No effect about editor.bracketPairColorization
"pollute" your clipboard
Snap on terminal cannot be updated if selection in terminal changed
Configurations
Key
Description
Type
Default
codeimg.backgroundThe CSS background of the snippet's container. If you don't want to it, set it none
string"linear-gradient(345deg, rgb(180 218 255) 0%, rgb(232 209 255) 100%)"
codeimg.boxShadowThe CSS box-shadow for the snippet's container. If you don't want to it, set it none
string"medium"
codeimg.containerPaddingThe CSS padding for the snippet's container. If you don't want to it, set it none
string"3rem"
codeimg.borderBorder for the snippet's container. Only in dark theme
booleantrue
codeimg.debounceWhether to update the code snippet with debounce when selection changes
booleantrue
codeimg.roundedCornersThe CSS rounded corners for the snippet's container. If you don't want to it, set it none
string"1rem"
codeimg.scaleThe scale of the screenshot
number2
codeimg.formatThe format of the screenshot
string"png"
codeimg.terminalLineHeightLine height of terminal when generating terminal image
number1.3
codeimg.showWindowControlsDisplay OS X style window controls
booleantrue
codeimg.windowControlsColorAdd color in window controls
booleantrue
codeimg.showWindowTitleDisplay window title with open folder / file name
booleantrue
codeimg.showLineNumbersDisplay line numbers
booleantrue
Commands
Command
Title
codeimg.openCodeImg: open preview panel
codeimg.generate.codeCodeImg: generate image for code 📷
codeimg.generate.terminalCodeImg: generate image for terminal 🛠️
credit
