Code zu Bild

Verwandle einen Code-Schnipsel direkt im Browser in eine elegante PNG-Karte mit Syntaxhervorhebung – mit Theme, Verlaufs- oder transparentem Hintergrund und Innenabstand, ganz ohne Upload.

Tool wird geladen…

Code zu Bild — Füge einen Schnipsel ein, wähle Sprache, Theme, Hintergrund und Innenabstand und exportiere eine Code-Karte im Carbon-Stil als transparentes oder verlaufsunterlegtes PNG. Syntaxhervorhebung (Prism) und Bilderfassung (html-to-image) laufen vollständig in deinem Browser, sodass dein Code nie hochgeladen wird. Die Vorschau aktualisiert sich live, während du tippst oder Optionen wechselst.

Was ist Code zu Bild?

Code zu Bild ist ein kostenloses, browserbasiertes Tool, das einen Code-Schnipsel in ein teilbares Bild verwandelt – eine stilvolle Code-Karte mit Syntaxhervorhebung, die du in einen Blogbeitrag, eine Präsentation, ein README oder einen Social-Media-Post einfügen kannst. Es ist beliebt bei Entwicklern, technischen Redakteuren und Lehrenden, die ihren Code bewusst gestaltet zeigen möchten, statt einen flachen Screenshot einzufügen. Wähle Hervorhebung für JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python oder Bash und gestalte die Karte dann mit einem Theme, einem Verlaufs- oder einfarbigen Hintergrund und deinem bevorzugten Innenabstand. Die Karte wird beim Bearbeiten live gerendert, und ein einziger Button „PNG herunterladen“ exportiert sie in 2-facher Auflösung.

So verwendest du Code zu Bild

  1. Füge deinen Code in den Editor ein oder tippe ihn, oder verbinde im Arbeitsbereich die Textausgabe eines anderen Tools mit dem Eingangsport.
  2. Wähle die passende Sprache – JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python oder Bash –, damit die Syntaxhervorhebung korrekt ist.
  3. Öffne die Einstellungen, um ein Theme (Midnight, Graphite oder Snow), einen Hintergrund (Aurora, Sunset, Ocean, Slate oder Transparent) und den Innenabstand (Eng, Normal oder Großzügig) zu wählen.
  4. Beobachte, wie sich die Live-Vorschau beim Tippen und beim Ändern von Optionen aktualisiert; klicke sie an, um sie in der Zoom-Ansicht zu vergrößern.
  5. Drücke „PNG herunterladen“, um die Karte als hochauflösendes Bild zu speichern, oder leite das PNG im Arbeitsbereich direkt an ein nachgelagertes Bild-Tool weiter.

Beispiele

Eine JavaScript-Funktion für einen Blogbeitrag

Füge eine kurze JavaScript-Funktion ein, belasse die Sprache auf JavaScript, wähle das Theme Midnight mit dem Verlaufshintergrund Aurora und lade ein gestochen scharfes PNG herunter, um es statt eines flachen Screenshots in einen Artikel einzubetten.

Ein transparenter CSS-Schnipsel für Folien

Stelle die Sprache auf CSS und den Hintergrund auf Transparent, damit das exportierte PNG keinen Hintergrund hat und die Code-Karte sauber auf einem farbigen Folienhintergrund sitzt.

Eine Bash-Befehlskarte für ein README

Wähle Bash, das helle Theme Snow mit dem einfarbigen Hintergrund Slate und großzügigem Innenabstand und exportiere eine saubere, gut lesbare Befehlskarte für die Dokumentation deines Projekts.

Häufig gestellte Fragen

Welche Sprachen kann es hervorheben?
Es hebt JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python und Bash hervor. Wähle im Sprach-Dropdown die passende für deinen Schnipsel; lässt sich ein Token nicht klassifizieren, fällt es einfach auf die Basistextfarbe zurück.
In welchem Bildformat wird exportiert?
Es exportiert ein PNG in 2-facher Pixeldichte für scharfe Ergebnisse. Wenn du die Hintergrundoption Transparent wählst, behält das PNG einen Alphakanal ohne Hintergrund hinter der Code-Karte.
Kann ich das Aussehen der Karte ändern?
Ja. In den Einstellungen kannst du zwischen den Themes Midnight, Graphite und Snow wechseln, einen Hintergrund Aurora, Sunset, Ocean, Slate oder Transparent wählen und einen Innenabstand Eng, Normal oder Großzügig um den Code festlegen.
Wird mein Code irgendwohin hochgeladen?
Nein. Sowohl die Syntaxhervorhebung (Prism) als auch die Bilderfassung (html-to-image) laufen zu 100 % clientseitig in deinem Browser. Dein Code wird nie hochgeladen, an unsere Server gesendet oder geteilt, sodass selbst vertrauliche Schnipsel auf deinem Gerät bleiben.
Warum erscheint das Bild auf der Tool-Seite erst, wenn ich auf Herunterladen klicke?
Auf der eigenständigen Seite wird das PNG erzeugt, wenn du „PNG herunterladen“ drückst, sodass beim Tippen nicht bei jedem Tastendruck neu erfasst wird. Die gestylte Vorschau aktualisiert sich beim Bearbeiten trotzdem live; im Arbeitsbereich wird das PNG zudem automatisch neu erstellt, damit es zum nächsten Tool fließen kann.

Verwandte Tools

Farbkontrast-Prüfer

Prüfe das WCAG-Kontrastverhältnis zwischen einer Vordergrund- und einer Hintergrund-HEX-Farbe und sieh, ob es AA und AAA für normalen und großen Text besteht.

Farbmischer

Mische zwei HEX-Farben in einem gewählten Verhältnis im RGB- oder Lab-Farbraum und lies die entstehende Mittelfarbe als Farbfeld und kopierbaren HEX-Wert ab.

Farbabstufungs-Generator

Verwandle eine HEX-Basisfarbe in eine Tailwind-typische Tonwertskala von 50 bis 950, gemischt zu Weiß und Schwarz, jede Stufe mit Farbfeld und kopierbarem HEX-Wert.

Farbenblindheits-Simulator

Lade ein Bild hoch und sieh dir die Vorschau an, wie es bei Protanopie, Deuteranopie, Tritanopie oder vollständiger Farbenblindheit aussieht, und lade dann das simulierte Ergebnis herunter.