Zum Inhalt springen

Code zu SVG-Bild

Verwandeln Sie einen Code-Ausschnitt in ein Bild mit Syntaxhervorhebung, Fensterrahmen und Farbverlauf.

Eingabe
14
48
Ausgabe

Code zu SVG-Bild

Fügen Sie einen Code-Ausschnitt ein, wählen Sie die Programmiersprache, und dieses Tool erstellt automatisch ein Bild mit Syntaxhervorhebung in einem abgerundeten Fensterrahmen — das Perfekte für Code-Screenshots im Blog, auf Twitter, in Präsentationen oder in der Dokumentation. Schlüsselwörter, Strings, Kommentare und Zahlen werden farbig hervorgehoben, und das Fenster kann optional eine macOS-ähnliche Titelleiste mit bunten Punkten erhalten, damit das Ergebnis wie ein echter Editor aussieht, nicht wie ein simpler Textausgabe.

Das Tool unterstützt neun Programmiersprachen — JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash, SQL und Nur-Text — mit jeweils individuellen Regeln für Schlüsselwörter, Strings und Kommentare. Wählen Sie ein Hintergrunddesign aus sechs Varianten (Sonnenuntergang, Ozean, Mitternacht, Wald, Traube oder Mono), und das Tool umhüllt das Fenster mit einem passenden Farbverlauf. Sie können den Abstand um das Fenster anpassen, den Schlagschatten aktivieren, den Fenstertitel einstellen und Zeilennummern oder die Titelleiste unabhängig voneinander ein- und ausschalten. Die Schriftgröße skaliert das ganze Bild, sodass eine kurze Einzeiler und eine fünfzig Zeilen lange Funktion gleichermaßen lesbar bleiben.

Das Ergebnis ist ein eigenständiges, auflösungsunabhängiges SVG-Dokument — gestochen scharf in jeder Größe, einfach in eine Seite oder ein Design-Tool einzufügen und klein genug, um als Text zu kopieren. Zeilenanzahl, Zeichenanzahl und die endgültige Bildgröße in Pixeln aktualisieren sich live unter der Ausgabe, während Sie tippen oder Optionen ändern, sodass Sie genau sehen, was Sie kopieren oder herunterladen werden.

Alles läuft in Ihrem Browser mit einem kleinen integrierten Highlighter — kein Code wird hochgeladen, und kein externer Syntax-Highlighting-Service sieht jemals, was Sie einfügen. Das macht es sicher für unveröffentlichte Funktionen, interne Tools oder alles andere, das Sie lieber nicht auf einen externen Server schicken möchten, nur um einen schönen Screenshot zu machen.

Häufige Fragen

Welche Programmiersprachen werden mit Syntaxhervorhebung unterstützt?
JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash und SQL erhalten alle Hervorhebung für Schlüsselwörter, Strings, Kommentare und Zahlen. Wählen Sie "Nur-Text" für alles andere — es wird ohne Farbcodierung dargestellt.
Kann ich Hintergrund und Fensterdesign anpassen?
Ja. Wählen Sie eines von sechs Farbverlauf-Designs, passen Sie den Abstand um das Fenster an, aktivieren Sie den Schlagschatten, und schalten Sie die Titelleiste mit den bunten Punkten und die Zeilennummernleiste unabhängig ein oder aus.
Welches Format hat das Bild, und kann ich PNG bekommen?
Die Ausgabe ist ein Vektor-SVG — scharf in jeder Größe und einfach direkt in eine Seite einzubinden. Für PNG öffnen Sie die heruntergeladene .svg-Datei in Ihrem Browser oder einem Bildeditor und exportieren Sie sie als PNG; dieses Tool konvertiert nicht automatisch.
Gibt es eine Begrenzung für die Menge an Code, den ich einfügen kann?
Keine feste Zeilenbegrenzung, aber das erzeugte Bild ist auf 10 MB begrenzt. Extrem lange Ausschnitte, die dieses Limit überschreiten würden, zeigen eine Meldung, die Sie auffordert, die Eingabe zu kürzen.
Wird mein Code irgendwo hochgeladen?
Nein. Syntaxhervorhebung und Bildrendering finden vollständig in Ihrem Browser mit einem kleinen integrierten Tokenizer statt — Ihr Code verlässt Ihr Gerät nie.