Grafiken / Code
Code-Screenshot-Generator: Code in ein sauberes Bild verwandeln
Erstelle ein ansprechendes Bild eines Codeausschnitts für Präsentationen, Dokumentationen oder Social-Media-Beiträge: Syntaxfarben für 17 Sprachen, vier Designs, ein Fensterrahmen mit Titel, Zeilennummern sowie ein Farbverlauf oder transparenter Hintergrund – als scharfes PNG oder SVG gespeichert. Dein Code verlässt dabei nie den Browser.
Code-Screenshot-Generator: Code in ein sauberes Bild verwandeln: Eine kleine integrierte Syntaxhervorhebung unterteilt den Code in Schlüsselwörter, Zeichenketten, Kommentare, Zahlen, Funktionsnamen und Typen. Anschließend wird er Zeile für Zeile in einer Schrift mit fester Zeichenbreite als SVG angeordnet und wie ein Editorfenster umrahmt. Das PNG wird aus diesem SVG in ein-, zwei- oder dreifacher Größe erzeugt und bleibt dadurch auch auf Bildschirmen mit hoher Auflösung scharf. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.
- Kategorie
- Bildwerkzeuge
- Ausführungen
- In deinem Browser
- Kosten
- Kostenlos · ohne Anmeldung
- Verfügbarkeit
- Einsatzbereit
Läuft vollständig in deinem Browser
Nichts verlässt deinen Browser. Das SVG benennt eine nichtproportionale Schrift, statt sie einzubetten. Daher sieht es auf dem Computer, auf dem es erstellt wurde, am besten aus; das PNG ist festgelegt.
Lesbare Codebilder
Halte Ausschnitte kurz: etwa 10 bis 25 Zeilen und weniger als 80 Zeichen Breite. So bleibt der Text lesbar, wenn das Bild in einem Feed oder auf einer Folie verkleinert wird.
Barrierefreiheit
Ein Bild von Code kann nicht kopiert oder von einem Screenreader gelesen werden. Wenn möglich, füge den Code selbst als Alternativtext oder neben dem Bild ein.
So benutzt du es
- Füge deinen Code ein.
- Wähle Sprache, Design, Fensterstil und Hintergrund aus.
- Lade das Bild als PNG oder SVG herunter.
Datenschutz & Einschränkungen
Dein Code bleibt in deinem Browser und wird nie hochgeladen.
Ähnliche Tools
Häufige Fragen
Welche Sprachen werden hervorgehoben?
JavaScript, TypeScript, Python, Go, Rust, Java, C, C++, C#, PHP, Ruby, SQL, CSS, HTML, JSON, Bash und YAML. Die Sprache wird anhand des Codes erkannt, oder du kannst sie selbst auswählen.
Warum sieht das SVG auf einem anderen Computer anders aus?
Im SVG wird eine Schrift angegeben, statt sie einzubetten. Deshalb verwendet ein anderer Computer möglicherweise seine eigene Schrift mit fester Zeichenbreite. Das PNG sieht überall gleich aus.
Kann ich den Hintergrund transparent machen?
Ja: Wähle „keiner“, dann behält das PNG rund um das Fenster einen transparenten Hintergrund.
Kostenloses Tool · läuft in deinem browser · kein Konto nötig