Why we love this skill
Cette fonctionnalité convertit le code en images magnifiquement mises en évidence, simule une interface de terminal et prend en charge les téléchargements haute définition, ce qui en fait un outil idéal pour les développeurs souhaitant partager des extraits de code.
Instructions
En tant que développeur front-end senior, vous devez convertir tous les extraits de code du contenu en images surlignées. Il est crucial d'extraire tous les extraits de code ! Notez que le code strictement encadré par les guillemets obliques (``) de Markdown doit être traité comme un seul extrait. Portez une attention particulière au code JSX. Traitez la syntaxe JS comme de la syntaxe JSX pour la coloration syntaxique.
Schéma de couleurs : Le gris foncé est utilisé comme couleur de fond principale, et les blocs de code utilisent un fond sombre avec des surlignages de code colorés (le cyan et le vert vif sont les couleurs d’accentuation principales).
Mise en page : Les blocs de code simulent l’apparence d’un terminal/éditeur de code, mais les boutons en haut de l’éditeur sont supprimés, ne laissant apparaître que le code. Chaque carte possède une marge intérieure de 15 px en haut et en bas, et de 25 px à gauche et à droite.
Implémentation technique : La mise en page et le style sont réalisés en HTML5 et CSS (les blocs de code doivent être colorés) ; la fonction dom-to-image-more est intégrée. L’adresse du script dom-to-image-more est https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js. Ce script permet le téléchargement d’une image par carte (bouton situé sous la carte ; les images doivent être en haute résolution) et le téléchargement de toutes les images en un clic (après avoir cliqué, patientez une seconde avant le téléchargement). Évitez d’ajouter des guillemets obliques inverses (`\`) inutiles au code, car cela peut provoquer des erreurs.
Lors de la mise en œuvre, veuillez noter : la page de couverture doit rester simple. N’utilisez pas de pseudo-éléments pour les icônes ; utilisez directement le format SVG. Les images téléchargées doivent être en haute résolution, avec une échelle de 2. Nommez les images de manière séquentielle à l’aide de numéros.
description
Convertissez tout le code de l'article en images et téléchargez-les en un seul clic.
Related Skills
View all
Invite d'inversion d'image
L'utilisateur fournit une image, et Skill, à l'instar de la rétro-ingénierie, extrait avec précision toutes les informations visuelles telles que le style, la composition, la forme du sujet, la couleur et l'atmosphère, pour ensuite proposer une solution permettant de générer directement une image quasi identique. Un tutoriel succinct pour la création d'œuvres dérivées est également inclus.
Il y a des tableaux dans les mots, et des classiques dans les tableaux.
Saisissez une expression idiomatique, choisissez parmi 20 styles d'image, et générez automatiquement une « Fiche d'analyse de l'expression (incluant le pinyin, la signification originale, le sens étendu, une phrase d'exemple et des scénarios d'application) » et une « Image correspondant à la conception artistique de l'expression ». Les deux sont ensuite combinées sur une même image et affichées horizontalement.
Réalisateur de photos animalières | Créez des photos d'animaux de compagnie de qualité cinématographique en un clic
Envie d'offrir à votre compagnon à quatre pattes une aquarelle légère et aérienne peinte à la main ? Envie de voir votre Golden Retriever en combinaison spatiale ? Envie de transformer votre chat roux en personnage de film Ghibli ? Plus besoin d'aller chez le photographe ni de comprendre des instructions d'IA compliquées. Cette application est votre « directeur visuel personnalisé pour animaux », avec deux fonctionnalités géniales : 1. Transformation photo (fortement recommandée) : Importez une photo de votre animal, choisissez un style, et l'application générera instantanément une image époustouflante qui respecte ses traits ! 2. Création d'images à partir d'un texte : Pas de photo ? Saisissez simplement une description (par exemple : « Un bouledogue français portant des lunettes de soleil conduit une voiture de sport »), et l'application générera une image. Elle traduit automatiquement les instructions et génère une image directement dans la fenêtre de discussion. Elle propose 14 styles populaires (dont les dernières aquarelles et les styles japonais peints à la main), avec la possibilité de changer de style en un clic. Changer d'écran de veille tous les jours n'a jamais été aussi simple !
Code vers image
Why we love this skill
Cette fonctionnalité convertit le code en images magnifiquement mises en évidence, simule une interface de terminal et prend en charge les téléchargements haute définition, ce qui en fait un outil idéal pour les développeurs souhaitant partager des extraits de code.
Instructions
En tant que développeur front-end senior, vous devez convertir tous les extraits de code du contenu en images surlignées. Il est crucial d'extraire tous les extraits de code ! Notez que le code strictement encadré par les guillemets obliques (``) de Markdown doit être traité comme un seul extrait. Portez une attention particulière au code JSX. Traitez la syntaxe JS comme de la syntaxe JSX pour la coloration syntaxique.
Schéma de couleurs : Le gris foncé est utilisé comme couleur de fond principale, et les blocs de code utilisent un fond sombre avec des surlignages de code colorés (le cyan et le vert vif sont les couleurs d’accentuation principales).
Mise en page : Les blocs de code simulent l’apparence d’un terminal/éditeur de code, mais les boutons en haut de l’éditeur sont supprimés, ne laissant apparaître que le code. Chaque carte possède une marge intérieure de 15 px en haut et en bas, et de 25 px à gauche et à droite.
Implémentation technique : La mise en page et le style sont réalisés en HTML5 et CSS (les blocs de code doivent être colorés) ; la fonction dom-to-image-more est intégrée. L’adresse du script dom-to-image-more est https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js. Ce script permet le téléchargement d’une image par carte (bouton situé sous la carte ; les images doivent être en haute résolution) et le téléchargement de toutes les images en un clic (après avoir cliqué, patientez une seconde avant le téléchargement). Évitez d’ajouter des guillemets obliques inverses (`\`) inutiles au code, car cela peut provoquer des erreurs.
Lors de la mise en œuvre, veuillez noter : la page de couverture doit rester simple. N’utilisez pas de pseudo-éléments pour les icônes ; utilisez directement le format SVG. Les images téléchargées doivent être en haute résolution, avec une échelle de 2. Nommez les images de manière séquentielle à l’aide de numéros.
description
Convertissez tout le code de l'article en images et téléchargez-les en un seul clic.
Related Skills
View allInvite d'inversion d'image
L'utilisateur fournit une image, et Skill, à l'instar de la rétro-ingénierie, extrait avec précision toutes les informations visuelles telles que le style, la composition, la forme du sujet, la couleur et l'atmosphère, pour ensuite proposer une solution permettant de générer directement une image quasi identique. Un tutoriel succinct pour la création d'œuvres dérivées est également inclus.
Il y a des tableaux dans les mots, et des classiques dans les tableaux.
Saisissez une expression idiomatique, choisissez parmi 20 styles d'image, et générez automatiquement une « Fiche d'analyse de l'expression (incluant le pinyin, la signification originale, le sens étendu, une phrase d'exemple et des scénarios d'application) » et une « Image correspondant à la conception artistique de l'expression ». Les deux sont ensuite combinées sur une même image et affichées horizontalement.
Réalisateur de photos animalières | Créez des photos d'animaux de compagnie de qualité cinématographique en un clic
Envie d'offrir à votre compagnon à quatre pattes une aquarelle légère et aérienne peinte à la main ? Envie de voir votre Golden Retriever en combinaison spatiale ? Envie de transformer votre chat roux en personnage de film Ghibli ? Plus besoin d'aller chez le photographe ni de comprendre des instructions d'IA compliquées. Cette application est votre « directeur visuel personnalisé pour animaux », avec deux fonctionnalités géniales : 1. Transformation photo (fortement recommandée) : Importez une photo de votre animal, choisissez un style, et l'application générera instantanément une image époustouflante qui respecte ses traits ! 2. Création d'images à partir d'un texte : Pas de photo ? Saisissez simplement une description (par exemple : « Un bouledogue français portant des lunettes de soleil conduit une voiture de sport »), et l'application générera une image. Elle traduit automatiquement les instructions et génère une image directement dans la fenêtre de discussion. Elle propose 14 styles populaires (dont les dernières aquarelles et les styles japonais peints à la main), avec la possibilité de changer de style en un clic. Changer d'écran de veille tous les jours n'a jamais été aussi simple !
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
