Code vers image
Convertissez tout le code de l'article en images et téléchargez-les en un seul clic.
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.
Related Skills
View allCarte d'information sur le style du Code Claude
Générez des affiches infographiques 4K haute résolution avec un fond dégradé beige avoine, des accents rouge terre cuite, des titres à empattements contrastés et une mise en page en grille, dans un style minimaliste académique, parfaites pour la synthèse des connaissances, les plans de tutoriels, les guides techniques et la visualisation de contenu haute densité.
Illustrations narratives de l'artisanat
Enfin, même les processus complexes deviennent limpides. Des infographies soignées mettent parfaitement en valeur les moindres détails et racontent avec brio l'histoire de la marque.
Image de fond de style YouMind
Générez une image abstraite de style YouMind pour une utilisation en arrière-plan. Consignes relatives aux polices : Utilisez<Libre Baskerville> pour les titres anglais et<Source Sans> pour les titres chinois.
Code vers image
Convertissez tout le code de l'article en images et téléchargez-les en un seul clic.
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.
Related Skills
View allCarte d'information sur le style du Code Claude
Générez des affiches infographiques 4K haute résolution avec un fond dégradé beige avoine, des accents rouge terre cuite, des titres à empattements contrastés et une mise en page en grille, dans un style minimaliste académique, parfaites pour la synthèse des connaissances, les plans de tutoriels, les guides techniques et la visualisation de contenu haute densité.
Illustrations narratives de l'artisanat
Enfin, même les processus complexes deviennent limpides. Des infographies soignées mettent parfaitement en valeur les moindres détails et racontent avec brio l'histoire de la marque.
Image de fond de style YouMind
Générez une image abstraite de style YouMind pour une utilisation en arrière-plan. Consignes relatives aux polices : Utilisez<Libre Baskerville> pour les titres anglais et<Source Sans> pour les titres chinois.
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
