About

Writing clean, readable code is a baseline requirement for engineering, but presenting it is an art form. This tool acts as a semantic parsing engine that transforms raw strings of source code into tokenized, stylable HTML entities. Whether for documentation, educational content, or social sharing (Twitter/LinkedIn), visual distinction between keywords, functions, and literals reduces cognitive load for the reader.

We solve the Tokenization Problem without server-side dependencies. Instead of simple RegExp replacements which fail on edge cases like quoted strings containing keywords, this tool utilizes a priority-based Lexical Analyzer. It simulates a compiler's front-end phase, scanning stream buffers to construct a Syntax Tree that separates Comments from Operators and Strings. Additionally, the built-in Rasterizer mimics browser rendering to export pixel-perfect PNG images via the HTML5 Canvas API, utilizing strict monospace calculations for layout precision.

Formulas

The core logic uses a priority lexer where the input string S is consumed by a set of Regular Expressions R. The position i moves forward based on the length of the matched token T.

{

match(T_k) → Tokenize(S, P_next)if P_k ∈ R

When generating images, the pixel coordinate x for character j is calculated strictly via monospaced width metrics:

xpos = xpad + (j × Wfont)

This linear interpolation avoids the layout thrashing typical of complex DOM-to-Canvas libraries.

Reference Data

Scope / Token Type	Definition	Typical Color Logic (Dracula/Dark)	CSS Class
Keyword	Reserved language words (e.g., const, return, class).	#ff79c6 (Pink/Magenta)	`.tok-kw`
Function	Methods, calls, or declarations (e.g., parse()).	#50fa7b (Green) or #8be9fd (Cyan)	`.tok-fn`
Variable/Property	Identifiers, properties, fields.	#f8f8f2 (White/Fg)	`.tok-var`
String/Literal	Text values enclosed in quotes.	#f1fa8c (Yellow)	`.tok-str`
Operator	Math or logic symbols (e.g., =, +, ===).	#ff79c6 (Pink) or #bd93f9 (Purple)	`.tok-op`
Comment	Non-executable text, explanations.	#6272a4 (Desaturated Blue/Grey)	`.tok-com`
Number	Integers, floats, hex values.	#bd93f9 (Purple)	`.tok-num`
Built-in/Type	Core language objects (e.g., window, Math).	#8be9fd (Cyan/Italic)	`.tok-type`

Frequently Asked Questions

This usually happens when "Simplistic Regex" is used. Our Lexer uses a recursive definition for String literals, attempting to account for escaped characters (like \'). However, heavily minified code or extreme edge cases in flexible languages like JS might occasionally trick the heuristic parser. Try formatting the code with the "Prettify" toggle first to assist the tokenizer.

No. The Image Generation is 100% Client-Side using the HTML5 Canvas API. We define a drawing context in your browser's memory, rasterize the text tokens vector-style, and blob the output to a PNG. No code leaves your machine.

Absolutely. Use the "Copy HTML" button. The generated code is self-contained with inline style attributes (if selected) or class names relying on our supplied CSS. For maximum portability, the copy function sanitizes standard classes compatible with common stylesheets.

We utilize a "Scoring Heuristic". We check the code for unique fingerprints: "#" combined with "include" suggests C++, "def" and indentation suggest Python, "function" and "var" suggest JavaScript. It achieves roughly 90-95% accuracy for standard code blocks, but short snippets might require manual selection.