I built a Code Snippet Formatter — syntax highlight code and export as PNG

#webdev #tools #javascript #programming

What I built

I added a Code Snippet Formatter to devnestio — a free dev tools collection.

👉 https://devnestio.pages.dev/code-snippet-formatter/

Paste code, choose a theme and language, and get a beautiful syntax-highlighted preview you can export as PNG — no server, no sign-up.

Why I built it

When sharing code in blog posts or social media, a highlighted image looks much better than plain text. I wanted a tool that works entirely in the browser without uploading code to any server.

Features

19 languages — JS/TS, Python, HTML, CSS, JSON, Bash, SQL, Rust, Go, Java, C++, PHP, Ruby, Swift, Kotlin, YAML, Markdown, PlainText
6 themes — One Dark, GitHub Dark, Dracula, Solarized, Nord, Light
Customization — font size (11–22px), padding (8–60px), window frame toggle, line numbers toggle
3 gradient backgrounds — Purple, Ocean, Sunset
PNG export — using Canvas + SVG foreignObject, runs entirely in-browser
Copy highlighted HTML — grab pre > code with inline styles

Tech

Single HTML file, zero dependencies. Syntax highlighting via custom regex-based tokenizer (no Prism/highlight.js). PNG export via Canvas + SVG foreignObject. Hosted on Cloudflare Pages.

Part of devnestio — a growing collection of free, in-browser developer tools.