Convertir du code en image

Comment ça marche

Copiez votre code depuis l'éditeur et collez-le dans le cadre de gauche. L'image de droite se redessine pendant la saisie. Les tabulations deviennent 4 espaces, les espaces en fin de ligne et les lignes vides du début et de la fin disparaissent, l'indentation reste telle quelle. La largeur suit la ligne la plus longue ; aucune ligne n'est coupée. Exemple : une fonction JavaScript de 12 lignes dont la plus longue fait 60 caractères donne en 2× un PNG d'environ 1 400 pixels de large, net sur LinkedIn ou X. Une ligne de plus de 100 caractères rend l'image très large ; la ligne de résultat vous le signale. Une image contient au plus 400 lignes. Le code est dessiné dans votre navigateur et n'est envoyé à aucun serveur.

Cet outil est aussi connu sous le nom de code en image, convertir code en image, capture de code, image de code, code snippet image, code to image.

Qu'est-ce que Image de code ?

Une image de code montre un extrait de code sous forme d'image plutôt que de texte. On l'utilise dans les diapositives, les visuels d'articles et les publications sur les réseaux, où une zone de texte casserait l'indentation ou n'afficherait pas de police à chasse fixe. Le code d'une image ne se copie pas : si vos lecteurs doivent l'exécuter, ajoutez aussi la version texte.

Qu'est-ce que Police à chasse fixe ?

Dans une police à chasse fixe, chaque caractère occupe la même largeur : un i prend autant de place qu'un m. C'est pour cela que le code s'affiche avec ces polices : l'indentation et les colonnes alignées ne tombent juste qu'ainsi. L'outil utilise la police de code de votre appareil, comme SF Mono ou Menlo sur Mac et Consolas sous Windows.

Image de code ou capture d'écran : quelle différence ?

Une capture d'écran de l'éditeur prend aussi les menus, les onglets, les soulignements d'erreur et la résolution de votre écran ; elle est pénible à recadrer et le texte devient flou sur un petit écran. Une image de code ne dessine que le code : marges, numéros et fond sont identiques à chaque fois, l'image reste nette en 2× et aucun nom de fichier ni chemin de projet n'apparaît. Montrer l'éditeur : capture. Partager le code : image de code.

Pourquoi pas de coloration syntaxique ni de retour à la ligne

L'outil écrit le code d'une seule couleur, sans colorer les mots-clés. La coloration demande des règles pour chaque langage, et un langage mal deviné donne une image plus confuse qu'un texte simple. Les numéros de ligne sont atténués et le code bien contrasté : la lisibilité sur diapositive et sur téléphone passe avant tout.

Les lignes ne sont pas coupées, car un code coupé se lit mal : en Python l'indentation a un sens, et un morceau renvoyé à la ligne ressemble à une nouvelle ligne. Une ligne longue élargit l'image et la ligne de résultat vous prévient ; le plus propre est de couper la ligne dans le code lui-même.

Quels réglages selon l'usage ?

Sur les réseaux sociaux, une carte sombre sur un fond dégradé se remarque dans le fil. Le thème clair fatigue moins les yeux sur des diapositives et documents blancs et économise l'encre à l'impression.

Si l'image va dans une autre mise en page, choisissez « Sans fond » : seule la carte de code reste, avec des coins transparents. Gardez les numéros de ligne si vous direz « regardons la ligne 5 » pendant un exposé ; pour une commande d'une seule ligne, c'est plus sobre sans.

Questions fréquentes

Comment convertir du code en image ?

Collez votre code dans le cadre de gauche de cette page. L'image façon fenêtre apparaît aussitôt à droite. Choisissez les couleurs puis appuyez sur « Télécharger » pour enregistrer le PNG.

Mon code est-il envoyé sur un serveur ?

Non. L'image est dessinée dans votre navigateur et le code n'est envoyé nulle part : vous pouvez l'utiliser aussi pour du code interne à une entreprise.

Y a-t-il une coloration syntaxique ?

Non. Le code est écrit d'une seule couleur avec des numéros de ligne atténués. Le rendu est le même pour tous les langages et rien ne peut être mal coloré.

Pourquoi mon image est-elle si large ?

La largeur suit la ligne la plus longue et aucune ligne n'est coupée. Une ligne de plus de 100 caractères élargit l'image ; coupez-la dans votre code et l'image se resserre.