So erstellst du einen Screenshot von Code für Folien oder Beiträge

Um einen Screenshot von Code zu erstellen, öffne den Code-Screenshot-Generator und füge deinen Code in das Fenster ein. Wähle unter „Sprache“ die passende Sprache aus, damit die Farben zum Code passen. Gib unter „Dateiname“ einen Namen für die Titelleiste ein und klicke dann auf „PNG“. Das Bild wird in deinem Browser erstellt.

Ein Screenshot deines Editors zeigt auch Tabs, Menüs und kleine Schrift. Hier erhältst du nur das Fenster mit deinem Code, in dreifacher Bildschirmgröße. Der Text bleibt auch auf einer großen Folie scharf.

So erstellst du das Bild

1. Klicke in das Fenster und füge deinen Code ein. Du kannst ihn auch direkt eingeben. Mit der Eingabetaste wird die Einrückung der Zeile darüber übernommen.
2. Wähle unter „Sprache“ die passende Sprache aus. JavaScript ist standardmäßig ausgewählt.
3. Wähle unter „Fensterstil“ einen Rahmen aus: macOS, Windows oder Keiner. Standardmäßig ist macOS ausgewählt.
4. Gib einen Dateinamen wie retry.py ein. Er erscheint in der Titelleiste.
5. Klicke unter der Vorschau auf „PNG“.

Code-Screenshot-Generator mit der Python-Retry-Funktion im Editor, Python als Sprache ausgewählt und retry.py als Dateiname eingegeben

Die Datei wird unter dem Namen snippet gefolgt von einer Zahl gespeichert, zum Beispiel snippet-1792757286543.png. Klicke auf „Beispiel einfügen“, um zuerst ein kurzes JavaScript-Beispiel anzusehen.

Verfügbare Sprachen

Die Liste „Sprache“ enthält 25 Einträge.

• Web: JavaScript, TypeScript, HTML und CSS.
• Programmierung: Python, Java, Rust, C++, C, Go, PHP, SQL und Shell.
• Daten und Konfiguration: JSON, JSON5, XML, YAML, CSV, INI, TOON, Nginx und Prisma Schema.
• Text: Markdown, LaTeX und einfacher Text.

Die Sprache bestimmt nur die Farben. Sie wird nicht aus dem Code oder Dateinamen übernommen. Wähle sie daher selbst aus.

So änderst du die Farben

Die Codefarben richten sich nach dem Design der Website. Für ein dunkles Bild öffnest du das Menü oben auf der Seite, klickst auf die Design-Schaltfläche und wählst „Dunkles Design“. Für ein weißes Bild wählst du „Helles Design“.

Die Titelleiste bleibt in beiden Designs dunkel, bis du die „Titelleistenfarbe“ änderst. Der Titeltext wird weiß oder schwarz dargestellt – je nachdem, was besser lesbar ist. Wenn bei „Fensterstil“ die Option „Keiner“ ausgewählt ist, gibt es keine Titelleiste und das Farbfeld ist deaktiviert.

Schriftart und Innenabstand sind fest eingestellt. Das Bild enthält keine Zeilennummern.

So legst du die Breite fest

Das Fenster ist so breit wie seine längste Zeile. Ziehe den kleinen gepunkteten Griff unten rechts, um es schmaler oder breiter zu machen. Lange Zeilen werden dann in der nächsten Zeile fortgesetzt. Das Fenster ist mindestens 300 Pixel breit. Der Griff ist nicht im Bild zu sehen.

Eine sehr lange Zeile kann dazu führen, dass das Fenster über die Vorschau hinausragt. Klicke in der Leiste über der Vorschau auf „Zurücksetzen“, damit es wieder hineinpasst. Die Zoom-Schaltflächen ändern nur die Vorschau, nicht den Download.

Welches Format solltest du wählen?

• PNG lässt den Bereich außerhalb der abgerundeten Ecken transparent, sodass das Bild auf Folien jeder Farbe passt.
• JPG füllt diese kleinen Ecken mit Schwarz.
• „Drucken“ öffnet das Bild in einem neuen Fenster mit dem Druckdialog.

Beide Formate sind dreimal so groß wie das Fenster auf dem Bildschirm. Ein 752 Pixel breites Fenster ergibt zum Beispiel ein 2256 Pixel breites Bild.

Füge den Code ein, wähle die Sprache aus und lade das PNG für deine Folie herunter.