Code en image
Transformez un extrait de code en image avec coloration syntaxique dans votre navigateur, avec plus de 20 langages, des thèmes et fonds personnalisés, des numéros de ligne et un export PNG ou SVG.
Code en image — Collez un extrait, choisissez son langage (ou laissez la détection automatique deviner) et habillez une carte de code façon Carbon avec un thème, un fond dégradé, uni, personnalisé ou transparent, une police à chasse fixe réglable, des numéros de ligne et un titre de fenêtre modifiable. Exportez-la en PNG à l'échelle 1x–3x ou en SVG, ou copiez l'image directement dans le presse-papiers. 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é.
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 pour un article de blog, une présentation, un README ou une publication sur les réseaux. Il colore plus de 20 langages, dont JavaScript, TypeScript, Python, Go, Rust, Java, SQL et d'autres, avec une détection automatique facultative qui devine le langage à partir de votre code. Habillez la carte avec l'un des sept thèmes, un dégradé prédéfini, une couleur ou un dégradé personnalisé, ou un fond transparent, puis affinez la police à chasse fixe, la taille de police, la marge intérieure, les numéros de ligne, le titre de fenêtre et la largeur de sortie. La carte se rend en direct pendant l'édition, et vous pouvez l'exporter en PNG à 1x, 2x ou 3x, l'enregistrer en SVG ou la copier dans le presse-papiers.
Comment utiliser Code en image
- Collez ou saisissez votre code, ou connectez la sortie texte d'un autre outil au port d'entrée dans l'espace de travail.
- Choisissez le langage correspondant ou activez la détection automatique dans les Réglages pour que l'outil le devine depuis votre code.
- Choisissez un thème et un fond — un dégradé prédéfini, une couleur unie ou un dégradé personnalisé, ou transparent — dans les Réglages.
- Affinez à votre goût la police à chasse fixe, la taille de police, la marge intérieure, les numéros de ligne, le titre de fenêtre et la largeur de sortie.
- Observez l'aperçu se mettre à jour en direct pendant l'édition ; cliquez dessus pour l'agrandir dans la vue zoom.
- Exportez la carte en PNG à 1x–3x, téléchargez-la en SVG ou copiez l'image dans le presse-papiers.
Exemples
Un extrait Go avec numéros de ligne
Collez une fonction Go, activez la détection automatique pour que le langage soit choisi pour vous, activez les numéros de ligne, choisissez le thème Nord et exportez un PNG 2x pour un tutoriel.
Une carte de marque avec dégradé personnalisé
Mettez le fond sur Dégradé personnalisé, choisissez les deux couleurs de votre marque et un angle, ajoutez un titre de fenêtre comme app.tsx et copiez l'image directement dans le presse-papiers.
Un SVG évolutif pour la documentation
Choisissez le thème clair Snow, définissez la largeur de sortie et téléchargez un SVG pour que la carte de code reste nette à toute taille dans votre documentation.
Questions fréquentes
- Quels langages peut-il colorer ?
- Plus de 20, dont JavaScript, TypeScript, JSX/TSX, HTML, CSS, JSON, Python, Bash, Java, C, C++, C#, Go, Rust, Ruby, PHP, SQL, YAML, Markdown, Kotlin, Swift et GraphQL. Choisissez-en un dans le menu ou activez la détection automatique pour que le langage soit deviné depuis votre code.
- Que puis-je exporter, et à quelle qualité ?
- Exportez un PNG en densité de pixels 1x, 2x ou 3x, enregistrez un SVG vectoriel ou copiez l'image directement dans le presse-papiers. En choisissant le fond Transparent, le PNG conserve un canal alpha sans aucun arrière-plan derrière la carte.
- Puis-je modifier l'apparence de la carte ?
- Oui. Basculez entre sept thèmes, choisissez un dégradé prédéfini, une couleur unie ou un dégradé personnalisé, ou un fond transparent, et ajustez la police à chasse fixe, la taille de police, la marge intérieure, les numéros de ligne, le titre de fenêtre modifiable et la largeur de sortie.
- 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, Copier l'image ou Télécharger le SVG, donc la saisie ne recapture pas l'image à chaque frappe. L'aperçu stylisé se met malgré tout à jour en direct ; dans l'espace de travail, le PNG se reconstruit automatiquement pour pouvoir circuler vers l'outil suivant.
Outils connexes
Vérificateur de contraste des couleurs
Vérifiez le contraste WCAG 2.1 et le score APCA Lc entre texte et fond, voyez les badges AA, AAA et 3:1 et appliquez la couleur conforme la plus proche.
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 OKLCH, HSL ou RGB avec paliers réglables, indications de contraste WCAG par palier et export CSS, Tailwind et JSON.
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é.