Less

Less Code Screenshot Generator

Turn Less snippets into images worth sharing, without leaving your Mac.

Less snippets are usually shown to explain a mixin or a guard, both of which are easier to point at in an image than to describe.

Codeshot detects Less from the code you paste, so there is no language picker to get wrong. Here is the same snippet in three of the 30 themes it ships with, rendered with the app's own stylesheets.

@ink: #0d0d10;
@radius: 14px;

.card(@shadow: 0 18px 40px rgba(23, 23, 32, 0.12)) {
  border-radius: @radius;
  box-shadow: @shadow;
  color: @ink;
}

.snapshot { .card(); }
Atom One · dark
@ink: #0d0d10;
@radius: 14px;

.card(@shadow: 0 18px 40px rgba(23, 23, 32, 0.12)) {
  border-radius: @radius;
  box-shadow: @shadow;
  color: @ink;
}

.snapshot { .card(); }
Edge · dark
@ink: #0d0d10;
@radius: 14px;

.card(@shadow: 0 18px 40px rgba(23, 23, 32, 0.12)) {
  border-radius: @radius;
  box-shadow: @shadow;
  color: @ink;
}

.snapshot { .card(); }
GitHub · dark

Choosing a theme for Less

Colour values and variables are the interesting part. A neutral theme keeps them legible rather than competing with them.

Getting the size right

Let the image follow your content, or lock it to a ratio — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3, or 3:4 — then export at 1×, 2×, or 3× so it stays sharp on a retina display. Copy it straight to the clipboard with C, or save with S.

See all 30 themes side by side, or read the full workflow.

Built for Less, and 59 other languages

Everything runs on your Mac. Your code never leaves it.

Download for macOS