Transformer du code en belle image (pour vos slides, docs et réseaux sociaux)

Pourquoi partager du code en image ?

Coller du code en texte dans un post, une diapositive ou une messagerie fonctionne rarement bien : l'indentation saute, la police n'est pas à chasse fixe, il n'y a pas de coloration syntaxique, et les longues lignes se coupent n'importe où. Une capture brute de votre éditeur n'est guère mieux : floue, rognée, avec vos onglets et votre barre latérale visibles.

Une image de code règle le problème :

• Réseaux sociaux : sur LinkedIn ou X, un extrait coloré attire bien plus l'œil qu'un texte brut.
• Présentations : une image nette s'insère dans n'importe quel logiciel de diapositives, sans mauvaise surprise de mise en forme.
• Documentation et tutoriels : illustrer clairement une étape.
• Articles de blog et newsletters : un style visuel homogène pour chaque extrait.
• Revues de code et enseignement : mettre en évidence un passage précis.

Créer une image de code en quelques secondes

L'outil Code en image transforme votre code en PNG net. La coloration et le rendu se font dans votre navigateur : votre code n'atteint jamais un serveur.

1. Collez votre code. Le langage est détecté automatiquement, ou choisissez-le parmi plus de 20 langages : JavaScript, TypeScript, Python, Java, C#, C++, Go, Rust, PHP, Ruby, Kotlin, Swift, SQL, Bash, JSON, YAML, HTML, CSS, Markdown, Dockerfile…
2. Choisissez le style : thème d'éditeur, fond (dégradés ou aucun), cadre de fenêtre, numéros de ligne.
3. Exportez : téléchargez le PNG ou copiez-le directement dans le presse-papiers pour le coller dans un post ou une diapositive.

L'image est exportée au double de la taille affichée (2x), pour rester nette sur les écrans haute densité et dans les documents. Avec le fond vide, le PNG garde des coins transparents — prêt à poser sur n'importe quelle diapositive.

La rendre lisible

Une image de code n'est utile que si on peut la lire, souvent sur un téléphone :

Règle	Pourquoi
15 lignes maximum	Sur mobile, les images plus longues deviennent minuscules
60 à 70 caractères par ligne	Éviter la lecture horizontale sur petit écran
Une idée par image	Montrer l'essentiel, pas tout le fichier
Thème contrasté	Les thèmes peu contrastés deviennent illisibles une fois compressés par les plateformes
Noms explicites	nombreUtilisateurs s'explique tout seul ; x demande du contexte

Retirez imports, logs et code d'amorçage qui ne servent pas le propos. Si besoin, formatez d'abord l'extrait (pour du JSON, le formateur JSON ; pour du SQL, le formateur SQL).

Fournissez toujours aussi la version texte

Une image de code a deux défauts : elle ne se copie pas, et elle est invisible pour les lecteurs d'écran et les moteurs de recherche. Bonne pratique :

• ajoutez le code en texte dans le premier commentaire, dans un gist ou dans le texte alternatif,
• ou utilisez le bouton Partager de l'outil : il crée un lien qui rouvre l'outil avec le même code et les mêmes réglages, pour que d'autres puissent copier le code en texte ou retoucher l'image. Le code voyage dans le lien lui-même (après le #), que les navigateurs n'envoient jamais au serveur.

Idées d'utilisation

• Une série « astuce du jour » sur LinkedIn.
• Un avant / après de refactorisation (deux images côte à côte).
• Des diapositives pour un meetup ou un cours.
• Des illustrations pour le README d'un projet open source.
• Un aide-mémoire pour votre équipe.

Conclusion

Une bonne image de code est courte, contrastée, centrée sur une idée — et toujours accompagnée de sa version texte. Avec un outil qui colore et dessine dans votre navigateur, c'est l'affaire de quelques secondes, pour un PNG assez net pour n'importe quel écran ou diapositive.