Code to Image Converter

Sharing code as plain text on social media, presentations, or documentation strips away the syntax coloring that makes it readable. A misread operator or overlooked string literal in a screenshot of raw text costs debugging hours. This tool performs real tokenization of your source code using language-specific lexical rules, then renders each token with precise color mapping onto an HTML Canvas at 2× device pixel ratio for retina-sharp output. It supports 12 languages and 8 color themes calibrated to WCAG contrast ratios. The output is a lossless PNG with configurable padding p from 16 to 128px and font sizes from 12 to 32px.

The tokenizer uses greedy regex matching with priority ordering: comments and strings are captured first to prevent keyword false-positives inside literals. Line numbering is optional. Background supports solid colors, linear gradients, or transparent export. Note: this is a lexical highlighter, not a full parser. Nested template literals or polyglot files may produce approximate results. For standard single-language snippets, accuracy matches dedicated editors.

The canvas dimensions are computed from the code content metrics. For a code block with L lines, font size f, line height multiplier h, and padding p:

Where W is canvas width in CSS pixels, H is canvas height, G is the gutter width for line numbers (computed as measureText(L).width + 24px), w_i is the pixel width of line i measured via Canvas measureText, and p_right is extra trailing padding. For retina export, all dimensions are multiplied by device pixel ratio dpr = 2, then the canvas CSS size is set to logical dimensions via canvas.style.width.

Tokenization priority order prevents false matches: 1) multi-line comments, 2) single-line comments, 3) strings (single, double, backtick), 4) numbers, 5) keywords, 6) functions (identifier followed by (), 7) operators, 8) punctuation, 9) plain identifiers.