Code-Screenshot

Code als schönes Bild mit Syntax-Hervorhebung exportieren

Dateien verlassen Ihr Gerät nicht
Läuft im Browser
Kostenlos, ohne Anmeldung, ohne Wasserzeichen

Code

Vorschau

Klicken Sie in der Vorschau auf eine Zeile, um sie hervorzuheben.

Syntax-Highlighter wird geladen …

So verwenden Sie: Code-Screenshot

Machen Sie aus Code ein Bild mit Syntax-Hervorhebung, Fensterrahmen, Farbschema und Hintergrund und laden Sie es als PNG oder SVG herunter oder kopieren Sie es in die Zwischenablage. Unterstützt werden 27 Sprachen plus reiner Text mit automatischer Erkennung; die Hervorhebung läuft in Ihrem Browser.

Fügen Sie Ihren Code in das Feld „Code“ ein oder klicken Sie auf „Beispiel“.

Lassen Sie „Sprache“ auf „Automatisch erkennen“ oder wählen Sie eine aus, und tragen Sie als Titel etwa den Dateinamen ein.

Markieren Sie wichtige Zeilen unter „Zeilen hervorheben“ (z. B. 3, 5-7) oder per Klick in der Vorschau, und schalten Sie bei Bedarf „Übrige Zeilen abblenden“ ein.

Wählen Sie unter „Darstellung“ und „Hintergrund“ Farbschema, Fenster (macOS, Windows oder Ohne), Schriftgröße, Verlauf oder Einfarbig und den Rand.

Legen Sie unter „Export“ Breite und Auflösung fest und klicken Sie auf „PNG herunterladen“, „SVG“ oder „Bild kopieren“.

Häufige Fragen

Wird mein Code irgendwohin gesendet?

Nein. Hervorhebung und Darstellung passieren in Ihrem Browser. Das Tool merkt sich aber den letzten Code und die Einstellungen im lokalen Speicher dieses Browsers; klicken Sie an einem gemeinsam genutzten Rechner daher auf „Leeren“.

Welche Sprachen und Farbschemata gibt es?

JavaScript, TypeScript, Python, Java, Go, Rust, C, C++, C#, PHP, Ruby, Swift, Kotlin, Dart, Scala, Lua, SQL, Shell, PowerShell, JSON, YAML, HTML / XML, CSS, SCSS, Markdown, Dockerfile und Diff sowie reiner Text. Farbschemata: One Dark, GitHub Dark, GitHub Light, Dracula, Nord, Monokai, Solarized Dark und Solarized Light.

Was ist der Unterschied zwischen PNG und SVG?

PNG ist ein Bild in 1×, 2× oder 3× Auflösung. Im SVG bleibt der Code echter, markierbarer Text und ist in jeder Größe scharf, wird aber mit den Schriften des Geräts angezeigt, das die Datei öffnet.

Wie verhindere ich, dass lange Zeilen das Bild sehr breit machen?

Stellen Sie die Breite auf „Fest“ und geben Sie eine Bildbreite zwischen 320 und 4000 px ein. Lange Zeilen werden dann umbrochen.

Kann der Hintergrund transparent sein?

Ja. Wählen Sie unter „Hintergrund“ die Option „Transparent“ und laden Sie PNG oder SVG herunter.

Was unterscheidet das Tool vom Geräte-Mockup?

Dieses Tool setzt eingefügten Code als Text. Um einen vorhandenen Screenshot einer App oder Website in einen Rahmen zu setzen, verwenden Sie das Geräte-Mockup.

So verwenden Sie: Code-Screenshot

Fügen Sie Ihren Code in das Feld „Code“ ein oder klicken Sie auf „Beispiel“.

Lassen Sie „Sprache“ auf „Automatisch erkennen“ oder wählen Sie eine aus, und tragen Sie als Titel etwa den Dateinamen ein.

Markieren Sie wichtige Zeilen unter „Zeilen hervorheben“ (z. B. 3, 5-7) oder per Klick in der Vorschau, und schalten Sie bei Bedarf „Übrige Zeilen abblenden“ ein.

Wählen Sie unter „Darstellung“ und „Hintergrund“ Farbschema, Fenster (macOS, Windows oder Ohne), Schriftgröße, Verlauf oder Einfarbig und den Rand.

Legen Sie unter „Export“ Breite und Auflösung fest und klicken Sie auf „PNG herunterladen“, „SVG“ oder „Bild kopieren“.

Häufige Fragen

Wird mein Code irgendwohin gesendet?

Welche Sprachen und Farbschemata gibt es?

Was ist der Unterschied zwischen PNG und SVG?

Wie verhindere ich, dass lange Zeilen das Bild sehr breit machen?

Stellen Sie die Breite auf „Fest“ und geben Sie eine Bildbreite zwischen 320 und 4000 px ein. Lange Zeilen werden dann umbrochen.

Kann der Hintergrund transparent sein?

Ja. Wählen Sie unter „Hintergrund“ die Option „Transparent“ und laden Sie PNG oder SVG herunter.

Was unterscheidet das Tool vom Geräte-Mockup?

Dieses Tool setzt eingefügten Code als Text. Um einen vorhandenen Screenshot einer App oder Website in einen Rahmen zu setzen, verwenden Sie das Geräte-Mockup.