Code en image

Transformez un extrait de code en une élégante image PNG avec coloration syntaxique directement dans votre navigateur, avec thème, fond dégradé ou transparent et marge intérieure — sans aucun envoi.

Chargement de l'outil…

Code en image — Collez un extrait, choisissez son langage, son thème, son fond et sa marge intérieure, puis exportez une carte de code façon Carbon en PNG transparent ou à fond dégradé. La coloration syntaxique (Prism) et la capture de l'image (html-to-image) s'exécutent entièrement dans votre navigateur, votre code n'est donc jamais envoyé. L'aperçu se met à jour en direct au fil de la saisie ou du changement d'options.

Qu'est-ce que Code en image ?

Code en image est un outil gratuit, fonctionnant dans le navigateur, qui transforme un extrait de code en une image partageable : une carte de code soignée avec coloration syntaxique que vous pouvez insérer dans un article de blog, une présentation, un README ou une publication sur les réseaux. Il séduit les développeurs, les rédacteurs techniques et les enseignants qui veulent un code à l'allure intentionnelle plutôt qu'une capture d'écran fade. Choisissez la coloration pour JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python ou Bash, puis habillez la carte d'un thème, d'un fond dégradé ou uni et de la marge intérieure de votre choix. La carte se rend en direct pendant l'édition, et un unique bouton Télécharger le PNG l'exporte en résolution 2x.

Comment utiliser Code en image

  1. Collez ou saisissez votre code dans l'éditeur, ou connectez la sortie texte d'un autre outil au port d'entrée dans l'espace de travail.
  2. Choisissez le langage correspondant — JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python ou Bash — pour que la coloration syntaxique soit correcte.
  3. Ouvrez les Réglages pour choisir un thème (Midnight, Graphite ou Snow), un fond (Aurora, Sunset, Ocean, Slate ou Transparent) et la marge intérieure (Serré, Normal ou Spacieux).
  4. Observez l'aperçu se mettre à jour en direct au fil de la saisie et des changements d'options ; cliquez dessus pour l'agrandir dans la vue zoom.
  5. Appuyez sur Télécharger le PNG pour enregistrer la carte en image haute résolution, ou, dans l'espace de travail, transmettez le PNG directement à un outil image en aval.

Exemples

Une fonction JavaScript pour un article de blog

Collez une courte fonction JavaScript, gardez le langage sur JavaScript, choisissez le thème Midnight avec le fond dégradé Aurora et téléchargez un PNG net à intégrer dans un article plutôt qu'une capture d'écran fade.

Un extrait CSS transparent pour des diapositives

Passez le langage en CSS et le fond en Transparent pour que le PNG exporté n'ait aucun arrière-plan, laissant la carte de code reposer proprement sur un fond de diapositive coloré.

Une carte de commande Bash pour un README

Sélectionnez Bash, choisissez le thème clair Snow avec le fond uni Slate et une marge intérieure Spacieux, puis exportez une carte de commande nette et lisible pour la documentation de votre projet.

Questions fréquentes

Quels langages peut-il colorer ?
Il colore JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python et Bash. Choisissez celui qui correspond à votre extrait dans le menu déroulant des langages ; si un jeton ne peut pas être classé, il revient simplement à la couleur de texte de base.
Dans quel format d'image exporte-t-il ?
Il exporte un PNG en densité de pixels 2x pour des résultats nets. Si vous choisissez l'option de fond Transparent, le PNG conserve un canal alpha sans aucun arrière-plan derrière la carte de code.
Puis-je modifier l'apparence de la carte ?
Oui. Dans les Réglages, vous pouvez basculer entre les thèmes Midnight, Graphite et Snow, choisir un fond Aurora, Sunset, Ocean, Slate ou Transparent, et définir une marge intérieure Serré, Normal ou Spacieux autour du code.
Mon code est-il envoyé quelque part ?
Non. La coloration syntaxique (Prism) comme la capture de l'image (html-to-image) s'exécutent à 100 % côté client, dans votre navigateur. Votre code n'est jamais envoyé, transmis à nos serveurs ni partagé, si bien que même les extraits propriétaires restent sur votre appareil.
Pourquoi l'image n'apparaît-elle qu'après avoir cliqué sur Télécharger sur la page de l'outil ?
Sur la page autonome, le PNG est généré lorsque vous appuyez sur Télécharger le PNG, donc la saisie ne recapture pas l'image à chaque frappe. L'aperçu stylisé se met malgré tout à jour en direct pendant l'édition ; dans l'espace de travail, le PNG se reconstruit aussi automatiquement pour pouvoir circuler vers l'outil suivant.

Outils connexes

Vérificateur de contraste des couleurs

Vérifiez le rapport de contraste WCAG entre une couleur HEX de premier plan et une couleur de fond, et voyez s'il satisfait AA et AAA pour le texte normal et le grand texte.

Mélangeur de couleurs

Mélangez deux couleurs HEX selon le ratio de votre choix, dans l'espace RGB ou Lab, et obtenez la couleur intermédiaire sous forme d'échantillon et de valeur HEX copiable.

Générateur de nuances de couleur

Transformez une couleur HEX de base en une échelle de nuances 50-950 façon Tailwind, mélangée vers le blanc et le noir, chaque palier avec un échantillon et un HEX copiable.

Simulateur de daltonisme

Importez une image et prévisualisez son rendu en cas de protanopie, deutéranopie, tritanopie ou de daltonisme total, puis téléchargez le résultat simulé.