Code-Screenshot
Code Screenshot
Rendert einen Codeausschnitt als Bild mit Syntaxhervorhebung, Fensterrahmen und wählbarem Theme.
Macht aus einem Codeschnipsel ein PNG, das Sie in eine Folie, ein Issue oder einen Beitrag setzen können – mit Syntaxhervorhebung, in einem Fensterrahmen, in der Exportskalierung Ihrer Wahl. Es wird hier auf einem Canvas gezeichnet; nichts wird hochgeladen, und kein externer Highlighter wird geladen.
Code
Vorschau
Was dieses Werkzeug tut
- · Die Syntaxhervorhebung kommt von den Tokenizern, die die Formatierer dieser Seite verwenden (JavaScript, TypeScript, CSS, HTML, SQL), dazu ein paar kleine, die hier geschrieben wurden (JSON, Python, Go, Rust, Shell). Es wird kein externer Highlighter geladen.
- · Der Text wird mit der Monospace-Schrift Ihres Geräts direkt auf ein Canvas gezeichnet. Für Koreanisch greift eine koreanische Systemschrift, deshalb erscheint es als Text und nicht als Kästchen, und Koreanisch und Emoji zählen beim Umbruch als zwei Zellen. Schriften unterscheiden sich von Gerät zu Gerät, derselbe Code sieht also überall etwas anders aus.
- · PNGs entstehen in 1×, 2× und 3×, und nichts wird hochgeladen.
Um das PNG kleiner zu machen, nehmen Sie die PNG-Komprimierung; um es in einen Geräterahmen zu setzen, nehmen Sie das Geräte-Mockup.
So funktioniert es
Fügen Sie den Code ein
Die Sprache wird erkannt, und Sie können sie überschreiben. Die Hervorhebung verwendet dieselben Tokenizer wie die Formatierer dieser Website für JS, TS, CSS, HTML und SQL, plus kleine für JSON, Python, Go, Rust und Shell.
Legen Sie den Rahmen fest
Theme, Schriftgröße, Innenabstand, ein Fenstertitel, Ampelknöpfe oder keine, Zeilennummern, ein Schatten. Die Vorschau ist der Export bei 1×.
Wählen Sie eine Umbruchbreite für lange Zeilen
CJK-Zeichen und Emoji zählen beim Umbrechen als zwei Zellen, so wie ein Terminal sie zählt, sodass eine Zeile mit gemischten Schriften dort umbricht, wo es richtig aussieht.
Exportieren Sie bei 2× für alles, was skaliert wird
1× für einen Blog mit fester Breite, 2× für Folien und Retina-Bildschirme, 3× wenn hineingezoomt wird. Oder kopieren Sie das Bild direkt in die Zwischenablage.
Häufige Fragen
Warum sieht es auf meinem anderen Computer anders aus?
Weil der Text mit der Monospace-Schrift gezeichnet wird, die das jeweilige Gerät hat, und keine zwei Maschinen haben genau dieselbe. CJK-Zeichen und Emoji fallen insbesondere auf die Systemschrift zurück, die gerade installiert ist. Der Preis dafür ist, dass nichts heruntergeladen wird und das Rendern sofort geschieht.
Kann ich ein SVG bekommen?
Nein, nur PNG. Ein SVG bräuchte die eingebettete Schrift, um überall gleich auszusehen, und eine Schrift mit CJK- oder Emoji-Abdeckung einzubetten sind Megabytes. Ein 2×-PNG ist kleiner und rendert überall identisch.
Sollte ich überhaupt einen Screenshot von Code posten?
Für eine Folie oder einen Social-Media-Beitrag ja. Für einen Fehlerbericht oder einen Pull Request fügen Sie den Text ein – ein Bild lässt sich nicht durchsuchen, kopieren, vergleichen oder von einem Screenreader lesen. Dieses Werkzeug ist für den ersten Fall.
Eingabe aus
JavaScript formatieren und minimieren
JavaScript Beautifier & Minifier
Entfernt Kommentare und Leerraum aus JavaScript oder TypeScript, ohne etwas umzubenennen, und rückt ein minimiertes Bundle wieder lesbar ein.
ASCII-Tabellen-Generator
ASCII Table Generator
Rendert eine Tabelle als Monospace-ASCII, Markdown oder mit Rahmenzeichen, für READMEs und Kommentare.
ASCII-Schriftkunst
ASCII Text Art
Setzt Text als große ASCII-Buchstaben durch einen echten FIGfont-Renderer, mit zwei mitgelieferten Schriften und einem Platz für eine eigene .flf.
ASCII-Diagramm-Editor
ASCII Diagram Editor
Zeichnet Kästen, Linien, Pfeile und Beschriftungen auf einem Zeichenraster und leitet jede Ecke und Kreuzung daraus ab, welche Nachbarn belegt sind, in Unicode-Rahmenzeichen oder reinem ASCII.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
ASCII-Tabellen-Generator
ASCII Table Generator
Rendert eine Tabelle als Monospace-ASCII, Markdown oder mit Rahmenzeichen, für READMEs und Kommentare.
Geräte-Mockup
Device Mockup
Setzt einen Screenshot in einen Smartphone-, Tablet-, Laptop- oder Browser-Rahmen mit Hintergrund und Schatten.
JavaScript formatieren und minimieren
JavaScript Beautifier & Minifier
Entfernt Kommentare und Leerraum aus JavaScript oder TypeScript, ohne etwas umzubenennen, und rückt ein minimiertes Bundle wieder lesbar ein.
PNG-Kompressor
PNG Compressor
Verkleinert ein PNG ohne Upload, komplett im Browser: Die Farbpalette wird quantisiert und der Deflate-Strom neu geschrieben, die Abmessungen bleiben unverändert.
Base64 kodieren und dekodieren
Base64 Encoder & Decoder
Kodiert und dekodiert Base64 und Base64URL für Text oder Dateien und behandelt UTF-8 korrekt.
JSON ⇄ CSV umwandeln
JSON ⇄ CSV
Flacht verschachteltes JSON zu Spalten ab oder baut Objekte aus einer Tabelle wieder auf, mit Punktpfad-Regel für die Spaltennamen.