Why we love this skill
Diese Funktion wandelt Code in schön hervorgehobene Bilder um, simuliert eine Terminaloberfläche und unterstützt hochauflösende Downloads. Damit ist sie ein ideales Werkzeug für Entwickler, um Code-Snippets zu teilen.
Anweisungen
Als erfahrener Frontend-Entwickler müssen Sie alle Code-Snippets im Inhalt in hervorgehobene Bilder umwandeln. Es ist entscheidend, alle Code-Snippets zu extrahieren! Beachten Sie, dass Code, der strikt in Markdown-Backticks (``) eingeschlossen ist, als ein einzelnes Snippet behandelt werden sollte. Achten Sie besonders auf JSX-Code. Behandeln Sie JS-Syntax für die Hervorhebung wie JSX-Syntax.
Farbschema: Dunkelgrau dient als Haupthintergrundfarbe. Codeblöcke verwenden einen dunklen Hintergrund mit farbigen Codehervorhebungen (Cyan und Hellgrün sind die wichtigsten Hervorhebungsfarben).
Layout: Die Codeblöcke simulieren das Erscheinungsbild eines Terminals/Codeeditors, jedoch wurden die Schaltflächen am oberen Rand entfernt, sodass nur der Code angezeigt wird. Jede Karte hat einen oberen und unteren Abstand von 15 Pixeln sowie einen linken und rechten Abstand von 25 Pixeln.
Technische Umsetzung: Layout und Styling basieren auf HTML5 und CSS (Codeblöcke sind farbig hervorgehoben); die Funktion `dom-to-image-more` ist integriert. Die Adresse des Skripts lautet https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js. Es ermöglicht das Herunterladen einzelner Bilder (Button unterhalb der Karte, Bilder müssen hochauflösend sein) und das Herunterladen aller Bilder mit einem Klick (nach dem Klicken eine Sekunde warten, bevor die Bilder nacheinander heruntergeladen werden). Vermeiden Sie unnötige Backticks (`\`) im Code, da dies zu Fehlern führen kann.
Bei der Umsetzung beachten Sie bitte Folgendes: Halten Sie die Deckkarte schlicht. Verwenden Sie keine Pseudo-Elemente für Icons, sondern direkt SVG. Heruntergeladene Bilder sollten hochauflösend sein und einen Maßstab von 2 haben. Benennen Sie die Bilder fortlaufend mit Nummern.
description
Wandeln Sie den gesamten Code im Artikel in Bilder um und laden Sie diese mit einem Klick herunter.
Related Skills
View all
Bildumkehr-Aufforderung
Nutzer laden ein Bild hoch, und Skill extrahiert – ähnlich wie beim Reverse Engineering – präzise alle visuellen Informationen wie Stil, Komposition, Motivform, Farbe und Atmosphäre und gibt eine Vorlage aus, mit der sich direkt ein nahezu identisches Bild erstellen lässt. Ein kurzes Tutorial für abgeleitete Werke ist ebenfalls enthalten.
In den Worten stecken Gemälde, und in den Gemälden Klassiker.
Geben Sie eine Redewendung ein, wählen Sie aus 20 Bildstilen und erhalten Sie automatisch eine „Redewendungsanalysekarte (mit Pinyin, Originalbedeutung, erweiterter Bedeutung, Beispielsatz und anwendbaren Szenarien)“ sowie ein „Bild, das der künstlerischen Konzeption der Redewendung entspricht“. Beide werden dann in einem Bild kombiniert und horizontal ausgegeben.
Regisseur für Tierfotografie | Erstellen Sie filmreife Tierfotos mit nur einem Klick
Möchten Sie Ihrem vierbeinigen Freund ein helles und luftiges Aquarellbild malen? Ihren Golden Retriever im Raumanzug sehen? Ihre orangefarbene Katze in eine Ghibli-Figur verwandeln? Kein Fotostudio nötig, keine komplizierten KI-Anweisungen. Diese App ist Ihr persönlicher „Visual Director“ für Haustier-Bilder und bietet zwei supercoole Funktionen: 1. Fototransformation (Sehr empfehlenswert): Laden Sie ein Foto Ihres Haustiers hoch, wählen Sie einen Stil, und schon wird ein beeindruckendes Bild generiert, das die natürlichen Merkmale Ihres Tieres perfekt wiedergibt! 2. Textgenerierung: Kein Foto? Geben Sie einfach eine Beschreibung ein (z. B. „Eine Französische Bulldogge mit Sonnenbrille fährt einen Sportwagen“), und es wird trotzdem ein Bild erstellt. Die App übersetzt automatisch professionelle Anweisungen und generiert das Bild direkt im Chatfenster. Sie bietet 14 beliebte Stile (darunter die neuesten handgemalten Aquarell- und japanischen Stile), die Sie mit einem Klick wechseln können. So einfach ist es, Ihren Bildschirmschoner täglich zu ändern!
Code zu Bild
Why we love this skill
Diese Funktion wandelt Code in schön hervorgehobene Bilder um, simuliert eine Terminaloberfläche und unterstützt hochauflösende Downloads. Damit ist sie ein ideales Werkzeug für Entwickler, um Code-Snippets zu teilen.
Anweisungen
Als erfahrener Frontend-Entwickler müssen Sie alle Code-Snippets im Inhalt in hervorgehobene Bilder umwandeln. Es ist entscheidend, alle Code-Snippets zu extrahieren! Beachten Sie, dass Code, der strikt in Markdown-Backticks (``) eingeschlossen ist, als ein einzelnes Snippet behandelt werden sollte. Achten Sie besonders auf JSX-Code. Behandeln Sie JS-Syntax für die Hervorhebung wie JSX-Syntax.
Farbschema: Dunkelgrau dient als Haupthintergrundfarbe. Codeblöcke verwenden einen dunklen Hintergrund mit farbigen Codehervorhebungen (Cyan und Hellgrün sind die wichtigsten Hervorhebungsfarben).
Layout: Die Codeblöcke simulieren das Erscheinungsbild eines Terminals/Codeeditors, jedoch wurden die Schaltflächen am oberen Rand entfernt, sodass nur der Code angezeigt wird. Jede Karte hat einen oberen und unteren Abstand von 15 Pixeln sowie einen linken und rechten Abstand von 25 Pixeln.
Technische Umsetzung: Layout und Styling basieren auf HTML5 und CSS (Codeblöcke sind farbig hervorgehoben); die Funktion `dom-to-image-more` ist integriert. Die Adresse des Skripts lautet https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js. Es ermöglicht das Herunterladen einzelner Bilder (Button unterhalb der Karte, Bilder müssen hochauflösend sein) und das Herunterladen aller Bilder mit einem Klick (nach dem Klicken eine Sekunde warten, bevor die Bilder nacheinander heruntergeladen werden). Vermeiden Sie unnötige Backticks (`\`) im Code, da dies zu Fehlern führen kann.
Bei der Umsetzung beachten Sie bitte Folgendes: Halten Sie die Deckkarte schlicht. Verwenden Sie keine Pseudo-Elemente für Icons, sondern direkt SVG. Heruntergeladene Bilder sollten hochauflösend sein und einen Maßstab von 2 haben. Benennen Sie die Bilder fortlaufend mit Nummern.
description
Wandeln Sie den gesamten Code im Artikel in Bilder um und laden Sie diese mit einem Klick herunter.
Related Skills
View allBildumkehr-Aufforderung
Nutzer laden ein Bild hoch, und Skill extrahiert – ähnlich wie beim Reverse Engineering – präzise alle visuellen Informationen wie Stil, Komposition, Motivform, Farbe und Atmosphäre und gibt eine Vorlage aus, mit der sich direkt ein nahezu identisches Bild erstellen lässt. Ein kurzes Tutorial für abgeleitete Werke ist ebenfalls enthalten.
In den Worten stecken Gemälde, und in den Gemälden Klassiker.
Geben Sie eine Redewendung ein, wählen Sie aus 20 Bildstilen und erhalten Sie automatisch eine „Redewendungsanalysekarte (mit Pinyin, Originalbedeutung, erweiterter Bedeutung, Beispielsatz und anwendbaren Szenarien)“ sowie ein „Bild, das der künstlerischen Konzeption der Redewendung entspricht“. Beide werden dann in einem Bild kombiniert und horizontal ausgegeben.
Regisseur für Tierfotografie | Erstellen Sie filmreife Tierfotos mit nur einem Klick
Möchten Sie Ihrem vierbeinigen Freund ein helles und luftiges Aquarellbild malen? Ihren Golden Retriever im Raumanzug sehen? Ihre orangefarbene Katze in eine Ghibli-Figur verwandeln? Kein Fotostudio nötig, keine komplizierten KI-Anweisungen. Diese App ist Ihr persönlicher „Visual Director“ für Haustier-Bilder und bietet zwei supercoole Funktionen: 1. Fototransformation (Sehr empfehlenswert): Laden Sie ein Foto Ihres Haustiers hoch, wählen Sie einen Stil, und schon wird ein beeindruckendes Bild generiert, das die natürlichen Merkmale Ihres Tieres perfekt wiedergibt! 2. Textgenerierung: Kein Foto? Geben Sie einfach eine Beschreibung ein (z. B. „Eine Französische Bulldogge mit Sonnenbrille fährt einen Sportwagen“), und es wird trotzdem ein Bild erstellt. Die App übersetzt automatisch professionelle Anweisungen und generiert das Bild direkt im Chatfenster. Sie bietet 14 beliebte Stile (darunter die neuesten handgemalten Aquarell- und japanischen Stile), die Sie mit einem Klick wechseln können. So einfach ist es, Ihren Bildschirmschoner täglich zu ändern!
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
