Drop #248 (2023-04-26): View The Source (Luke)

CodeSnap/vim-ray-so-beautiful; dom-to-svg/svg-screenshots; CodeToImg

Whether it's to humblebrag, help others learn, or adorn a tech-centric presentation, there is no doubt that we 💙 [code] screenshots.

I tend to default to carbon.now.sh since it allows for sharing the actual source code as well as the syntax-highlighted image. However, the service is getting a bit tired, doesn't have the freemium option anymore, the “API” is “meh”, and it lacks the coolness of some new contenders in this space.

Since I am ever the tech gadfly, we'll take a look at three alternatives that progress from two you can install/use in-editor; to one you can install/use in-browser (for more than just code screenshots); and, one you can self-host and hack-on via Docker.

As an aside, I have no idea why I’m burning so many Star Wars references this far out from May 4th, but I assure you there will be plenty left for that day.

CodeSnap/vim-ray-so-beautiful

Until I catch up with the cool kids who use neovim as their daily driver, 55%+ of my editing time is in VS Code these days. Since that's where I “live”, I poked around for the best way to generate syntax-highlighted code screenshots from it. Of the plethora of choices, I found CodeSnap seems to best support my mental model of how a minimalist utility such as this should work.

Select a bit of code (or use the active file), right-click ⇒ select CodeSnap or use it via the Command Palette, and you instantly have a shareable code screenshot using your current VS Code theme. It is moderately customizable and supports whatever language highlighting VS Code supports.

My only “complaint” is that it does not support SVG screenshots, but we'll cover those in the next two sections.

If you are one of those cool neovim kids, you likely already know about vim-ray-so-beautiful, a vim plugin that uses the super-cool (but lacking in support for many languages, including R) Ray.so service to generate spiffy screenshots. But, if you did not, now you do!

dom-to-svg/svg-screenshots

I've used dom-to-svg — a JS library to convert a given HTML DOM node into an accessible SVG “screenshot” — on more than a few occasions in various projects. However, I never poked around all of Felix Becker's GH repos until a little while ago. That's when I came across svg-screenshots a browser extension to take scalable, semantic, accessible screenshots of any website (or portion of a website) in SVG format.

Using SVG for DOM captures is a pretty brilliant concept (when done properly). Text stays text, so folks using screen readers are not left out of the content sharing. Furthermore, the contents are scalable, so folks with old eyes (👋) can zoom in to get clarity on the contents.

Felix states those and other benefits in the README:

• 🖼 Flexible: Freely select the region of the website you want to capture or capture the whole page.

• 💢 Scalable graphics: Screenshots never get pixelated when zooming in.

• 📝 Semantic: Text can still be selected and copied to clipboard.

• 🦻 Accessible: SVG is annotated with ARIA attributes and can be read by screen readers.

• 🖥 Paste into design tools: SVGs will work in design tools like Illustrator, Figma, Sketch etc.

• 🔗 Interactive: Links are still clickable.

• 📦 Self-contained: Inlines external resources like images, fonts, etc.

• 📸 Static: Styles and layout are recorded at the time of snapshot and will not change.

• 🗜 Small: Depending on the content, SVGs can be magnitudes smaller than PNGs and compress loslessly.

• 🛡 Secure: The SVG will not run any JavaScript.

As usual, I recommend using dev-mode extensions, since you control the contents and update cadence.

Sadly, until I move from Substack, there's no way for me to show a capture here (the section header image is, obviously, a bitmap), but you can check out the SVG version of it over at my place.

CodeToImg

If you want more of a “workbench” motif with both bitmap and SVG bells & whistles, then CodeToImg (GH) may be what you're looking for.

It looks far too similar to the aforementioned ray.so service to be an accident, but it is also self-hostable (the section header image is it running on my local network). Said ray.so similarity also means you'll need to hack-in support for more languages.

#want: more of these minimalist apps that do what they say on the tin, and do it well.

FIN

If you have a preferred code sharing system/setup/service, drop a note in the comments or in Notes. ☮