Source code beautification image generation tool (for SNS sharing) | ZeroTools

This "Code Screenshot Creator" tool is a browser-based tool that colorizes the source code you enter and converts it into a PNG image with a background and an editor-like decoration.

The screen consists of an area for setting the code and style, and a preview area for checking the finished result. If the screen is narrow, they are arranged vertically instead of side-by-side.

To use it, first paste or type the code directly into the text area. Next, set the programming language, background, outer margin, presence of a macOS-style header, and save name.

Since each change is reflected in the preview on the right, you can check the color combination and text display before clicking "Generate and Download Image".

The main use cases are for posting short code snippets as images in technical blog illustrations, presentation materials, development memos, and SNS posts.

It is not a development environment for executing code or managing editing history, but rather specializes in saving the displayed snippet as a decorated image.

We use highlight.js to colorize the input code. There are 10 types of languages you can manually select on the screen: JavaScript, TypeScript, HTML, CSS, Python, Go, Rust, C++, Java, and SQL.

The language identifier selected by the user is set on the code element, and colorization is performed according to the highlighting rules for that language.

The language is not automatically determined from the code content. For example, if you choose Python for JavaScript code, it will not automatically correct to the appropriate language, but will colorize using the rules for Python.

If the colors differ from what you intended, please check the language selection first.

Highlighting is a process to adjust the appearance. It does not execute the input code or output compilation results. Since there is no function to detect syntax errors, type errors, or undefined variables, the fact that colors are applied does not mean the code is correct.

The created image is for explanation and sharing, and you must save or test the original code separately.

You can choose from 6 backgrounds. "Sunset Gold", "Midnight Blue", "Aurora Green", "Cyberpunk Pink", and "Space Grey" are each different color gradients.

"Glass Clear" is a style using a calm background color and border, but it is not a "no background" setting that creates a transparent PNG.

The outer margin placed outside the code window can be adjusted in 4px increments from 16px to 80px. Making the margin smaller makes the code area look larger, and widening it increases the area of the background design.

Since the actual destinations where the image will be used have their own different ratios and cropping rules, simply adjusting the margin does not automatically optimize it for each SNS.

When the macOS-style header is displayed, three circles of red, yellow, and green line up on the left, and text resembling a file name is displayed in the center.

For example, if you choose "app-code" as the base name and TypeScript as the language, "app-code.ts" is displayed. For JS, TS, and Python, it uses .js, .ts, and .py respectively.

For the other languages, the extension is just the first 3 letters of the language name: Rust uses .rus, Java uses .jav, C++ uses .cpp, HTML uses .htm, SQL uses .sql, Go uses .go, and CSS uses .css.

This is a visual decoration and does not reproduce actual editor operations.

When you click "Generate and Download Image", the toPng function of html-to-image turns the displayed preview DOM into an image. The library duplicates the target element and style, imports fonts and image resources, draws to a Canvas via an SVG foreignObject, and then creates a PNG Data URL.

It does not take a screenshot of the entire browser screen, but targets only the preview element of the tool.

The pixelRatio at output is fixed at 2. Basically, it draws with twice the number of Canvas pixels in both height and width relative to the logical size of the preview element.

This setting increases the pixel density of the raster image and does not mean it can be magnified infinitely like SVG. There are also no screen settings to choose 1x or 4x.

The save format is strictly PNG. PNG is a lossless compression raster image format, and output to JPG, WebP, or SVG is not supported.

The download name is created directly from the base name you entered; it is not sanitized, so path separators or unusable symbols are kept as is.

If left blank, it becomes "code.png", and if you enter "sample.png", it simply appends ".png" resulting in "sample.png.png". There is no function for the user to directly input the vertical and horizontal pixel dimensions of the image.

The maximum width of the preview is 620px. The pre and code tags are set to overflow-hidden, meaning there is no protection for wrapping long lines, so long lines can get cut off instead of wrapping.

The image height depends on the content shown.

With extremely large code, such as thousands of lines, generation may fail or not reach the expected size due to constraints on DOM, Canvas, Data URLs, and memory.

The amount of code is not unlimited. When the full text is needed, check the preview and consider splitting it into multiple images.

The appearance of characters is affected by the browser, OS, applied fonts, and font loading status. It waits a fixed 100ms before image generation instead of waiting for document.fonts.ready, so it cannot eliminate font acquisition failures, CORS issues, or rendering differences on the device side.

Since you may not always get exactly the same pixel result in every environment, please check the preview before saving and the PNG after downloading.

This tool does not have line numbers, specific line emphasis, font selection, code theme selection, transparent backgrounds, image size presets for each SNS, or clipboard copying of images.

Please check if the required appearance falls within the adjustment range of the preview before using it.

Syntax highlighting and PNG conversion logic run entirely on the user's browser side. We do not use a dedicated server API to turn the input code into an image.

However, html-to-image may fetch and embed fonts or image resources to reproduce the display, and communication and operations for page display, advertisements, analytics, site-wide functions, and browser extensions must be considered separately.

It does not mean the entire site is completely offline or that there is absolutely no communication.

There is no function to automatically save input content or background settings to localStorage, save history to the server, or sync across accounts.

A save request does not guarantee save completion. Before reloading or closing the page, save the necessary original code in an editor, etc., and download the necessary PNG.

A code image does not serve as a backup of the original source.

Before publishing an image, check for secret keys, API access tokens, database connection information, passwords, and personal information in the code.

This tool does not have a feature to automatically detect and hide sensitive information. The fact that conversion is done on the browser side is separate from whether the created image can be safely published.

Please check the sharing scope and the information included in the image visually before using it.