Skip to main content

Code-Screenshot

Schöne Code-Snippet-Bilder mit anpassbaren Themes erstellen.

Geprüft von · Zuletzt geprüft

JavaScript
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10));

So verwendest du das Code-Screenshot-Tool

  1. Code einfügen oder tippen in den Editor-Bereich. Jede Sprache wird akzeptiert - das Tool parst oder prüft deinen Code nicht, es legt nur die Zeichen aus.
  2. Theme auswählen: Dunkel und Hell sind die neutralen Standards; Monokai und Dracula fügen Persönlichkeit hinzu, wenn der Screenshot für einen Blog-Header oder Social-Post bestimmt ist.
  3. Abstand, Eckenradius und Schriftgröße anpassen, um das visuelle Gewicht der Ausgabe zu steuern. Größerer Abstand und 24-px-Schriftgröße sieht auf einer 1200x630-Social-Karte gut aus; engere Einstellungen passen besser in Dokumentation.
  4. Optional einen Titel hinzufügen (Dateiname, Modulname) und die Drei-Punkt-Fenstersteuerungen umschalten, um einen macOS-Fensterrahmen zu imitieren.
  5. Auf "Screenshot erstellen" klicken. Das Tool rendert den gestylten Code in Retina-Auflösung in einen Canvas und bietet das PNG zum Download an.

Wie das Canvas-Rendering funktioniert

Wir bauen ein In-Memory-HTMLCanvasElement, das auf die Maße des gestylten Code-Blocks skaliert ist, dann malen wir schichtweise. Ein ctx.fillRect mit der Hintergrundfarbe des Themes bildet die Basis; abgerundete Ecken verwenden ctx.roundRect (Teil der Canvas-2D-Spezifikation seit 2022, polyfilled in älteren Browsern). Fenster-Steuerpunkte sind drei kleine Kreise, die mit ctx.arc gezeichnet werden. Die Titelleiste verwendet ctx.fillText in einer proportionalen UI-Schriftart. Der Code-Körper setzt eine Monospace-Schriftart über ctx.font, dann geht er Zeilen des Quellcodes durch und ruft ctx.fillText einmal pro Zeile bei berechneten y-Versätzen auf.

Weil der Canvas bei Gerätepixel-Verhältnis skaliert wird (window.devicePixelRatio ist 2 auf Retina-Displays, 3 auf einigen Telefonen), ist das exportierte PNG auf HiDPI-Bildschirmen scharf. Für Maße erzeugt ein typischer 20-zeiliger Code-Block bei 16-px-Schriftart etwa 800x600 logische Pixel, was bei 2x-Dichte als 1600x1200 exportiert wird - groß genug für Twitter/X- und LinkedIn-Header ohne zusätzliche Skalierung. Der endgültige Export geht durch canvas.toBlob("image/png"), was eine verlustfreie Datei ohne JPEG-Artefakte erzeugt.

Wann ein Code-Screenshot einen Code-Block schlägt

  • Twitter/X-Posts, wo ein gestyltes Bild mehr Engagement erhält als eingefügter Code in einem Monospace-Text.
  • Konferenz-Präsentationsfolien, wo ein sauber gerenderter Screenshot von der letzten Reihe besser lesbar ist als winzig eingefügter Code.
  • Blog-Post-Hero-Bilder und Open-Graph-Social-Vorschauen, wo ein gestalteter Code-Ausschnitt den technischen Inhalt visuell signalisiert.
  • Dokumentation, wo eingefügter Code als aktives HTML oder Markdown interpretiert werden könnte (Escape-Hölle in einer MDX-Datei vermeiden).
  • Teilen einer minimalen Bug-Reproduktion auf Discord, Slack oder Foren, wo ein Screenshot seine Formatierung auch nach dem Kopieren beibehält.
  • Erstellen einer konsistenten Ästhetik für eine Tutorial-Serie, bei der jeder Screenshot dasselbe Theme, denselben Abstand und denselben Fensterrahmen hat.

Rendering-Fallstricke, auf die du stoßen könntest

  • Keine Syntaxhervorhebung im Standard-Flow. Farben sind pro Theme einheitlich, was sauber aussieht, aber die visuelle Hierarchie abbaut, die echten Code lesbar macht. Für hervorgehobene Screenshots verwende stattdessen Carbon oder Ray.so.
  • Tab-Breite variiert je nach Schriftart. Die Canvas-Monospace-Schriftart (Menlo, Consolas oder SF Mono je nach OS) behandelt Tabs als variable Breite. Wenn dein Code Tabs statt Leerzeichen verwendet, rücke mit Leerzeichen neu ein, bevor du screenshootst.
  • Sehr lange Zeilen werden abgeschnitten. Die Canvas-Breite ist auf die breiteste Zeile zum Rendering-Zeitpunkt fixiert. Wenn eine einzelne Zeile extrem lang ist (400+ Zeichen), wird die Ausgabe awkward breit. Breche lange Zeilen manuell oder scrolle die Quelle.
  • Unicode-Glyphen hängen von OS-Schriftarten ab. Emoji, chinesische/japanische/koreanische Zeichen oder besondere Symbole rendern mit der OS-Rückfall-Schriftart-Kette. Zwei Benutzer unter Windows vs. macOS können leicht unterschiedliche Glyphen für denselben Code sehen.
  • Keine Zeilennummern standardmäßig. Das Tool hält die Ausgabe sauber; Zeilennummern müssten in einem separaten Durchgang hinzugefügt oder dem Quelltext vorangestellt werden.

Die Ästhetik von Code als Bild

Code-Screenshots als Design-Trend gehen auf Carbon.sh zurück (2017 von Dawn Labs gestartet), das das Teilen von Code auf Twitter zu einem visuellen Medium machte. Vor Carbon posteten Entwickler Screenshots ihrer lokalen IDE, die inkonsistent aussahen und an individuelle Setups gebunden waren. Carbon standardisierte die Ästhetik: abgerundete Ecken, macOS-Ampel-Fenstersteuerungen, ein einziges konsistentes Theme, enger Abstand, Monospace-Schriftart. Ray.so (vom Raycast-Team) fügte mehr Themes und saubereren Export hinzu. Polacode popularisierte das Muster als VS-Code-Erweiterung. Die zugrundeliegende Technik ist einfach - Text zu Canvas oder SVG rendern und stylen - aber die UX von "einfügen, anpassen, herunterladen" hat das Muster populär gemacht. Heute sind Code-Screenshots ein Standard-Asset in Konferenz-Vorträgen, Dev-Blog-Hero-Bildern und Twitter-Threads.

Wie dieses Tool sich von Carbon und Ray.so unterscheidet

Carbon.sh ist das Original und immer noch das ausgefeilteste, mit echter Syntaxhervorhebung durch PrismJS, Dutzenden von Themes und Export zu PNG und SVG. Ray.so (ray.so von Raycast) ist das moderne Äquivalent mit Raycasts design-vorwärtsgerichteter Ästhetik und besseren Exportoptionen. Beide laufen im Browser, laden aber größere Bundles (PrismJS allein ist ein paar Hundert KB), und beide verwenden ihren eigenen Server für einige Funktionen wie benutzerdefinierte Logo-Uploads. Dieses Tool rendert ohne eine Syntaxhervorhebungs-Abhängigkeit, was es leichter und schneller zu laden macht, und es garantiert, dass nichts, was du einfügst, übertragen wird. Wenn dein Code sensibel ist (API-Keys in einer Fehlermeldung, proprietäre Algorithmen) und Datenschutz wichtig ist, bleibe hier; wenn du einen Hollywood-glänzenden regenbogen-hervorgehobenen Screenshot möchtest, ist Carbon das richtige Tool. Für VS-Code-Benutzer erledigt die Polacode-Erweiterung alles lokal innerhalb des Editors.

Häufig gestellte Fragen

Hebt das Tool mein Code wie eine IDE hervor?

Nicht in der aktuellen Version. Der Code wird in der Vordergrundfarbe des Themes gleichmäßig gerendert, ohne Pro-Token-Einfärbung. Das hält die Ausgabe visuell sauber und das Bundle des Tools klein. Wenn du Syntaxfarben benötigst, verwenden Carbon.sh und Ray.so PrismJS für reichhaltige Hervorhebung über viele Sprachen und erzeugen IDE-ähnlichere Ausgabe.

Welche Auflösung verwendet das exportierte PNG?

Der Canvas ist auf die Maße des gestylten Code-Blocks mal <code>window.devicePixelRatio</code> skaliert, also exportiert ein Retina-Mac oder HiDPI-Windows-Laptop mit 2x oder 3x der logischen Pixel. Ein Code-Block, der auf dem Bildschirm 800x600 aussieht, ist ein 1600x1200 oder 2400x1800 PNG auf dem Datenträger, was auf Social-Media- Feeds und Präsentationsfolien ohne weiteres Skalieren scharf aussieht.

Lädt das Tool mein Code-Snippet irgendwo hoch?

Nein. Der Code verlässt nie deinen Browser. Er wird zu einem lokalen Canvas gerendert und als Blob über <code>canvas.toBlob</code> exportiert. Kein fetch-Aufruf überträgt den Text, kein Analytics-Ereignis referenziert ihn. Das ist wichtig, weil Entwickler häufig Code screenshotten, der API-Keys, Geheimnisse oder proprietäre Logik enthält - lokal zu bleiben verhindert diese Lecks.

Kann ich eine eigene benutzerdefinierte Schriftart verwenden?

Nicht über die aktuelle Benutzeroberfläche. Das Tool wählt eine Monospace-Schriftart aus dem Standard-Stack des Browsers: SF Mono unter macOS, Consolas unter Windows, DejaVu Sans Mono unter Linux. Für eine bestimmte benutzerdefinierte Schriftart (JetBrains Mono, Fira Code, Iosevka mit Ligaturen) müsstest du entweder die Schriftart systemweit installieren oder ein Tool verwenden, das Web-Fonts in seinen Canvas- Kontext lädt, wie Carbon mit benutzerdefinierter Schriftart-Unterstützung.

Was ist die maximale Länge des Code, den ich screenshotten kann?

Es gibt keine harte Zeichenbegrenzung, aber die praktische Lesbarkeit bricht über 50-80 Zeilen ein - das resultierende Bild wird sehr hoch und winzig in Feeds. Erwäge für langen Code eine Serie fokussierter Screenshots, die die wichtigsten Teile zeigen, mit Auslassungspunkten (<code>// ...</code>) als Brücke. Sehr große Blöcke können auch Canvas- Flächenbegrenzungen von etwa 268 Millionen Pixeln des Browsers auslösen, obwohl das bei typischen Schriftgrößen schwer zu erreichen ist.

Warum sieht mein Bild auf Twitter oder LinkedIn pixelig aus?

Social-Plattformen komprimieren hochgeladene Bilder durch ihre eigenen Pipelines neu, was PNGs weichzeichnen kann. Um das zu minimieren, exportiert das Tool bereits in Retina-Auflösung (2x oder 3x der logischen Pixel). Wenn die Ausgabe trotzdem weicher wird, lade das PNG in voller Auflösung hoch und lass die Plattform herunterskalieren - verkleinere es nicht vorher, weil jede Komprimierungsrunde Artefakte aufeinanderstapelt.

Kann ich meine Theme-Präferenzen für das nächste Mal speichern?

Derzeit nicht; die Einstellungen werden beim Neuladen der Seite zurückgesetzt. Für eine konsistente persönliche Ästhetik behalte deine bevorzugten Theme- und Auffüllungswerte in einer Notiz und wende sie pro Sitzung erneut an. Wenn du häufig screenshotten, speichert eine lokale Erweiterung wie Polacode für VS Code Einstellungen dauerhaft.

Wie vergleicht sich das mit einem nativen Screenshot-Tool?

Native Screenshot-Tools (macOS Screenshot, Windows Snip & Sketch) erfassen, was auf deinem Bildschirm ist, einschließlich der Schriften, Farben und sichtbarer UI-Unordnung deiner IDE. Dieses Tool erzeugt ein sauberes, eigenständiges, IDE-agnostisches Bild mit konsistenter Gestaltung - besser für öffentliches Teilen. Verwende native Screenshots für "schau dir diesen Bug in meinem Editor an"; verwende dieses Tool für "hier ist ein Snippet, das ich auf Twitter teilen möchte".

Behält das Tool die Einrückung korrekt bei?

Ja, solange dein Quellcode Leerzeichen verwendet. Tabs rendern in variabler Breite je nach Schriftart und Browser, was zu falsch ausgerichtetem Ergebnis führen kann. Viele Editoren haben eine "Einrückung in Leerzeichen umwandeln"-Aktion - führe das für deinen Quellcode aus, um konsistente visuelle Ausrichtung im Screenshot zu garantieren.

Kann ich in SVG statt PNG exportieren?

Derzeit nicht. PNG ist das einzige Exportformat, gewählt weil es Farbcode-Screenshots mit flachen Farben extrem gut komprimiert (oft nur 20-40 KB für einen typischen Block) und universell unterstützt wird. Für SVG-Export mit theme-unabhängiger Skalierbarkeit bietet Carbon.sh SVG-Ausgabe - oder exportiere hier als PNG und vektorisiere extern mit einem Tool wie Potrace, obwohl das Ergebnis selten kleiner als das ursprüngliche PNG ist.

Verwandte Tools

Mehr Developer Tools

AI Token Counter

Count tokens for GPT-4o, Claude, and Gemini models instantly.

Open tool

Base64 Encoder & Decoder

Encode UTF-8 text to Base64 online or decode Base64 back to UTF-8 and plain text. Runs in your browser with no upload.

Open tool

Bulk URL Encode / Decode

Encode or decode many URLs at once. Paste a newline-separated list and the tool processes each line in parallel, preserving order and blank lines.

Open tool

chmod Calculator

Calculate and convert Unix file permission modes between octal and symbolic.

Open tool

Color Converter

Convert colors between HEX, RGB, HSL and CMYK formats.

Open tool

Cron Expression Parser

Parse cron expressions into human-readable schedules with next run times.

Open tool
ZeroUtil unterstützen