Code Screenshot Generator

Erstelle Code-Screenshots mit Syntaxhervorhebung und exportiere sie als SVG, PNG, JPEG, WebP oder HTML.

Code
Füge den Ausschnitt ein, den du in ein Bild umwandeln möchtest.
Syntax
Wähle Hervorhebung, Spracherkennung und Farbtheme.
Darstellung
Hintergrund
Lege die Fläche hinter der Code-Karte fest.
Hintergrundmodus
Fenster
Wähle die Rahmensteuerung und die Behandlung der Zeilennummern.
Fensterstil
Layout
Passe Abstände, Schriftgröße, Radius und Tabulatorbreite an.

Code Screenshot Generator

What it does

Code Screenshot Generator verwandelt einen eingefügten Ausschnitt in eine ansprechende Code-Karte, die als SVG, PNG, JPEG, WebP oder eigenständiges HTML exportiert werden kann. Das Tool läuft in deinem Browser, wendet Syntaxhervorhebung mit auswählbaren Themes an und lässt dich den Rahmen vor dem Herunterladen anpassen.

When to use it

Nutze den Generator für Dokumentationsbilder, Release Notes, Blogbeiträge, Präsentationen, Social Previews und Fehlerberichte, bei denen ein gestalteter Ausschnitt leichter zu erfassen ist als reiner Text. SVG- und HTML-Exporte bleiben in Dokumentationen gestochen scharf, während PNG, JPEG und WebP für Tools nützlich sind, die Rasterbilder erwarten.

How to get a clean export

Wähle die passendste Sprache oder lasse die Spracherkennung auf automatisch, und wähle dann ein Theme mit ausreichend Kontrast für dein Zielmedium. Lass Zeilennummern aktiviert, wenn der Ausschnitt in einer Diskussion referenziert wird, und deaktiviere den äußeren Hintergrund, wenn du ein transparentes Asset für ein anderes Design brauchst.

Privacy and limitations

Der Ausschnitt wird lokal auf der Seite verarbeitet und von diesem Tool nicht hochgeladen. Sehr große Dateien können die Hervorhebung und den Rasterexport verlangsamen. Kürze den Ausschnitt daher vor dem Exportieren auf die Zeilen, die du zeigen möchtest.