# Code in Bild umwandeln

> Ein kostenloses Online-Tool, das ein Code-Snippet in ein teilbares Bild mit Syntaxfarben, einem Thema und einem optionalen Fensterrahmen umwandelt.

Mit dem Tool Code in Bild umwandeln machen Sie aus einem Code-Snippet ein Bild, das Sie teilen können. Fügen Sie Ihren Code ein, wählen Sie eine Sprache und ein Farbthema und laden Sie das Bild herunter. Für das kostenlose Tool benötigen Sie kein Konto.

## Die wichtigsten Fakten

- Eingabe: Code, mit automatischer Spracherkennung oder einer Auswahl aus 21 Sprachen.
- Themen: Midnight, Paper und Graphite; Hintergründe: Ocean-, Sunset- und Mint-Verlauf, Schiefergrau, Weiß oder Transparent (nur PNG).
- Ausgabe: PNG oder JPG bei 1x, 2x oder 3x (standardmäßig 2x), bis zu 4000 px breit und 2000 px hoch bei 1x; der Code wird in Liberation Mono gesetzt und Zeilen werden nicht umgebrochen.
- Ohne Konto kostenlos: bis zu 10 Umwandlungen pro Minute und 50 pro Tag und Besucher, ohne Wasserzeichen. Angemeldet kostet jedes Rendering 1 Credit (100 kostenlose Credits jeden Monat).
- Dateien werden automatisch gelöscht: 10 Minuten nach der Umwandlung ohne Konto, 1 Tag mit einem kostenlosen Konto.
- Entwickler können dasselbe Rendering mit POST https://api.aiipworld.com/v1/render und einem API-Schlüssel ausführen (siehe die Seite Screenshot-API).

## Quellen

- [Puppeteer: page.screenshot()](https://pptr.dev/api/puppeteer.page.screenshot)
- [W3C: Portable Network Graphics (PNG) Specification](https://www.w3.org/TR/png-3/)

Zuletzt geprüft: 2026-10-15

## So funktioniert es

1. Fügen Sie Ihren Code in das Feld ein oder lassen Sie das Standardbeispiel stehen, um das Tool auszuprobieren.
2. Wählen Sie eine Sprache aus der Liste oder lassen Sie die automatische Erkennung aktiv.
3. Wählen Sie ein Farbthema und einen Hintergrund. Aktivieren Sie Zeilennummern oder einen Fenstertitel, wenn Sie diese möchten.
4. Legen Sie die Textgröße, den Innenabstand, das Format (PNG oder JPG) und die Pixeldichte (1x, 2x oder 3x) fest.
5. Bestätigen Sie die kurze Sicherheitsprüfung, falls sie erscheint, erstellen Sie das Bild und laden Sie die Datei herunter.

## Code in Bild umwandeln: so geht es

Fügen Sie den Code ein, den Sie zeigen möchten, und das Tool zeichnet ihn als Bild. Sie müssen keine Software installieren und kein Konto anlegen. Bei anonymer Nutzung wird vorher eine kurze Sicherheitsprüfung verlangt.

Das Bild richtet sich nach dem Code. Die Breite folgt der längsten Zeile, die Höhe der Anzahl der Zeilen. Sie können einen äußeren Abstand um den Code legen.

Typische Einsatzzwecke sind Dokumentation, Social-Media-Beiträge und Folien.

## Sprachen und Farben

Wählen Sie die Sprache aus der Liste oder lassen Sie das Tool sie erkennen. Die 21 Sprachen sind JavaScript, TypeScript, Python, JSON, Shell, CSS, HTML/XML, SQL, Go, Rust, Java, C, C++, C#, PHP, Ruby, YAML, Markdown, Diff, Kotlin und Swift.

Das Farbthema bestimmt das Aussehen des Fensters. Midnight ist dunkel, Paper ist hell und Graphite ist dunkelgrau.

## Hintergründe, Fenster und Zeilennummern

Wählen Sie einen Hintergrund: den Ocean-, Sunset- oder Mint-Verlauf, einen einfarbigen Schiefergrau- oder Weiß-Hintergrund oder Transparent.

- Transparent funktioniert nur für PNG. JPG hat keine Transparenz, daher wird ein transparenter Hintergrund als Weiß gespeichert.
- Fenster-Punkte: Drei farbige Punkte werden mit CSS gezeichnet, damit das Bild einen Fensterrahmen erhält.
- Fenstertitel: Fügen Sie einen kurzen Text in die Titelleiste des Fensters ein.
- Zeilennummern: Aktivieren Sie sie für Code, den Sie Zeile für Zeile besprechen.

## Bildgröße und Schärfe

Legen Sie die Textgröße in Pixeln fest. Der Bereich reicht von 10 bis 32 px. Der äußere Abstand wird ebenfalls in Pixeln angegeben.

Die Pixeldichte ist 1x, 2x oder 3x. Standard ist 2x. Wählen Sie 3x, wenn das Bild groß angezeigt wird.

Wählen Sie PNG oder JPG. Verwenden Sie PNG, wenn Sie einen transparenten Hintergrund benötigen.

Im kostenlosen Tool ist die Höhe bei 1x auf 2000 px begrenzt. Das Tool zeigt eine Meldung an, wenn das Bild diese Grenze überschreitet.

## Schriftarten

Das Bild verwendet Liberation Mono, eine Schrift mit fester Zeichenbreite. Sie deckt lateinische, griechische und kyrillische Buchstaben ab.

Zeichen, die die Schrift nicht enthält, etwa chinesische, werden mit einer Ersatzschrift gezeichnet. Diese Zeichen stehen auf dem Raster der Festbreitenschrift möglicherweise nicht richtig.

In diesem Tool können Sie keine andere Schrift wählen. Schriften von Ihrem Gerät stehen auf dem Render-Server nicht zur Verfügung. Um eine andere Schrift zu verwenden, erstellen Sie das Bild mit dem HTML-in-Bild-Tool und laden Sie die Schrift mit @font-face über eine öffentliche URL oder eine Data-URL.

## Lange Zeilen und lange Dateien

Zeilen werden nicht umgebrochen. Eine lange Zeile macht das Bild breiter. Brechen Sie lange Zeilen in Ihrem Quelltext um, bevor Sie sie einfügen, wenn das Bild zu breit wird.

Tabulatoren werden zu 4 Leerzeichen. Die Einrückung im Bild kann daher von Ihrem Editor abweichen.

Eine lange Datei ergibt ein hohes Bild. Das kostenlose Tool begrenzt die Höhe bei 1x auf 2000 px. Teilen Sie eine längere Datei in Abschnitte und erstellen Sie für jeden Abschnitt ein eigenes Bild.

## Code per API in Bild umwandeln

Wenn Sie viele Bilder erstellen, verwenden Sie die API statt des Web-Tools. Die API hat eine Operation Screenshot, die HTML entgegennimmt. Betten Sie Ihren Code in HTML ein, maskieren Sie ihn, damit Zeichen wie < und & korrekt angezeigt werden, und senden Sie ihn an die Operation Screenshot.

Erstellen Sie einen API-Schlüssel im Dashboard. Senden Sie ihn als Authorization: Bearer gefolgt vom Schlüssel oder als Header x-api-key. Halten Sie den Schlüssel geheim und veröffentlichen Sie ihn nicht.

Anfragen sind asynchron. Senden Sie ein POST an /v1/render; Sie erhalten eine Auftrags-ID mit einer 202-Antwort zurück. Fragen Sie GET /v1/jobs/ mit dieser ID ab, bis der Status succeeded, failed oder timeout lautet. Laden Sie die Datei dann über den Download-Link herunter, der nur kurze Zeit gültig ist. Credits für fehlgeschlagene Aufträge und Aufträge mit Zeitüberschreitung werden erstattet. Es gibt keinen Stapel-Endpoint, senden Sie daher für jedes Bild eine eigene Anfrage.

## Bevor Sie ein Code-Bild teilen

Ein Code-Bild ist ein Bild, daher kann jede Person, die es sieht, jede Zeile lesen. Entfernen Sie Schlüssel, Passwörter und persönliche Angaben aus dem Code, bevor Sie ihn einfügen.

Dieses Tool für Code als Bild eignet sich für Anleitungen und Vorträge. Prüfen Sie die gewählte Sprache, entscheiden Sie, ob Sie Zeilennummern brauchen, und wählen Sie eine Pixeldichte, die zu dem Ort passt, an dem das Bild erscheint.

Wenn Sie eine Code-PNG-Datei möchten, die ohne Kasten dahinter auf einer Folie liegt, wählen Sie PNG und den transparenten Hintergrund. Transparent funktioniert nur für PNG.

## Code-Snippet online in Bild umwandeln

Die Umwandlung eines Code-Snippets in ein Bild beginnt mit dem Einfügen: Legen Sie den Code in das Feld, wählen Sie Sprache und Thema und laden Sie das Bild herunter. Dieser Generator für Code-Bilder benötigt keine Installation und kein Konto.

Nutzen Sie Code online in Bild umwandeln, wenn ein Codeblock an der Stelle, an der Sie veröffentlichen, nicht erlaubt ist, etwa auf einer Folie oder in einem Social-Media-Beitrag. Halten Sie das Snippet kurz, denn lange Zeilen machen das Bild breit.

## Fragen

### Wie wandle ich Code in ein Bild um?

Fügen Sie Ihren Code in das Tool ein, wählen Sie eine Sprache und ein Farbthema und laden Sie das Bild als PNG oder JPG herunter. Für das kostenlose Tool benötigen Sie kein Konto. Vorher kann eine kurze Sicherheitsprüfung erscheinen.

### Welche Sprachen werden unterstützt?

Sie können aus 21 Sprachen wählen: JavaScript, TypeScript, Python, JSON, Shell, CSS, HTML/XML, SQL, Go, Rust, Java, C, C++, C#, PHP, Ruby, YAML, Markdown, Diff, Kotlin und Swift. Sie können die Sprache auch auf die automatische Erkennung lassen.

### Kann ich ein transparentes PNG erhalten?

Ja. Wählen Sie den Hintergrund Transparent und speichern Sie die Datei als PNG. Transparenz ist für JPG nicht verfügbar, da JPG keinen transparenten Kanal hat und ein transparenter Hintergrund als Weiß gespeichert wird.

### Warum wird der Text nicht umgebrochen?

Zeilen werden nicht umgebrochen. Das Bild richtet sich nach der längsten Zeile, daher macht eine lange Zeile das Bild breiter. Brechen Sie lange Zeilen in Ihrem Code um, wenn Sie ein schmaleres Bild brauchen.

### Kann ich meine eigene Schrift verwenden?

In diesem Tool nicht. Das Bild verwendet immer Liberation Mono. Um eine andere Schrift zu verwenden, erstellen Sie das Bild mit dem HTML-in-Bild-Tool und laden Sie die Schrift mit @font-face über eine öffentliche URL oder eine Data-URL.

### Wie groß ist das Bild?

Die Größe richtet sich nach Ihrem Code. Die Breite ergibt sich aus der längsten Zeile, die Höhe aus der Anzahl der Zeilen. Im kostenlosen Tool ist die Höhe bei 1x auf 2000 px begrenzt, und die Pixeldichte 1x, 2x oder 3x skaliert die Ausgabe.

### Wird mein Code gespeichert?

Ergebnisse werden nach 10 Minuten gelöscht. Zu jedem Auftrag wird ein Datensatz aufbewahrt, und angemeldete Nutzer sehen ihre Aufträge im Dashboard. Fügen Sie keine Schlüssel, Passwörter oder anderen Geheimnisse in ein Online-Tool ein.

### Kann ich eine JPG-Datei erstellen?

Ja. Wählen Sie JPG als Format. JPG hat keine Transparenz, daher wird ein transparenter Hintergrund als Weiß gespeichert. Wählen Sie PNG, wenn Sie einen transparenten Hintergrund brauchen.

### Wie mache ich das aus einem Skript heraus?

Verwenden Sie die API. Ihre Operation Screenshot nimmt HTML entgegen, betten Sie Ihren Code daher in HTML ein und senden Sie ihn mit Ihrem API-Schlüssel. Fragen Sie dann den Auftrag ab, bis er erfolgreich ist, und laden Sie die Datei herunter.

### Hat das Bild ein Wasserzeichen?

Nein. Wir fügen Bildern aus dem kostenlosen Tool kein Wasserzeichen hinzu. Bei anonymer Nutzung ist eine Sicherheitsprüfung nötig, angemeldete Nutzer überspringen diese Prüfung.

### Ist das Tool kostenlos?

Ja. Das Tool Code in Bild ist ohne Konto kostenlos nutzbar. Die API benötigt einen API-Schlüssel und nutzt einen Tarif mit Credits.

### Kann ich einen Code-Screenshot ohne Installation von Software erstellen?

Ja. Fügen Sie den Code ein, wählen Sie eine Sprache und ein Farbthema und laden Sie das Bild herunter. Das Tool läuft in Ihrem Browser und auf unserem Render-Server, daher ist nichts zu installieren. Für das kostenlose Tool benötigen Sie kein Konto, allerdings kann vorher eine kurze Sicherheitsprüfung erscheinen.

### Kann ich ein Code-Bild in einem Blogbeitrag oder auf Folien verwenden?

Ja. Platzieren Sie die PNG- oder JPG-Datei in einem Blogbeitrag, einer Präsentation oder einem Social-Media-Beitrag. Wir fügen Bildern aus dem kostenlosen Tool kein Wasserzeichen hinzu. Prüfen Sie vor dem Teilen, dass der Code keine Schlüssel oder Passwörter enthält, denn jede Person, die das Bild sieht, kann sie lesen.

### Kann ich eine kurze Funktion für einen Social-Media-Beitrag in ein Bild umwandeln?

Ja. Wenige Zeilen eignen sich gut als Bild, denn das Bild richtet sich nach dem Code, und eine lange Datei ergibt ein hohes Bild. Wählen Sie ein Thema und einen Hintergrund, die zu Ihrem Feed passen, und laden Sie dann die PNG-Datei herunter. Wählen Sie die Pixeldichte 2x, wenn der Beitrag groß angezeigt wird.

## Ähnliche Tools

- [HTML in Bild umwandeln](https://aiipworld.com/de/tools/html-in-bild/index.md)
- [Text in PNG umwandeln](https://aiipworld.com/de/tools/text-in-png/index.md)
- [og image generator](https://aiipworld.com/de/tools/og-image-generator/index.md)
- [SVG in PNG umwandeln online: SVG-Code einfügen oder Datei öffnen](https://aiipworld.com/de/tools/svg-in-png/index.md)
- [HTML in JPG umwandeln: Konverter](https://aiipworld.com/de/tools/html-in-jpg/index.md)

Seite: https://aiipworld.com/de/tools/code-in-bild/