03 / GUIDES
Code-Bilder für Dokumentation und Folien
Wähle PNG oder SVG, prüfe Schriften und Skalierung und halte Code lesbar, wenn du ein Snippet teilst.
Inhalt gepflegt von Toolars · Aktualisiert 2026-09-25
Ausgabe nach Ziel wählen
PNG fixiert die gerenderten Pixel und ist für Folien und Chats meist die einfachere Wahl. SVG lässt sich ohne Rasterunschärfe skalieren, aber die Darstellung hängt vom Viewer ab. Ohne hochgeladene Schrift nutzt das SVG Systemschriften und kann auf einem anderen Rechner anders aussehen. Eine akzeptierte hochgeladene Schrift wird vollständig eingebettet; das vergrößert die Datei und erfordert weiterhin Viewer-Unterstützung. Teste in der tatsächlichen Folien- oder Dokumenten-App.
Den Export-Skalierungsvergleich nachvollziehen
Lade das JavaScript-Beispiel und generiere mit 1x. Notiere die Maße, ändere dann nur die Skalierung auf 2x und generiere erneut. Breite und Höhe verdoppeln sich jeweils, das PNG hat also viermal so viele Pixel. Der Code selbst gewinnt keine Details. Platziere beide Ergebnisse mit gleicher Anzeigebreite zum Vergleich. Wenn 2x das Exportlimit überschreitet, kürze das Snippet oder reduziere den Innenabstand, statt einen Export mit unbegrenzter Auflösung zu versprechen.
Mehrsprachigen Text und Zeilenumbruch prüfen
Probiere einen kurzen Kommentar mit Englisch und Chinesisch oder Japanisch. Nutze eine Schrift, die jedes Zeichen enthält und die du einbetten darfst. Fehlende Glyphen in einer hochgeladenen Schrift stoppen die Generierung. Prüfe bei Systemschriften das heruntergeladene PNG und öffne das SVG auf dem Zielgerät erneut. Lange Zeilen ersetzen keine Erklärung: Teile das Beispiel in fokussierte Snippets, statt den Text bis zur Unleserlichkeit zu verkleinern.
Vor dem Teilen prüfen
Betrachte die Ausgabe in der vorgesehenen Anzeigegröße. Prüfe Einrückung, Satzzeichen, Kontrast, Zeilennummern und jeden Titel. Halte Geheimnisse und privaten Code aus öffentlichen Beispielen heraus. Das Tool führt das Snippet nicht aus. Stelle den Quelltext als Text neben dem Bild bereit; ein Bild allein ist kein barrierefreies oder kopierbares Code-Beispiel. Leere den Arbeitsbereich nach der Arbeit mit privatem Material.
Pflege und Prüfung
Toolars pflegt diesen Leitfaden und das verlinkte Werkzeug. Melde Abweichungen zwischen Anleitung und aktueller Ausgabe, damit beides gemeinsam geprüft werden kann.
Das herunterladbare Beispiel ist eine synthetische Testeingabe, keine Kundenfallstudie. Verwende beim Nachstellen dieselbe Eingabe und dieselben Einstellungen. Prüfe die heruntergeladene Datei anhand der beschriebenen Kriterien, nicht nur die Vorschau.
Die Prüfungen gelten nur für dieses Beispiel, nicht für alle Dateien, Browser oder Zielprogramme. Prüfe nach Werkzeugänderungen erneut und kontrolliere deine Ausgabe vor dem Teilen.
Ein Inhalts- oder Werkzeugproblem meldenVollziehe den Ablauf mit einem Beispiel nach
Synthetische Toolars-Muster · aktualisiert am 2026-09-13. Sie zeigen den Ablauf, nicht die Qualität echter Fotos oder Scans und nicht die Annahme durch eine Plattform.
Füge das heruntergeladene JavaScript-Muster in Code zu Bild ein und wähle JavaScript. Erzeuge eine Vorschau und exportiere dann PNG mit 1× und 2×. Vergleiche die angegebenen Maße mit jedem Download und prüfe die lange Zahlenkette und die Einrückung bei 100% Zoom. Die Exportskalierung ändert die Pixelmaße, nicht die Genauigkeit der Quelle. Ohne eingebettete Schrift kann das Erscheinungsbild des SVG je nach Gerät variieren.
Werkzeug öffnenCode-zu-Bild-Konverter öffnen
Wähle PNG oder SVG, prüfe Schriften und Skalierung und halte Code lesbar, wenn du ein Snippet teilst.