How to use
- Draw const n = 1 and return n for a 760 by 76 PNG.
- Draw the four let-lines for a 760 by 120 PNG.
- Do not expect the picture to execute return n.
Formula / how it works
Two lines, const n = 1 and return n, produce a 760 by 76 PNG, 4.8 KB. Four lines, let a = 1, let b = 2, let c = a + b, and return c, produce a 760 by 120 PNG, 8.6 KB. The width is fixed. The line height is 22. Padding is 16 on the top and the bottom. Two lines are 32 plus 44, which is 76. Four lines are 32 plus 88, which is 120. The numbers are the canvas, not a guess from a screenshot.
The ground is #0f172a. The line number is #64748b and the code is #e2e8f0. The face is the browser's monospace stack: ui-monospace, then Menlo, Consolas, and a generic monospace. A machine without those faces still gets a monospace face. The picture is not a capture of VS Code, and the colours are not a theme file you can import. It also does not run the snippet. return n is drawn. It is not evaluated.
Each line is cut at 80 characters. Line 41 and after are dropped. Tabs are drawn as the font draws them, which may be narrow. If the indent matters, expand tabs before you paste. There is no syntax colour for keywords. const and return are the same colour as the numbers. Adding a highlighter would mean parsing a language, and this page does not claim to know which language you pasted.
The download is PNG. A JPEG would blur the thin strokes of a monospace face at 16 pixels. If a form insists on JPEG, convert after and expect the letters to soften. The dark ground is opaque. There is no transparency for overlaying the listing on a slide. Put the PNG on the slide as its own box.
Use the text image page for a sentence in Georgia on a light ground. Use this page for a short listing where the line numbers should be visible. Neither page executes code, and neither page sends the text out of the browser.
Two monospace lines plus 32 pixels of padding reach 76. Four lines reach 120. Both widths stay 760. The 4.8 KB and 8.6 KB PNG files are the samples, and neither one executes the return.
A sentence in Georgia is text to image. The PNG stays sharper than a pass through PNG to JPG.
Worked examples
Two lines of code
Inputs: c2i-text: const n = 1; / return n;
On this page, take const n = 1; / return n; and press Draw code. Remember the PNG does not run the snippet.
Result: Code image: 760×76 PNG. Line numbers and a dark ground are drawn. The picture is not a screensho…
Four lines of code
Inputs: c2i-text: let a = 1; / let b = 2; / let c = a + b; / return c;
On this page, take let a = 1; / let b = 2; / let c = a + b; / return c; and press Draw code. Remember the PNG does not run the snippet.
Result: Code image: 760×120 PNG. Line numbers and a dark ground are drawn. The picture is not a screensh…
Use cases
- Showing a two-line snippet with line numbers on #0f172a.
- Showing four lines without syntax colours.
- Keeping thin strokes in PNG instead of a blurry JPEG.
- Cutting line 41 and characters past 80.
Tips & limitations
- Line height is 22 and padding is 16, so two lines are 76 pixels tall.
- Four lines are 32 plus 88, which is 120.
- Numbers are #64748b and the code is #e2e8f0.
- const and return are the same colour.
FAQ
Why is the two-line listing 76 pixels tall?
16 pixels of padding, twice, plus two times 22, is 76. The width is fixed at 760.
Why is the four-line listing 120 pixels tall?
The same 32 pixels of padding plus four times 22 is 120.
Does return n run?
No. It is drawn in the monospace stack. The page does not evaluate it.
Are keywords coloured?
No. const, let and return share #e2e8f0. There is no language parser.
Why PNG rather than JPEG?
A quality-80 JPEG blurs 16-pixel monospace strokes. The samples are 4.8 KB and 8.6 KB as PNG.
What happens to a tab character?
The font draws it, often narrowly. Expand tabs first if the indent matters.
760 by 76 is the two-line const snippet. A longer listing grows by 22 pixels a line until line 40.