Softonic

Code zu Bild

Schritt 1 / 2

Füge einen Codeausschnitt ein, wähle eines der vier eingebauten Themes, passe Farben, Schriftgröße, Abstand, optionale Kopfzeile und Zeilennummern an und lade eine PNG herunter, die aus einem Browser-Canvas gerendert wird. Das Tool zeichnet einfachen Text und eignet sich für saubere Codebilder, analysiert aber keine Programmiersprachen und ergänzt keine Syntaxhervorhebung.

So erstellst du eine Code-PNG

  1. 1

    Snippet einfügen

    Nutze das Codefeld für JavaScript, HTML, CSS, JSON, Shell-Befehle oder beliebigen anderen Klartext. Der Renderer übernimmt bis zu den ersten 400 Zeilen.

  2. 2

    Aussehen festlegen

    Wähle Dunkel, Hell, Dracula oder Solarized und passe Titel, Schriftgröße, Abstand, Hintergrund, Text und Akzentfarbe an.

  3. 3

    Canvas prüfen

    Der Browser zeichnet jede Zeile als Canvas-Text, optional mit Fensterkopf und Zeilennummern. Lange Zeilen können das Canvas bis zur eingebauten Maximalbreite verbreitern.

  4. 4

    PNG herunterladen

    Exportiere das aktuelle Canvas als PNG-Bild für Dokumentation, Notizen, Folien oder Social Posts. SVG-, JPEG- oder HTML-Export ist nicht enthalten.

Was der Renderer macht

Steuerung Was du ändern kannst Hinweise
Theme Dunkel, Hell, Dracula, Solarized Jedes Theme setzt Startwerte für Hintergrund, Text und Akzentfarbe.
Textstil Titel, Schriftgröße, Abstand Die Schriftgröße ist auf 10–40 px begrenzt, der Abstand auf 20–200 px.
Farben Hintergrund, Text, Akzent Die Akzentfarbe wird für Zeilennummern verwendet.
Kopfzeile Fensterkopf ein oder aus Der Titel erscheint in der Kopfzeile, wenn sie aktiviert ist.
Zeilennummern Anzeigen oder ausblenden Die Nummern werden als einfacher Canvas-Text gezeichnet.
Export PNG-Download Die Download-Schaltfläche speichert das aktuelle Canvas als PNG-Bild.

Praktische Grenzen

  • Der Browser zeichnet den Ausschnitt mit der Canvas API als einfachen Text. Er erkennt weder JavaScript noch Python, HTML oder andere Sprachen.
  • Die Vorschau nutzt die ersten 400 Zeilen, damit sehr große Dateien die Seite nicht blockieren.
  • Die Canvas-Breite bleibt zwischen 420 px und 2200 px. Sehr lange Zeilen können die Maximalbreite erreichen.
  • Die zweistufige Ansicht speichert deine Eingaben in sessionStorage für den aktuellen Browser-Tab, während du von der Bearbeitung zum Download wechselst.

Hinweis zur Barrierefreiheit

Code in einem Bild ist nicht durchsuchbar, nicht kopierbar und für Screenreader nicht zugänglich. Nutze die PNG als visuelle Ergänzung und stelle den echten Ausschnitt bei Dokumentation, Tutorials oder Fehlerberichten zusätzlich als auswählbaren Text bereit.

Häufig gestellte Fragen

Nein. Es zeichnet genau den eingefügten Text auf ein Canvas. Du kannst Farben und Themes ändern, aber es gibt keine Sprachauswahl und keinen Syntaxparser.

Das Menü enthält Dunkel, Hell, Dracula und Solarized. Hintergrund, Text und Akzentfarbe kannst du nach der Auswahl weiter überschreiben.

Nein. Die Ausgabe ist ein PNG-Download aus dem Canvas. SVG, JPEG und Kopieren als HTML sind nicht enthalten.

Die Vorschau zeichnet die ersten 400 Zeilen, damit der Browser reaktionsschnell bleibt. Für veröffentlichte Bilder ist es meist besser, auf die wenigen erklärenden Zeilen zu kürzen.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Binär-zu-ASCII-Konverter

Fügen Sie Binärdaten (durch Leerzeichen getrennte Bytes oder einen langen Bitstrom) ein und erhalten Sie den ASCII-Text, den sie darstellen, dekodiert 8 Bits auf einmal.

Telefonnummern prüfen

Prüfen Sie die Struktur von Telefonnummern nach Land und zeigen Sie Region, Typ sowie E.164-, internationale, nationale und RFC-3966-Formate an.