So nutzt du: Code zu Bild
- Füge deinen Code ein oder probiere das Sample. Die Sprache wird automatisch erkannt, du kannst sie aber auch selbst wählen.
- Wähle ein Theme, einen Hintergrund und einen Fensterstil und gib in der Titelleiste einen Dateinamen ein.
- Passe den Innenabstand und die Schriftgröße an; aktiviere Zeilennummern, wenn du dich darauf beziehen willst.
- Lade ein PNG herunter (2× ist auf Retina-Displays und in Social Media scharf), ein SVG für Doku oder klicke auf Bild kopieren und füge es in Slack, X oder eine Folie ein.
Warum Code als Bild teilen?
In Social Media und auf Folien verliert Code als Text seine Formatierung und Farben. Ein Code-Bild behält Einrückung, Highlighting und Layout genau so, wie du es willst, sieht im Feed gut aus und lässt sich nicht von einem Textverarbeitungsprogramm verschandeln. Für Dokumentation, aus der Leute Code kopieren sollen, nutze weiterhin Text-Codeblöcke — und setze das Bild nur als Illustration ein.
So wird es gezeichnet
Der Ausschnitt wird von einem kleinen eingebauten Tokenizer eingefärbt — Kommentare, Strings, Zahlen, Schlüsselwörter, Funktionen und Eigenschaften für zehn gängige Sprachen — und mit der Monospace-Schrift deines Systems auf eine Canvas gezeichnet. Der PNG-Export zeichnet es in 1×, 2× oder 3× neu, damit es scharf bleibt; der SVG-Export behält den Text als Text, lässt sich auf jede Größe skalieren und bleibt durchsuchbar. Alles passiert in deinem Browser.
Verwandte Tools: JavaScript Formatter, HTML Formatter, CSS Gradient Generator.
Auch gesucht als: code to image, code screenshot erstellen, code snippet als bild, code bild generator, schöne code screenshots, code als png, syntax highlighting bild, code als bild teilen.
Passende Tools zu: Code zu Bild
- CSS Formatter — Verwandle ein minifiziertes Stylesheet in gut lesbares CSS mit einer Eigenschaft pro Zeile und sauber verschachtelten @media-Blöcken.
- JSON Formatierer — Füge JSON ein, um es zu formatieren, zu minifizieren oder zu prüfen.
- Markdown Editor — Schreibe Markdown mit einer Live-Vorschau nebeneinander, einer Formatierungsleiste und Tastenkürzeln.
- OG-Bildgenerator — Erstelle in Sekundenschnelle ein professionelles Vorschaubild für Links auf Facebook, LinkedIn, X, Slack und WhatsApp – wähle eine Vorlage aus, gib deinen Titel ein, füge ein Logo hinzu und lade dann die PNG-Datei sowie die passenden Meta-Tags herunter.