HTML

HTML Code-Screenshot-Generator

Verwandle HTML-Snippets in Bilder, die man gerne teilt — ohne deinen Mac zu verlassen.

HTML-Screenshots zeigen meist Struktur — deshalb trägt die Einrückung hier mehr Bedeutung als in den meisten Sprachen.

Codeshot erkennt HTML an dem Code, den du einfügst; es gibt also keine Sprachauswahl, die man falsch treffen kann. Hier ist dasselbe Snippet in drei der 30 mitgelieferten Themes, gerendert mit den Stylesheets der App.

<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong></strong> from Codeshot
  </figcaption>
</figure>
Atom One · dunkel
<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong></strong> from Codeshot
  </figcaption>
</figure>
Edge · dunkel
<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong></strong> from Codeshot
  </figcaption>
</figure>
GitHub · dunkel

Das passende Theme für HTML

Halte die Verschachtelung flach genug, dass die Einrückung auf einen Blick klar ist. Mehr als drei Ebenen tief ist ein Bild wohl das falsche Medium.

Die richtige Größe

Lass das Bild dem Inhalt folgen oder lege es auf ein Verhältnis fest — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3 oder 3:4 — und exportiere dann mit 1×, 2× oder 3×, damit es auf Retina-Displays scharf bleibt. Kopiere es mit C direkt in die Zwischenablage oder sichere mit S.

Sieh dir alle 30 Themes im Vergleich an oder lies den kompletten Ablauf.

Gebaut für HTML und 59 weitere Sprachen

Alles läuft auf deinem Mac. Dein Code verlässt ihn nie.

Für macOS laden