CodeImg

VSCode extension that generate beautiful image for you code and terminal with your favorite font and theme.

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: 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.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 🛠️

CodeImg

subframe7536

CodeImg

Why another one?

How it works?

Browser Environment Limitation

Features

Showcase

Limitation

Configurations

Commands

credit