Tippe oder füge in das Feld Code-Quelle ein — bis zu 65.536 UTF-8-Bytes, höchstens 200 Zeilen und 240 Zeichen pro Zeile. Der Zähler neben dem Label zeigt die aktuelle Bytezahl im Verhältnis zum Limit, und alles jenseits einer Grenze wird mit einer Meldung abgelehnt, die sie nennt, damit du genau weißt, was du kürzen musst.
02
Wähle Sprache und Theme
Eine der 242 Shiki-Grammatiken und 71 verschiedenen Farbgestaltungen wählen. Beispiel laden oder Code einfügen; die Hervorhebung führt ihn niemals aus.
03
Style den Rahmen
Tabulatorbreite, Schatten, Rundung, Wasserzeichen und Bildformat einstellen. Hintergrund: Farbe, transparent oder lokales PNG/JPEG/WebP (8 MiB); dazu Abstand, Schriftgröße, Zeilennummern und Titel.
04
Generiere die Vorschau
Beim Öffnen lädt der Arbeitsbereich Shiki in diesem Tab und erzeugt eine echte Beispielvorschau. Änderungen löschen das bisherige Ergebnis; mit „Vorschau erstellen“ rendern Sie neu.
05
Lade das SVG oder PNG herunter
Nach Änderungen erneut erzeugen. SVG oder PNG mit 1×/2× herunterladen oder PNG kopieren. Bei fehlender Bildzwischenablage PNG herunterladen. Grenze: 4096 Pixel je Seite, insgesamt 16.777.216 Pixel.
Tool-Fakten
Verarbeitung
In deinem Browser
Eingabe verlässt dieses Gerät
Nie
Aufbewahrung
Nichts wird gespeichert
Preis
Kostenlos
Deine Eingabe bleibt im Browser.
Code zu Bild nutzt seinen verifizierten lokalen Ausführungspfad und erstellt keinen versteckten Ein- oder Ausgabeverlauf.
Lokale Ausführung
Läuft im aktuellen Browser-Tab.
Keine versteckte Verarbeitung
Aktive Tool-Daten werden nie zu einem Toolars-Dokumentdatensatz.
Kein Konto erforderlich
Nutze den Kern-Workflow ohne Profil. Favoriten werden mit deinem Konto synchronisiert, sobald du dich anmeldest.
Sofortiges Zurücksetzen
Leere den Tab, und die aktiven Arbeitsdaten sind weg.
Wann Code zu Bild nützlich ist
Gemessenes JavaScript-Beispiel mit 1× exportieren
Zwei Zeilen eingeben: const total = 2 + 3; und console.log(total); (40 UTF-8-Bytes). JavaScript, Dunkel, #111827, Abstand 64 px, Schrift 16 px, Zeilennummern an, Titel sum.js, 1×, Tabulatorbreite 2, Schatten aus, Radius 14 px, kein Wasserzeichen, automatisches Format und Systemschrift wählen. Erzeugen und herunterladen: Dieser lokale Chromium-Lauf lieferte PNG mit 406 × 270 Pixeln (13.206 Bytes) und SVG mit 1.647 Bytes und viewBox 406 × 270.
Dasselbe Beispiel mit 2× vergleichen
Code und Einstellungen aus Beispiel 1 behalten, 2× wählen, neu erzeugen und PNG herunterladen: 812 × 540 Pixel und 32.328 Bytes in diesem lokalen Chromium-Lauf. Alle Maße und Dateigrößen hier sind Messwerte und können je nach Schrift und Browser abweichen. SVG ohne eingebettete Schrift nutzt Systemschriften und kann auf anderen Geräten anders aussehen.
Schrift für lateinische und kyrillische Zeichen einbetten
const text = "Café Привет"; eingeben, Titel font.js setzen und die 1×-Einstellungen aus Beispiel 1 behalten. ToolarsWatermarkWestern.ttf (102.840 Bytes) aus https://toolars.com/fonts/pdf-watermark/western-v1.ttf.gz entpacken und hochladen. Diese Testschrift basiert auf Noto Sans CJK, Version Sans2.004, unter SIL OFL 1.1 (Lizenz: https://toolars.com/fonts/pdf-watermark/OFL.txt). Dieser lokale Chromium-Lauf lieferte PNG mit 403 × 245 Pixeln (10.376 Bytes) und SVG mit 138.612 Bytes samt vollständiger Schrift. Für 漢字 fehlen Glyphen; eine andere Schrift oder Systemschriften wählen.
Was Code zu Bild tatsächlich tut
Eine Funktion, auf die du stolz bist, gehört in die Release Notes; ein kniffliges Snippet soll das interne Wiki illustrieren; eine Konferenzfolie will ein gestyltes Fragment statt eines Screenshots mit abgeschnittenen Tabs. Der Code-zu-Bild-Konverter verwandelt das Snippet in einen polierten Rahmen mit Zeilennummern und Fenstertitel, und das exportierte SVG oder PNG fällt ohne manuelle Nacharbeit direkt in Slides, Docs und Chats. Weil Tokenisieren und Rendern in diesem Tab passieren, reist unveröffentlichter Quellcode nirgendwohin.
Häufige Fragen
Wie erstelle ich ein JavaScript-Bild für eine Folie?
Geben Sie const total = 2 + 3; ein und wählen Sie JavaScript, Hell und 1x. Vorschau erzeugen und PNG herunterladen. Das Bild zeigt den Code, nicht das Ergebnis 5: Code wird nicht ausgeführt. Für ein größeres Rasterbild wählen Sie 2x und erzeugen die Vorschau erneut; Breite und Höhe verdoppeln sich.
Wie exportiere ich ein JSON-Beispiel als SVG?
Geben Sie {"ok":true} ein, wählen Sie JSON und erzeugen Sie die Vorschau. SVG liefert eine skalierbare Codegrafik, PNG bewahrt das gerenderte Aussehen. Nach Textänderungen erneut erzeugen; die alte Vorschau wird gelöscht. Dies ist ein Bildexport, keine JSON-Validierung.
Was sind die Eingabelimits?
Bis zu 65.536 UTF-8-Bytes Code, höchstens 200 Zeilen mit je nicht mehr als 240 Zeichen und ein Fenstertitel von 80 Zeichen oder weniger. Der Export selbst ist auf 4.096 Pixel pro Seite und 16.777.216 Pixel insgesamt begrenzt; alles darüber wird mit einer spezifischen Meldung abgelehnt.
Wird mein Code hochgeladen oder ausgeführt?
Code wird in diesem Tab verarbeitet und niemals ausgeführt oder hochgeladen. Shiki lädt beim Öffnen für das Beispiel; nach Änderungen wird erst durch „Vorschau erstellen“ neu gerendert.
Welche Sprachen und Themes sind verfügbar?
Eine der 242 Shiki-Grammatiken und 71 verschiedenen Farbgestaltungen wählen. Beispiel laden oder Code einfügen; die Hervorhebung führt ihn niemals aus.
Was ändert die Export-Skalierung?
1x verwendet die gemessenen Bildmaße. 2x verdoppelt Breite und Höhe und erzeugt viermal so viele PNG-Pixel; es fügt weder Code-Details hinzu noch ändert es den Text. Beide Skalierungen müssen in die Exportlimits passen. Reduziere die Skalierung, wenn der Export zu groß ist.
Soll ich das SVG oder das PNG herunterladen?
PNG bewahrt die hier gerenderten Pixel. SVG bleibt skalierbar; ohne eine hochgeladene Schrift verlässt es sich auf Systemschriften, die auf einem anderen Gerät anders ausfallen können. Eine akzeptierte hochgeladene Schrift wird vollständig eingebettet, aber der Ziel-Viewer muss eingebettete Schriften unterstützen. Nutze PNG, wenn ein konsistentes Erscheinungsbild zählt.
Warum ist die Vorschau verschwunden, nachdem ich eine Einstellung geändert habe?
By design: Jede Bearbeitung von Code, Sprache, Theme, Hintergrund, Innenabstand, Schriftgröße, Titel, Zeilennummern oder Skalierung invalidiert die alte Vorschau, statt ein veraltetes Bild zu zeigen. Drücke Vorschau generieren erneut, um den aktualisierten Rahmen zu rendern.
Welche Schriften kann ich einbetten?
TTF/OTF, bis zu 24 MiB. Wähle eine Schrift, die du einbetten darfst. Statische Outline-Schriften mit uneingeschränkter Einbettung werden unterstützt; variable/Farb-Schriften werden abgelehnt. Die vollständige Schrift wird ins SVG eingebunden. Fehlende Glyphen stoppen die Generierung. Es wird keine Datei hochgeladen. Ohne Schrift verwendet SVG Systemschriften.
