Code als Bild speichern

So funktioniert es

Kopieren Sie den Code aus Ihrem Editor und fügen Sie ihn in das linke Feld ein. Das Bild rechts wird beim Tippen neu gezeichnet. Tabulatoren werden zu 4 Leerzeichen, Leerzeichen am Zeilenende sowie Leerzeilen am Anfang und Ende fallen weg, die Einrückung bleibt erhalten. Die Breite richtet sich nach der längsten Zeile; Zeilen werden nicht umbrochen. Beispiel: Eine JavaScript-Funktion mit 12 Zeilen, deren längste Zeile 60 Zeichen hat, ergibt bei 2× ein PNG von etwa 1.400 Pixel Breite, das auf LinkedIn oder Mastodon scharf aussieht. Eine Zeile mit mehr als 100 Zeichen macht das Bild sehr breit; die Ergebniszeile weist darauf hin. Ein Bild fasst höchstens 400 Zeilen. Der Code wird im Browser gezeichnet und an keinen Server geschickt.

Dieses Werkzeug ist auch als code als bild, code als bild speichern, code snippet bild, code screenshot erstellen, code in bild umwandeln, code to image bekannt.

Was ist Code-Bild?

Ein Code-Bild zeigt einen Code-Ausschnitt als Grafik statt als Text. Es wird auf Folien, Blog-Titelbildern und in Social-Media-Beiträgen genutzt, wo ein Textfeld die Einrückung zerstören oder keine Festbreitenschrift zeigen würde. Code im Bild lässt sich nicht kopieren – sollen Leser ihn ausführen, geben Sie die Textfassung zusätzlich an.

Was ist Festbreitenschrift (Monospace)?

In einer Festbreitenschrift ist jedes Zeichen gleich breit: ein i nimmt so viel Platz ein wie ein m. Deshalb wird Code darin angezeigt – nur so stehen Einrückungen und untereinander ausgerichtete Spalten sauber. Das Werkzeug nutzt die Code-Schrift Ihres Geräts, etwa SF Mono oder Menlo am Mac und Consolas unter Windows.

Code-Bild oder Screenshot: Was ist der Unterschied?

Ein Screenshot des Editors erfasst auch Menüs, Tabs, rote Fehlerlinien und die Bildschirmauflösung; Zuschneiden ist mühsam und auf kleinen Displays wird die Schrift unscharf. Ein Code-Bild zeichnet nur den Code: Ränder, Zeilennummern und Hintergrund sind jedes Mal gleich, es bleibt bei 2× scharf, und persönliche Dateinamen oder Projektpfade sind nicht zu sehen. Den Editor zeigen: Screenshot. Den Code teilen: Code-Bild.

Warum es keine Syntaxfarben und keinen Zeilenumbruch gibt

Das Werkzeug schreibt den Code einfarbig und färbt keine Schlüsselwörter. Farben brauchen Regeln für jede Sprache, und eine falsch erkannte Sprache ergibt ein unruhigeres Bild als schlichter Text. Zeilennummern sind gedämpft, der Code hat hohen Kontrast – Lesbarkeit auf Folie und Smartphone geht vor.

Zeilen werden nicht umbrochen, weil umbrochener Code falsch gelesen wird: In Python trägt die Einrückung Bedeutung, und ein Stück in der nächsten Zeile sieht wie eine neue Zeile aus. Eine lange Zeile verbreitert das Bild, die Ergebniszeile warnt; am saubersten ist es, die Zeile im Code selbst zu teilen.

Welche Einstellung wofür?

In sozialen Netzwerken fällt eine dunkle Karte auf farbigem Verlauf im Feed auf. Das helle Design schont auf weißen Folien und in Dokumenten die Augen und spart beim Drucken Tinte.

Soll das Bild in ein anderes Layout, wählen Sie „Ohne Hintergrund“: Nur die Code-Karte bleibt, die Ecken sind transparent. Zeilennummern lohnen sich, wenn Sie im Vortrag „schauen wir auf Zeile 5“ sagen; bei einem einzeiligen Befehl wirkt es ohne ruhiger.

Häufige Fragen

Wie speichere ich Code als Bild?

Fügen Sie Ihren Code links auf dieser Seite ein. Rechts erscheint sofort das Code-Bild im Fenster-Look. Wählen Sie Farben und tippen Sie auf „Herunterladen“, um das PNG zu speichern.

Wird mein Code an einen Server geschickt?

Nein. Das Bild entsteht im Browser, der Code wird nirgends hochgeladen. Auch firmeninterner Code kann also bedenkenlos verwendet werden.

Gibt es Syntaxhervorhebung?

Nein. Der Code erscheint einfarbig mit gedämpften Zeilennummern. Das sieht in jeder Sprache gleich aus und kann nichts falsch einfärben.

Warum ist mein Bild so breit?

Die Breite folgt der längsten Zeile, umbrochen wird nicht. Eine Zeile mit über 100 Zeichen verbreitert das Bild; teilen Sie sie im Code, wird das Bild schmaler.