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://youmind.club/__ext/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
Image小小东 x sérigraphie x P086
Panel 086 ne conserve que 3–5 informations visuelles décisives pour faire fonctionner l’image. Le sujet est recréé à l’aide de silhouettes, de formes géométriques et de aplats de couleur simples, puis enrichi de 2–4 couleurs spot issues de la photo, de brossage à sec, de texture au rouleau, d’encre traînée, d’encre rompue et d’une couverture irrégulière, pour former une sérigraphie moderniste médiévale. La composition vise toujours un point focal clair, une direction principale et une zone de vide porteuse de sens. Adapté aux situations suivantes Vous souhaitez donner plus d’ordre visuel à une photo : ne conserver que 3–5 informations visuelles clés et créer un point focal clair à l’aide de silhouettes, de formes géométriques et d’aplats de couleur. Vous recherchez une véritable texture de gravure : faire du brossage à sec, du roulage d’encre, de l’encre traînée horizontalement, des réserves, de l’encre rompue et de la couverture irrégulière le langage de l’image. Vous voulez des couleurs vives mais maîtrisées : réduire les relations les plus vivantes de l’image originale à 2–4 couleurs spot, afin que le papier et les espaces laissés vides participent pleinement à la composition. Vous avez besoin d’une livraison flexible : prendre en charge les formats vertical et horizontal, les créations purement graphiques, plusieurs proportions et les fonds d’écran pour les quatre côtés, tout en permettant le traitement par lots d’un dossier d’images.
Image小小东 x Traits x Points x P084
Le Panel 084 utilise des lignes fines noires ou foncées pour simplifier le sujet, les bâtiments, les routes et les relations spatiales. Des lignes verticales, horizontales, brisées, courbes et des lignes directrices de perspective construisent une ossature géométrique. La variation de densité du stippling／dotted texture structure ensuite le ciel, le sol, l’arrière-plan, les ombres des arbres, les lumières et les couches d’air autour du sujet. Les arrière-plans complexes sont volontairement épurés pour conserver un point focal clair, de larges espaces blancs et quelques touches de couleur spot issues de l’image d’origine. Adapté aux situations suivantes Besoin de clarifier une ville, une architecture ou des relations spatiales : des lignes géométriques fines, des lignes directrices de perspective et des contours essentiels mettent en valeur les routes, les bâtiments et la structure de la scène. Envie de représenter l’air, la lumière et la profondeur sans recouvrir l’image de textures : les variations progressives de densité du stippling／dotted texture créent une atmosphère calme et structurée. Préférence pour une palette limitée et sobre : le bleu-gris, le blanc cassé et le blanc chaud dominent, tandis que quelques touches de couleur spot issues de l’image originale attirent l’attention sur les points focaux. Besoin d’une livraison flexible : prise en charge des fonds d’écran haut-bas, gauche-droite, en design pur, dans plusieurs formats et sur quatre côtés, ainsi que du traitement par lots d’un dossier d’images.
Image小小东 x Doodle naïf x P083
Panel 083 réévalue d’abord la photo pour ne garder qu’un sujet qui mérite vraiment d’être mémorisé, accompagné d’un ou deux indices de contexte tout au plus. Il déforme ensuite volontairement une proportion, une posture, une expression ou une structure, de façon maladroite, bancale et légèrement absurde. Les contours tremblés, les proportions volontairement fausses, les crayons bruts et les espaces vides composent un Ugly-cute naïve doodle ; l’identité du sujet doit rester immédiatement reconnaissable, et l’humour doit venir de l’image d’origine, pas d’un gag ajouté arbitrairement. Convient dans les cas suivants Un instant révélateur dans une photo : trouver l’humour dans un geste, une expression, une proportion ou un contraste, plutôt que de convertir mécaniquement l’image en dessin au trait. Vous recherchez un style mignonement laid, sans tomber dans le « mignon » bas de gamme : déformer volontairement, dessiner de façon maladroite et légèrement absurde, tout en gardant un sujet immédiatement identifiable. Vous voulez simplifier une scène complexe avec justesse : ne conserver qu’un sujet et un ou deux indices de contexte au maximum, puis renforcer le point marquant avec une mise en couleur brute et de larges espaces vides. Vous avez besoin d’une livraison flexible : prise en charge des formats vertical et horizontal, des créations purement graphiques, de plusieurs proportions et de fonds d’écran pour quatre appareils, ainsi que du traitement par lots d’un dossier d’images.
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://youmind.club/__ext/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 voirImage小小东 x sérigraphie x P086
Panel 086 ne conserve que 3–5 informations visuelles décisives pour faire fonctionner l’image. Le sujet est recréé à l’aide de silhouettes, de formes géométriques et de aplats de couleur simples, puis enrichi de 2–4 couleurs spot issues de la photo, de brossage à sec, de texture au rouleau, d’encre traînée, d’encre rompue et d’une couverture irrégulière, pour former une sérigraphie moderniste médiévale. La composition vise toujours un point focal clair, une direction principale et une zone de vide porteuse de sens. Adapté aux situations suivantes Vous souhaitez donner plus d’ordre visuel à une photo : ne conserver que 3–5 informations visuelles clés et créer un point focal clair à l’aide de silhouettes, de formes géométriques et d’aplats de couleur. Vous recherchez une véritable texture de gravure : faire du brossage à sec, du roulage d’encre, de l’encre traînée horizontalement, des réserves, de l’encre rompue et de la couverture irrégulière le langage de l’image. Vous voulez des couleurs vives mais maîtrisées : réduire les relations les plus vivantes de l’image originale à 2–4 couleurs spot, afin que le papier et les espaces laissés vides participent pleinement à la composition. Vous avez besoin d’une livraison flexible : prendre en charge les formats vertical et horizontal, les créations purement graphiques, plusieurs proportions et les fonds d’écran pour les quatre côtés, tout en permettant le traitement par lots d’un dossier d’images.
Image小小东 x Traits x Points x P084
Le Panel 084 utilise des lignes fines noires ou foncées pour simplifier le sujet, les bâtiments, les routes et les relations spatiales. Des lignes verticales, horizontales, brisées, courbes et des lignes directrices de perspective construisent une ossature géométrique. La variation de densité du stippling／dotted texture structure ensuite le ciel, le sol, l’arrière-plan, les ombres des arbres, les lumières et les couches d’air autour du sujet. Les arrière-plans complexes sont volontairement épurés pour conserver un point focal clair, de larges espaces blancs et quelques touches de couleur spot issues de l’image d’origine. Adapté aux situations suivantes Besoin de clarifier une ville, une architecture ou des relations spatiales : des lignes géométriques fines, des lignes directrices de perspective et des contours essentiels mettent en valeur les routes, les bâtiments et la structure de la scène. Envie de représenter l’air, la lumière et la profondeur sans recouvrir l’image de textures : les variations progressives de densité du stippling／dotted texture créent une atmosphère calme et structurée. Préférence pour une palette limitée et sobre : le bleu-gris, le blanc cassé et le blanc chaud dominent, tandis que quelques touches de couleur spot issues de l’image originale attirent l’attention sur les points focaux. Besoin d’une livraison flexible : prise en charge des fonds d’écran haut-bas, gauche-droite, en design pur, dans plusieurs formats et sur quatre côtés, ainsi que du traitement par lots d’un dossier d’images.
Image小小东 x Doodle naïf x P083
Panel 083 réévalue d’abord la photo pour ne garder qu’un sujet qui mérite vraiment d’être mémorisé, accompagné d’un ou deux indices de contexte tout au plus. Il déforme ensuite volontairement une proportion, une posture, une expression ou une structure, de façon maladroite, bancale et légèrement absurde. Les contours tremblés, les proportions volontairement fausses, les crayons bruts et les espaces vides composent un Ugly-cute naïve doodle ; l’identité du sujet doit rester immédiatement reconnaissable, et l’humour doit venir de l’image d’origine, pas d’un gag ajouté arbitrairement. Convient dans les cas suivants Un instant révélateur dans une photo : trouver l’humour dans un geste, une expression, une proportion ou un contraste, plutôt que de convertir mécaniquement l’image en dessin au trait. Vous recherchez un style mignonement laid, sans tomber dans le « mignon » bas de gamme : déformer volontairement, dessiner de façon maladroite et légèrement absurde, tout en gardant un sujet immédiatement identifiable. Vous voulez simplifier une scène complexe avec justesse : ne conserver qu’un sujet et un ou deux indices de contexte au maximum, puis renforcer le point marquant avec une mise en couleur brute et de larges espaces vides. Vous avez besoin d’une livraison flexible : prise en charge des formats vertical et horizontal, des créations purement graphiques, de plusieurs proportions et de fonds d’écran pour quatre appareils, ainsi que du traitement par lots d’un dossier d’images.
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.