Code zu Bild

Verwandle einen Code-Schnipsel im Browser in ein Bild mit Syntaxhervorhebung – mit über 20 Sprachen, eigenen Themes und Hintergründen, Zeilennummern und PNG- oder SVG-Export.

Tool wird geladen…

Code zu Bild — Füge einen Schnipsel ein, wähle die Sprache (oder lass die automatische Erkennung raten) und gestalte eine Code-Karte im Carbon-Stil mit einem Theme, einem Verlaufs-, einfarbigen, eigenen oder transparenten Hintergrund, einer einstellbaren Monospace-Schrift, Zeilennummern und einem editierbaren Fenstertitel. Exportiere sie als PNG in 1x–3x oder als SVG oder kopiere das Bild direkt in die Zwischenablage. Syntaxhervorhebung (Prism) und Bilderfassung (html-to-image) laufen vollständig in deinem Browser, sodass dein Code nie hochgeladen wird.

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 für einen Blogbeitrag, eine Präsentation, ein README oder einen Social-Media-Post. Es hebt über 20 Sprachen hervor, darunter JavaScript, TypeScript, Python, Go, Rust, Java, SQL und mehr, mit einer optionalen automatischen Erkennung, die die Sprache aus deinem Code errät. Gestalte die Karte mit einem von sieben Themes, einem voreingestellten Verlauf, einer eigenen Farbe oder einem eigenen Verlauf oder einem transparenten Hintergrund und feine dann Monospace-Schrift, Schriftgröße, Innenabstand, Zeilennummern, Fenstertitel und Ausgabebreite ab. Die Karte wird beim Bearbeiten live gerendert, und du kannst sie als PNG in 1x, 2x oder 3x exportieren, als SVG speichern oder in die Zwischenablage kopieren.

So verwendest du Code zu Bild

  1. Füge deinen Code ein oder tippe ihn, oder verbinde im Arbeitsbereich die Textausgabe eines anderen Tools mit dem Eingangsport.
  2. Wähle die passende Sprache oder aktiviere die automatische Erkennung in den Einstellungen, damit das Tool sie aus deinem Code errät.
  3. Wähle in den Einstellungen ein Theme und einen Hintergrund – einen voreingestellten Verlauf, eine eigene einfarbige Farbe oder einen eigenen Verlauf oder transparent.
  4. Feine Monospace-Schrift, Schriftgröße, Innenabstand, Zeilennummern, Fenstertitel und Ausgabebreite nach Belieben ab.
  5. Beobachte, wie sich die Live-Vorschau beim Bearbeiten aktualisiert; klicke sie an, um sie in der Zoom-Ansicht zu vergrößern.
  6. Exportiere die Karte als PNG in 1x–3x, lade sie als SVG herunter oder kopiere das Bild in die Zwischenablage.

Beispiele

Ein Go-Schnipsel mit Zeilennummern

Füge eine Go-Funktion ein, aktiviere die automatische Erkennung, damit die Sprache für dich gewählt wird, schalte Zeilennummern ein, wähle das Nord-Theme und exportiere ein 2x-PNG für ein Tutorial.

Eine Marken-Karte mit eigenem Verlauf

Stelle den Hintergrund auf Eigener Verlauf, wähle die zwei Markenfarben und einen Winkel, füge einen Fenstertitel wie app.tsx hinzu und kopiere das Bild direkt in die Zwischenablage.

Ein skalierbares SVG für die Doku

Wähle das helle Snow-Theme, stelle die Ausgabebreite ein und lade ein SVG herunter, damit die Code-Karte in deiner Dokumentation in jeder Größe gestochen scharf bleibt.

Häufig gestellte Fragen

Welche Sprachen kann es hervorheben?
Über 20, darunter JavaScript, TypeScript, JSX/TSX, HTML, CSS, JSON, Python, Bash, Java, C, C++, C#, Go, Rust, Ruby, PHP, SQL, YAML, Markdown, Kotlin, Swift und GraphQL. Wähle eine aus dem Dropdown oder aktiviere die automatische Erkennung, damit die Sprache aus deinem Code erraten wird.
Was kann ich exportieren, und in welcher Qualität?
Exportiere ein PNG in 1x-, 2x- oder 3x-Pixeldichte, speichere ein Vektor-SVG oder kopiere das Bild direkt in die Zwischenablage. Wählst du den transparenten Hintergrund, behält das PNG einen Alphakanal ohne Hintergrund hinter der Karte.
Kann ich das Aussehen der Karte ändern?
Ja. Wechsle zwischen sieben Themes, wähle einen voreingestellten Verlauf, eine eigene einfarbige Farbe oder einen eigenen Verlauf oder einen transparenten Hintergrund und passe Monospace-Schrift, Schriftgröße, Innenabstand, Zeilennummern, editierbaren Fenstertitel und Ausgabebreite an.
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 Herunterladen, Bild kopieren oder SVG herunterladen drückst, sodass beim Tippen nicht bei jedem Tastendruck neu erfasst wird. Die gestylte Vorschau aktualisiert sich weiterhin live; im Arbeitsbereich wird das PNG automatisch neu erstellt, damit es zum nächsten Tool fließen kann.

Verwandte Tools

Farbkontrast-Prüfer

Prüfe den WCAG-2.1-Kontrast und den APCA-Lc-Wert zwischen Text und Hintergrund, sieh AA-, AAA- und 3:1-Badges und wende die nächste bestandene Farbe an.

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 OKLCH-, HSL- oder RGB-Skala mit einstellbaren Stufen, WCAG-Kontrasthinweisen pro Stufe und Export als CSS, Tailwind und JSON.

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.