Code zu Bild: Code-Snippets als PNG- oder SVG-Screenshot | We.Inc
Füge Code ein und erhalte ein sauberes Bild davon: Syntaxfarben, sechs Themes, Verlaufshintergründe, Fensterleiste, Zeilennummern und Größen für Social Media. Exportiere ein scharfes 2x-PNG oder ein SVG. Kostenlos, in deinem Browser.
Code-zu-Bild-Generator
Ein Code-Bild ist ein Bild eines Snippets mit Syntaxfarben, Innenabstand und Hintergrund, gedacht für Folien, Posts und Dokumente, in denen echte Codeblöcke nicht verfügbar sind. Füge unten Code ein, wähle Sprache, Theme und Hintergrund, entscheide dich für eine Größe wie 1200 mal 675 und lade ein scharfes PNG oder ein SVG herunter.
Größenvorlagen
Vorlage
Pixel
Geeignet für
Automatisch
Passt sich dem Code an
Dokumentation, Folien, README-Dateien
Querformat 16:9
1200 mal 675
Linkvorschauen und breite Feed-Posts
Quadratisch
1080 mal 1080
Quadratische Feed-Posts
Hochformat 4:5
1080 mal 1350
Hohe Feed-Posts
Füge Code ein oder tippe ihn, und die Vorschau aktualisiert sich laufend. Die Sprache wird automatisch erkannt, oder du wählst eine von neun aus. PNG-Dateien werden in doppelter Größe exportiert, damit Text auf Bildschirmen mit hoher Pixeldichte scharf bleibt.
Füge Code in den Editor ein. Die Sprache wird anhand des Inhalts erraten; ändere sie, falls die Vermutung falsch ist.
Wähle ein Theme, einen Hintergrund und eine Größe. Schalte Fensterleiste und Zeilennummern ein oder aus und lege Innenabstand und Schriftgröße fest.
Gib einen Dateinamen für die Fensterleiste an, wenn er den Lesern hilft.
Lade ein PNG (mit 2x gerendert) oder ein SVG herunter, das den Code als echten, markierbaren Text behält.
Halte Snippets kurz. Zehn bis zwanzig Zeilen lassen sich in einem Post gut lesen; längerer Code gehört in einen Gist oder einen Codeblock, den man kopieren kann.
Nutze für Social-Media-Posts eine Schriftgröße von 16 oder mehr, da sie oft auf dem Handy angesehen werden.
Wenn du ein Bild von Code teilst, teile den Code auch als Text oder Link. Screenreader können das Bild nicht vorlesen, und niemand kann daraus kopieren.
Wähle ein helles Theme für Folien in hellen Räumen und ein dunkles für Bildschirme und Social-Media-Feeds.
Häufige Fragen
Wird mein Code irgendwohin hochgeladen?
Nein. Hervorhebung und Bildexport passieren in deinem Browser. Nichts wird an einen Server gesendet, daher ist das Tool auch für privaten Code sicher.
Warum ist das PNG doppelt so groß wie gewählt?
Es wird mit 2x-Pixeldichte exportiert, damit Text auf hochauflösenden Handy- und Laptop-Bildschirmen scharf bleibt. Wird es in der gewählten Größe angezeigt, stehen hinter jedem CSS-Pixel vier Bildpixel.
Wofür ist der SVG-Export gedacht?
SVG behält den Code als Text in einer Vektorgrafik, sodass sie sich beliebig skalieren lässt und der Text in manchen Programmen weiterhin markierbar ist. Es nutzt die Monospace-Schrift des jeweiligen Programms, daher kann es auf einem anderen Computer etwas anders aussehen als das PNG.
Wie genau ist das Syntax-Highlighting?
Es ist ein schlanker Tokenizer, der Schlüsselwörter, Strings, Zahlen, Kommentare, Funktionen, Tags und Attribute einfärbt. Das deckt ab, was ein Snippet im Bild lesbar macht. Es ist kein vollständiger Parser, daher kann ungewöhnliche Syntax als normaler Text eingefärbt werden.
Code-Bilder, die Leute wirklich lesen
Beschränke dich auf den wichtigen Teil. Entferne Imports und Boilerplate, sofern sie nicht der Kern sind, und markiere mit einem Kommentar die Zeile, auf die die Leute schauen sollen.
Kontrast ist in einem Bild genauso wichtig wie auf einer Seite. Die Themes hier halten Kommentare lesbar, aber zurückhaltender als den Code, und trennen Strings und Schlüsselwörter deutlich voneinander.
Alt-Text für Code-Bilder
Beschreibe beim Posten im Alt-Text, was der Code tut, zum Beispiel: JavaScript-Funktion, die eine Sucheingabe um 300 Millisekunden debounct. Füge den Code selbst in den Post-Text oder eine Antwort ein, wenn die Plattform das erlaubt.