Code in Bild umwandeln
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.
- Zeilen werden nicht umgebrochen. Eine lange Zeile macht das Bild breiter, und Tabulatoren werden zu 4 Leerzeichen.
- Die Schrift ist ausschließlich Liberation Mono. Zeichen, die sie nicht enthält, werden mit einer Ersatzschrift gezeichnet und stehen möglicherweise nicht richtig untereinander.
- Im kostenlosen Tool ist die Bildhöhe bei 1x auf 2000 px begrenzt. Das Tool weist Sie darauf hin, wenn Ihr Code höher ist.
3 KB von 256 KB im kostenlosen Web-Tool erlaubt.
Erkannte Sprache: javascript. 7 Zeilen. Bild: 516 x 346 px bei 1x.
Vorschau
Gezeichnet mit den Schriftarten Ihres Browsers, daher kann der Abstand leicht vom Ergebnis des Servers abweichen.
Bestätigen Sie die Sicherheitsprüfung, um die Schaltfläche zu aktivieren.
Ergebnis
Ihr Bild erscheint hier.
Das kostenlose Web-Tool erfasst höchstens 2000px Höhe. Für höhere Erfassungen verwenden Sie die API.
Aufbewahrung: Ergebnisse der Web-Tools werden nach 10 Minuten gelöscht. API-Ergebnisse werden im kostenlosen Tarif 1 Tag aufbewahrt und bei Starter und Pro 7 Tage (bei Business und Scale 30 Tage). Ein Protokoll jedes Auftrags (Typ, Zeit, Status und Credits, nicht das, was Sie eingereicht haben) wird 30 Tage ohne Konto aufbewahrt oder, wenn Sie angemeldet sind, solange Ihr Konto besteht.
Kein Konto erforderlich
10 pro Minute und 50 pro Tag kostenlos.
Umwandlung mit einem echten Browser
Headless-Chromium (Chromium ohne Bedienoberfläche), dieselbe Engine wie die API.
Automatisch gelöscht
Ergebnisse des Web-Tools werden nach 10 Minuten entfernt.
Datenschutz: Was Sie einreichen, wird nur für diese Datei verwendet. Es wird gelöscht, sobald der Auftrag endet, auch aus dem Auftragsprotokoll, und das Ergebnis nach 10 Minuten. Siehe die Datenschutzerklärung.
So machen Sie es in Ihrem Code
Dieselbe Anfrage, aufgebaut aus der Eingabe und den Optionen oben. Erstellen Sie ein Konto, um einen API-Schlüssel zu erhalten.
curl -X POST https://api.aiipworld.com/v1/render \
-H "Authorization: Bearer $AIIPWORLD_API_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"","output":"pdf","options":{}}'
# returns {"job_id": "...", "status": "queued"}; then poll:
curl https://api.aiipworld.com/v1/jobs/JOB_ID -H "Authorization: Bearer $AIIPWORLD_API_KEY"Stapel
Das Web-Tool verarbeitet 1 Dokument auf einmal. Die API nimmt eine Anfrage pro Dokument an, sodass Sie so viele per Skript senden können, wie Ihr Tarif erlaubt.
Mehr Kontrolle
Erfassung der gesamten Seite (full_page), Zuschneiden auf einen Bereich, Anfrage-Header und ein benutzerdefinierter User-Agent sind API-Optionen. Siehe Dokumentation.
Aufbewahrung
Ergebnisse der Web-Tools werden 10 Minuten aufbewahrt; kostenlose API-Ergebnisse 1 Tag; Ergebnisse bei Starter und Pro 7 Tage; Business und Scale 30 Tage. Das Web-Tool erlaubt 10 Umwandlungen pro Minute und 50 pro Tag und Besucher.
In einem Satz
Ein kostenloses Online-Tool, das ein Code-Snippet in ein teilbares Bild mit Syntaxfarben, einem Thema und einem optionalen Fensterrahmen umwandelt.
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
Zuletzt geprüft:
So funktioniert es
- Fügen Sie Ihren Code in das Feld ein oder lassen Sie das Standardbeispiel stehen, um das Tool auszuprobieren.
- Wählen Sie eine Sprache aus der Liste oder lassen Sie die automatische Erkennung aktiv.
- Wählen Sie ein Farbthema und einen Hintergrund. Aktivieren Sie Zeilennummern oder einen Fenstertitel, wenn Sie diese möchten.
- Legen Sie die Textgröße, den Innenabstand, das Format (PNG oder JPG) und die Pixeldichte (1x, 2x oder 3x) fest.
- Bestätigen Sie die kurze Sicherheitsprüfung, falls sie erscheint, erstellen Sie das Bild und laden Sie die Datei herunter.
Beispielergebnis
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.
Brauchen Sie das in Ihrer App oder in großen Mengen?
Dieses Tool läuft auf der Render-API, deshalb ist dasselbe Bild aus Ihrem Code eine HTTP-Anfrage. Ein kostenloses Konto enthält 100 Credits pro Monat.