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
Styliste couleur IA Pro
Service d'analyse de couleurs de qualité professionnelle, équivalent à une analyse à 4 000 RMB, comprenant 14 modules d'analyse professionnels (positionnement précis selon les douze saisons, analyse du teint, solutions maquillage, analyse de la couleur et de la coiffure, test de la nuque, analyse des accessoires, etc.). Le résultat ? Un rapport web interactif et élégant présentant toutes les couleurs, jusqu'aux nuances de marques spécifiques et aux listes d'achats. 🎨 AI Color Stylist Pro - Service d'analyse de couleurs de qualité professionnelle ✨ Équivalent à une analyse professionnelle hors ligne à 4 000 RMB, maintenant à seulement 99 crédits ! 🎉 Offre de lancement à durée limitée ! Tarifs : • 10 premiers utilisateurs : 99 crédits ✨ (Prix actuel) • 11 à 100 utilisateurs : 199 crédits • 101 à 200 utilisateurs : 299 crédits • 201 utilisateurs et plus : 399 crédits ⏰ Le prix augmente automatiquement avec le nombre d'utilisateurs. Profitez-en vite ! ━━━━━━━━━━━━━━━━━━━━ 📊 14 modules d'analyse professionnelle majeurs ✅ Positionnement précis pour les douze saisons (Printemps chaud/Printemps lumineux/Printemps doux, Été léger/Été frais/Été doux, Automne chaud/Automne doux/Fin d'automne, Hiver frais/Fin d'hiver/Hiver lumineux) ✅ Nuancier complet (20 à 30 couleurs de base, avec leurs valeurs hexadécimales) ✅ Suggestions de maquillage (Fond de teint/Sourcils/Fard à paupières/Blush/Rouge à lèvres, teintes spécifiques à chaque marque) ✅ Suggestions de coiffure et de couleur (Recommandations de couleur, de coupe et de frange) ✅ Conseils pour assortir vos vêtements (Formules d'harmonisation des couleurs, recommandations d'articles, analyse du décolleté) ✅ Analyse détaillée des accessoires (Couleurs métallisées, pierres précieuses, boucles d'oreilles, colliers, sacs, lunettes) ✅ Liste d'achats (Marques spécifiques + nuances + gamme de prix) ✅ 3 exemples de tenues complètes ━━━━━━━━━━━━━━━━━━━━━ 🌟 Présenté dans un rapport web interactif au design soigné : • Visualisation de toutes les couleurs • Fond dégradé + mise en page en cartes • Design adaptatif, parfaitement adapté aux mobiles et ordinateurs • Partageable, enregistrable et imprimable ━━━━━━━━━━━━━━━━━━━━━ 👥 Public cible : • Personnes souhaitant améliorer leur image • Personnes ayant des difficultés à choisir leurs vêtements Couleurs • Pour celles et ceux qui souhaitent trouver le maquillage et la coloration capillaire les plus adaptés • Pour celles et ceux qui préparent leurs achats saisonniers et ont besoin de conseils professionnels • Pour celles et ceux qui veulent comprendre leur saison des couleurs ━━━━━━━━━━━━━━━━━━━━━ 💡 Comment l'utiliser 1. Téléchargez une photo de face prise à la lumière naturelle (ou une description textuelle de votre apparence) 2. Répondez à quelques questions simples à choix multiples 3. L'IA effectue une analyse professionnelle sur 14 modules 4. Génère un rapport de diagnostic web au design soigné 5. Recevez une liste d'achats complète et des suggestions de style ━━━━━━━━━━━━━━━━━━━━━ 🎁 Offre exclusive pour les premiers inscrits Avantages Les 10 premiers utilisateurs recevront en plus : • Une consultation de suivi gratuite • Un guide PDF exclusif sur l’harmonisation des couleurs • Accès prioritaire aux futures mises à jour ⏰ Offre à durée limitée, premier arrivé, premier servi !
Générateur de lettres temporelles
Transformer une phrase en langage vernaculaire moderne en texte de lettre dans des styles de différentes époques (lettres de transfert de fonds des Chinois d'outre-mer/République de Chine/années 1970/années 1990/Millénaire 2000) et générer des images de papier à lettres manuscrites de style visuel correspondant.
Aimant de réfrigérateur de voyage
Générez une affiche de photographie de voyage divisée verticalement avec une icône minimaliste de style aimant de réfrigérateur à partir de la photo d'un utilisateur, avec un fond de couleur unie et une superposition de texte optionnelle.
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 allStyliste couleur IA Pro
Service d'analyse de couleurs de qualité professionnelle, équivalent à une analyse à 4 000 RMB, comprenant 14 modules d'analyse professionnels (positionnement précis selon les douze saisons, analyse du teint, solutions maquillage, analyse de la couleur et de la coiffure, test de la nuque, analyse des accessoires, etc.). Le résultat ? Un rapport web interactif et élégant présentant toutes les couleurs, jusqu'aux nuances de marques spécifiques et aux listes d'achats. 🎨 AI Color Stylist Pro - Service d'analyse de couleurs de qualité professionnelle ✨ Équivalent à une analyse professionnelle hors ligne à 4 000 RMB, maintenant à seulement 99 crédits ! 🎉 Offre de lancement à durée limitée ! Tarifs : • 10 premiers utilisateurs : 99 crédits ✨ (Prix actuel) • 11 à 100 utilisateurs : 199 crédits • 101 à 200 utilisateurs : 299 crédits • 201 utilisateurs et plus : 399 crédits ⏰ Le prix augmente automatiquement avec le nombre d'utilisateurs. Profitez-en vite ! ━━━━━━━━━━━━━━━━━━━━ 📊 14 modules d'analyse professionnelle majeurs ✅ Positionnement précis pour les douze saisons (Printemps chaud/Printemps lumineux/Printemps doux, Été léger/Été frais/Été doux, Automne chaud/Automne doux/Fin d'automne, Hiver frais/Fin d'hiver/Hiver lumineux) ✅ Nuancier complet (20 à 30 couleurs de base, avec leurs valeurs hexadécimales) ✅ Suggestions de maquillage (Fond de teint/Sourcils/Fard à paupières/Blush/Rouge à lèvres, teintes spécifiques à chaque marque) ✅ Suggestions de coiffure et de couleur (Recommandations de couleur, de coupe et de frange) ✅ Conseils pour assortir vos vêtements (Formules d'harmonisation des couleurs, recommandations d'articles, analyse du décolleté) ✅ Analyse détaillée des accessoires (Couleurs métallisées, pierres précieuses, boucles d'oreilles, colliers, sacs, lunettes) ✅ Liste d'achats (Marques spécifiques + nuances + gamme de prix) ✅ 3 exemples de tenues complètes ━━━━━━━━━━━━━━━━━━━━━ 🌟 Présenté dans un rapport web interactif au design soigné : • Visualisation de toutes les couleurs • Fond dégradé + mise en page en cartes • Design adaptatif, parfaitement adapté aux mobiles et ordinateurs • Partageable, enregistrable et imprimable ━━━━━━━━━━━━━━━━━━━━━ 👥 Public cible : • Personnes souhaitant améliorer leur image • Personnes ayant des difficultés à choisir leurs vêtements Couleurs • Pour celles et ceux qui souhaitent trouver le maquillage et la coloration capillaire les plus adaptés • Pour celles et ceux qui préparent leurs achats saisonniers et ont besoin de conseils professionnels • Pour celles et ceux qui veulent comprendre leur saison des couleurs ━━━━━━━━━━━━━━━━━━━━━ 💡 Comment l'utiliser 1. Téléchargez une photo de face prise à la lumière naturelle (ou une description textuelle de votre apparence) 2. Répondez à quelques questions simples à choix multiples 3. L'IA effectue une analyse professionnelle sur 14 modules 4. Génère un rapport de diagnostic web au design soigné 5. Recevez une liste d'achats complète et des suggestions de style ━━━━━━━━━━━━━━━━━━━━━ 🎁 Offre exclusive pour les premiers inscrits Avantages Les 10 premiers utilisateurs recevront en plus : • Une consultation de suivi gratuite • Un guide PDF exclusif sur l’harmonisation des couleurs • Accès prioritaire aux futures mises à jour ⏰ Offre à durée limitée, premier arrivé, premier servi !
Générateur de lettres temporelles
Transformer une phrase en langage vernaculaire moderne en texte de lettre dans des styles de différentes époques (lettres de transfert de fonds des Chinois d'outre-mer/République de Chine/années 1970/années 1990/Millénaire 2000) et générer des images de papier à lettres manuscrites de style visuel correspondant.
Aimant de réfrigérateur de voyage
Générez une affiche de photographie de voyage divisée verticalement avec une icône minimaliste de style aimant de réfrigérateur à partir de la photo d'un utilisateur, avec un fond de couleur unie et une superposition de texte optionnelle.
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
