HTML

HTML Code Screenshot Generator

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

HTML screenshots are mostly used to show structure, which means indentation carries more meaning here than in most languages.

Codeshot detects HTML 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.

<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong>2×</strong> from Codeshot
  </figcaption>
</figure>

Atom One · dark

<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong>2×</strong> from Codeshot
  </figcaption>
</figure>

Edge · dark

<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong>2×</strong> from Codeshot
  </figcaption>
</figure>

GitHub · dark

Choosing a theme for HTML

Keep the nesting shallow enough that the indentation is obvious at a glance. If it is more than three levels deep, the image is probably the wrong medium.

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 HTML, and 59 other languages

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

Download for macOS