Code Screenshot

Syntax-highlighted code as an image, with editor themes, window chrome and a background.

Runs in your browser. Nothing you enter is uploaded.

Code

Language

Theme

Background

Padding

Window controlsLine numbers

File name

Optional.

Preview · exports at 2x

thread.ts

function splitThread(draft: string, limit = 280): string[] {
  const posts: string[] = [];
  let current = "";

  for (const sentence of sentencesOf(draft)) {
    const next = current ? `${current} ${sentence}` : sentence;
    if (lengthOnX(next) <= limit) {
      current = next;
    } else {
      posts.push(current);
      current = sentence;
    }
  }

  return current ? [...posts, current] : posts;
}

Making code readable in a feed

Keep it short. Fifteen lines or so is what stays legible once a phone scales the image down.
Post the code as text too — in a reply or a linked gist — so people can copy it and screen readers can read it.
Images export at 2x for sharp text. Pick “None” as the background for a transparent PNG with just the editor window.

Code Screenshot

Making code readable in a feed

More free tools