Tokenlabor

Code als Bild

Code als Bild speichern: Quelltext einfügen, Sprache und Farbschema wählen und ein scharfes PNG mit Syntaxfarben, Zeilennummern und Fensterrahmen herunterladen.

Vorschau

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

Code-Screenshot ohne Umweg

Mit Code als Bild machen Sie aus einem Ausschnitt Quelltext eine saubere PNG-Grafik für Folien, Dokumentation, Blogartikel oder soziale Netzwerke. Statt eines unscharfen Code-Screenshots aus dem Editor zeichnet das Werkzeug den Text in einer Monospace-Schrift neu, wahlweise mit Zeilennummern, Fensterrahmen und in doppelter oder dreifacher Auflösung, damit er auch auf hochauflösenden Bildschirmen scharf bleibt.

Das Syntax-Highlighting ist bewusst einfach gehalten: Kommentare, Zeichenketten, Zahlen und Schlüsselwörter werden für JavaScript, TypeScript, Python, JSON und SQL eingefärbt. Das reicht für gut lesbare Beispiele, ersetzt aber keinen vollständigen Parser; ungewöhnliche Konstrukte wie verschachtelte Template-Literale oder Regex-Literale in JavaScript können falsch eingefärbt werden. So können Sie Quellcode als PNG speichern oder direkt in die Zwischenablage kopieren und dort einfügen, wo Sie das Code-Snippet teilen möchten.

Bedenken Sie beim Code in Bild umwandeln: Ein Bild ist für Screenreader und Suchmaschinen nicht lesbar, und niemand kann den Code herauskopieren. In Dokumentation und Tickets ist ein Codeblock als Text deshalb meist besser; geben Sie Bildern einen Alternativtext oder verlinken Sie den Quelltext. Prüfen Sie außerdem, dass keine Passwörter, Tokens oder internen Adressen im Ausschnitt stehen. Für Text-Codeblöcke hilft die Markdown-Vorschau.

Anleitung: Code als Bild in 4 Schritten

  1. Den Quelltext in das Feld „Code“ einfügen.
  2. Die Sprache wählen oder automatisch erkennen lassen und das Farbschema Hell oder Dunkel einstellen.
  3. Titel im Fensterrahmen, Schriftgröße, Innenabstand und Auflösung festlegen; Zeilennummern, Fensterrahmen und Umbruch bei 100 Zeichen an- oder abwählen.
  4. Die Vorschau prüfen und mit „Bild kopieren“ oder „PNG herunterladen“ übernehmen.

Typische Anwendungsfälle

  • Präsentation: Codebeispiele in 2- oder 3-facher Auflösung als scharfes Bild auf Folien setzen.
  • Soziale Netzwerke: Ein kurzes Code-Snippet teilen, wo Codeblöcke nicht formatiert werden.
  • Schulungsunterlagen: Einheitliche Codebilder mit Zeilennummern erstellen, auf die sich der Text beziehen kann.
Fragen

Häufige Fragen

Welche Sprachen werden eingefärbt?

JavaScript und TypeScript, Python, JSON und SQL. Bei „Automatisch erkennen“ rät das Werkzeug anhand typischer Merkmale; bei anderen Sprachen wählen Sie „Nur Text“.

Warum ist das Bild größer als die Vorschau?

Bei 2-facher Auflösung hat das PNG doppelt so viele Pixel in jeder Richtung. So bleibt der Code auf Retina-Bildschirmen und in Präsentationen scharf, wenn er verkleinert angezeigt wird.

Wird mein Code hochgeladen?

Nein. Das Bild entsteht auf einem Canvas in Ihrem Browser und wird direkt als Datei angeboten.

Warum funktioniert „Bild kopieren“ nicht?

Das Kopieren von Bildern in die Zwischenablage unterstützen nicht alle Browser. Laden Sie das PNG dann herunter und fügen Sie die Datei ein.

Welche Schrift wird verwendet?

Die Monospace-Schrift Ihres Systems, zum Beispiel Consolas unter Windows oder Menlo auf dem Mac. Das Bild kann deshalb auf verschiedenen Geräten leicht unterschiedlich aussehen.

Wie mache ich einen schönen Screenshot von meinem Code?

Statt einen Bildschirmausschnitt aus dem Editor zu nehmen, fügen Sie den Code hier ein und laden ein PNG herunter. Der Text wird neu gezeichnet und bleibt mit 2-facher Auflösung auch verkleinert scharf.

Welche Auflösung brauche ich für Code-Bilder in Präsentationen?

Für Folien und hochauflösende Bildschirme reicht meist die 2-fache Auflösung, für große Projektionen oder starkes Vergrößern die 3-fache. Eine größere Schriftgröße hilft zusätzlich, wenn das Publikum weiter entfernt sitzt.

Weitere Werkzeuge

Das könnte auch helfen

Alle 358 Werkzeuge

Cron-Ausdruck erklären

Crontab-Zeilen mit 5 oder 6 Feldern auf Deutsch erklärt, mit den nächsten 10 Ausführungen.

Öffnen

Cron-Generator

Zeitplan im Formular wählen und die fertige Crontab-Zeile kopieren.

Öffnen

Unix-Zeitstempel umrechnen

Timestamp in Datum und zurück, Sekunden und Millisekunden erkannt, UTC und Berlin.

Öffnen

UUID-Generator

UUID v4 und v7 erzeugen, bis zu 1.000 auf einmal, und vorhandene UUIDs prüfen.

Öffnen

ULID-Generator

Sortierbare IDs in Crockford Base32 erzeugen, dekodieren und in UUID umwandeln.

Öffnen

Texte vergleichen (Diff)

Unterschiede zwischen zwei Texten zeilen-, wort- oder zeichenweise finden.

Öffnen