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 text content.

• For code, use editor.action.clipboardCopyWithSyntaxHighlightingAction
• For terminal, use workbench.action.terminal.copySelectionAsHtml

Browser Environment Limitation

Due to the limitation of navigator.clipboard.read() and lack of document.execCommand("paste") support in modern browsers, the generate image command and selection listener are not supported.

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
• Click red circle on top left to clear all codes

Showcase

Code:

Terminal:

• Font: Maple Mono
• Theme: Maple

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.background	The 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.boxShadow	The CSS box-shadow for the snippet's container. If you don't want to it, set it none	string	"medium"
codeimg.containerPadding	The CSS padding for the snippet's container. If you don't want to it, set it none	string	"3rem"
codeimg.border	Border for the snippet's container. Only in dark theme	boolean	true
codeimg.debounce	Whether to update the code snippet with debounce when selection changes	boolean	true
codeimg.roundedCorners	The CSS rounded corners for the snippet's container. If you don't want to it, set it none	string	"1rem"
codeimg.scale	The scale of the screenshot	number	2
codeimg.format	The format of the screenshot	string	"png"
codeimg.terminalLineHeight	Line height of terminal when generating terminal image	number	1.3
codeimg.showWindowControls	Display OS X style window controls	boolean	true
codeimg.windowControlsColor	Add color in window controls	boolean	true
codeimg.showWindowTitle	Display window title with open folder / file name	boolean	true
codeimg.showLineNumbers	Display line numbers	boolean	true
codeimg.realLineNumber	The line number begins with the actual line number instead of starting at 1	boolean	false
codeimg.wrapLine	Wrap long lines to fit the container width	boolean	false
codeimg.trimPrefixWhitespaces	Trim the prefix whitespaces in every line and keep indent. Also trim empty lines around	boolean	true

Commands

Command	Title
codeimg.open	CodeImg: open preview panel
codeimg.generate.code	CodeImg: generate image for code 📷
codeimg.generate.terminal	CodeImg: generate image for terminal 🛠️

credit

• CodeSnap-plus
• ray.so
• CodeImage