Code en image
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 entraîner 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
Pourquoi nous recommandons cette compétence
Cette compétence transforme le code en images magnifiquement surlignées, simule une interface de terminal et prend en charge le téléchargement haute définition. C'est l'outil idéal pour les développeurs qui souhaitent partager des extraits de code.
Convertir tout le code d'un article en images et télécharger en un clic.
Compétences associées
Tout voir
ImageIllustrateur d'articles 2.0
Cet outil intelligent d'enrichissement visuel, conçu pour les créateurs de contenu, analyse en profondeur le fil de votre texte et crée automatiquement des illustrations de haute qualité pour les paragraphes clés de vos articles. Que votre contenu soit stocké dans une base de connaissances personnelle ou que vous ayez besoin de traiter de longs articles importés de l'extérieur, il identifie précisément les concepts essentiels et transforme les mots abstraits en langage visuel concret, améliorant considérablement l'expérience de lecture et la diffusion de votre contenu. L'outil propose trois styles visuels distincts pour s'adapter à différents scénarios de création : un style dessiné à la main, épuré et vivant, adapté aux essais et à la vulgarisation scientifique ; un style plan d'architecture, rigoureux et professionnel, idéal pour les documents techniques et les rapports de recherche ; et un style d'illustration plat, très moderne, qui correspond parfaitement aux besoins esthétiques des comptes de médias personnels et des notes de connaissances. Pour les contenus longs, il suggère aussi intelligemment des plans d'illustration afin de garantir une répartition visuelle équilibrée et de mettre en évidence les points essentiels. Pendant la génération, vous pouvez choisir librement le mode de sortie des images. Vous pouvez demander que les illustrations générées soient directement intégrées, en toute transparence, dans les paragraphes du document d'origine, pour une mise en page automatisée ; ou vous pouvez choisir de recevoir un pack d'images distinct pour une distribution manuelle. Cette collaboration de bout en bout, de l'analyse du contenu à la génération visuelle, rend votre expression écrite plus percutante et rend les idées complexes limpides.
ImageGénérateur de BD pour devs
Un thème technique suffit pour générer en série plusieurs bandes dessinées de programmeurs, prêtes à être publiées. Dites simplement « thème, nombre de planches et nombre de cases par planche » pour obtenir plusieurs histoires indépendantes : erreurs différentes, métaphores absurdes différentes et chutes différentes. Ce ne sont ni des collages ni des contenus répétitifs avec seulement le titre changé. Compatible avec 3, 4, 6 ou 8 cases ; par défaut, le même personnage principal revient dans la série, mais vous pouvez aussi changer de personnage à chaque planche. Aucun besoin d’importer du code ou des captures d’écran internes : il suffit de fournir une phrase décrivant un moment de travail anonymisé.
Long texte en magazine illustré
Convertit un texte en un article complet en chinois avec des illustrations. Génère un article approfondi, analyse la structure et insère des schémas d'architecture, des diagrammes comparatifs et des organigrammes de style Excalidraw, pour produire un document complet prêt à publier.
Code en image
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 entraîner 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
Pourquoi nous recommandons cette compétence
Cette compétence transforme le code en images magnifiquement surlignées, simule une interface de terminal et prend en charge le téléchargement haute définition. C'est l'outil idéal pour les développeurs qui souhaitent partager des extraits de code.
Convertir tout le code d'un article en images et télécharger en un clic.
Compétences associées
Tout voirImageIllustrateur d'articles 2.0
Cet outil intelligent d'enrichissement visuel, conçu pour les créateurs de contenu, analyse en profondeur le fil de votre texte et crée automatiquement des illustrations de haute qualité pour les paragraphes clés de vos articles. Que votre contenu soit stocké dans une base de connaissances personnelle ou que vous ayez besoin de traiter de longs articles importés de l'extérieur, il identifie précisément les concepts essentiels et transforme les mots abstraits en langage visuel concret, améliorant considérablement l'expérience de lecture et la diffusion de votre contenu. L'outil propose trois styles visuels distincts pour s'adapter à différents scénarios de création : un style dessiné à la main, épuré et vivant, adapté aux essais et à la vulgarisation scientifique ; un style plan d'architecture, rigoureux et professionnel, idéal pour les documents techniques et les rapports de recherche ; et un style d'illustration plat, très moderne, qui correspond parfaitement aux besoins esthétiques des comptes de médias personnels et des notes de connaissances. Pour les contenus longs, il suggère aussi intelligemment des plans d'illustration afin de garantir une répartition visuelle équilibrée et de mettre en évidence les points essentiels. Pendant la génération, vous pouvez choisir librement le mode de sortie des images. Vous pouvez demander que les illustrations générées soient directement intégrées, en toute transparence, dans les paragraphes du document d'origine, pour une mise en page automatisée ; ou vous pouvez choisir de recevoir un pack d'images distinct pour une distribution manuelle. Cette collaboration de bout en bout, de l'analyse du contenu à la génération visuelle, rend votre expression écrite plus percutante et rend les idées complexes limpides.
ImageGénérateur de BD pour devs
Un thème technique suffit pour générer en série plusieurs bandes dessinées de programmeurs, prêtes à être publiées. Dites simplement « thème, nombre de planches et nombre de cases par planche » pour obtenir plusieurs histoires indépendantes : erreurs différentes, métaphores absurdes différentes et chutes différentes. Ce ne sont ni des collages ni des contenus répétitifs avec seulement le titre changé. Compatible avec 3, 4, 6 ou 8 cases ; par défaut, le même personnage principal revient dans la série, mais vous pouvez aussi changer de personnage à chaque planche. Aucun besoin d’importer du code ou des captures d’écran internes : il suffit de fournir une phrase décrivant un moment de travail anonymisé.
Long texte en magazine illustré
Convertit un texte en un article complet en chinois avec des illustrations. Génère un article approfondi, analyse la structure et insère des schémas d'architecture, des diagrammes comparatifs et des organigrammes de style Excalidraw, pour produire un document complet prêt à publier.
Trouve ta prochaine compétence préférée
Explore d'autres compétences IA sélectionnées pour la recherche, la création et le travail quotidien.