explaingit

octref/polacode

★ 6,843JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

A Visual Studio Code extension that turns any code snippet into a polished screenshot that matches your exact editor theme, fonts, and syntax colors, ready to share on social media or in a blog post.

Mindmap

mindmap
  root((Polacode))
    Features
      Theme-matched colors
      Font preservation
      Drag to resize
    Image Options
      Drop shadow toggle
      Transparent background
      Custom background color
    Technology
      VS Code extension
      dom-to-image library
    Use Cases
      Social sharing
      Blog illustrations
      Design mockups
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Share a styled code snippet on Twitter or LinkedIn that perfectly matches your editor color theme

USE CASE 2

Drop a polished code image into a blog post without switching to a separate website

USE CASE 3

Create a code screenshot with a transparent background for embedding in a design mockup

Tech stack

JavaScriptVS Code API

Getting it running

Difficulty · easy Time to first run · 5min
Use, copy, and modify freely for any purpose including commercial projects.

In plain English

Polacode is an extension for Visual Studio Code that lets you take beautiful screenshots of your code. You select a snippet, open the Polacode panel, and it renders the code using your current editor theme and font. The result looks like a photo taken with a Polaroid camera, styled to match the exact colors and typography you have already set up in your editor. The motivation is straightforward: developers put a lot of care into how their code looks on screen, choosing color themes, programming fonts, and syntax highlighting. When sharing a snippet on social media or in a blog post, plain text or a generic code block loses all of that styling. Polacode captures it and turns it into a shareable image. You can resize the snippet container by dragging a corner, and a few settings control the image appearance: whether to include a drop shadow, whether the background is transparent, and what background color to use. The extension uses a library called dom-to-image to convert the rendered panel to an image file. The project credits Carbon (a web-based tool for the same concept) as its inspiration and notes it was built on top of work by several open source contributors. The license is MIT. The README is short and the author has kept the scope intentionally narrow, noting that contributions are not especially welcome and that issues should be opened before making changes so the user experience stays simple.

Copy-paste prompts

Prompt 1
I want to recreate Polacode as a VS Code extension. Walk me through using the VS Code Webview API to render a code panel and export it as a PNG file.
Prompt 2
I'm using dom-to-image in a VS Code extension. Show me how to capture a specific HTML element and trigger a download as a PNG.
Prompt 3
Help me add a VS Code setting that lets users toggle the drop shadow on Polacode screenshots and pick a custom background color.
Prompt 4
Write a VS Code extension that reads the active editor selection and renders it in a styled preview panel using the current theme colors.
Open on GitHub → Explain another repo

← octref on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.