Convertisseur code → image, gratuit

Transformez votre code en superbes images à partager, avec coloration syntaxique.

40px
14px

Pourquoi utiliser code → image ?

Les images de code sont parfaites pour le partage sur les réseaux sociaux (Twitter/X, LinkedIn), la documentation, les présentations et les tutos où un rendu de code formaté n'est pas disponible. Elles préservent la coloration syntaxique et rendent superbes sur toutes les plateformes.

Comment ça marche

  1. Collez du code : saisissez n'importe quel extrait, JavaScript, Python, CSS, SQL, commandes shell ou tout autre langage.
  2. Choisissez un thème : sélectionnez un thème clair, sombre ou à fort contraste pour la coloration.
  3. Personnalisez le cadre : définissez le style de fenêtre (macOS/Windows/minimal), la couleur ou le dégradé d'arrière-plan, la marge intérieure et la taille de police.
  4. Exportez : téléchargez en PNG ou SVG, parfait pour partager sur Twitter/X, LinkedIn ou intégrer à vos articles.

Pourquoi convertir du code en image ?

Partager du code en capture d'écran est bien plus engageant que coller du texte brut, cela préserve la coloration syntaxique et reste plus lisible d'un coup d'œil sur les réseaux sociaux. Les images de code sont massivement utilisées par les développeurs, les formateurs techniques et les créateurs de contenu sur Twitter/X, LinkedIn, Instagram et dans les vignettes YouTube. Des outils comme Carbon (carbon.now.sh) ont popularisé ce format. Cette version côté navigateur génère de belles captures sans envoyer votre code à un serveur externe, prend en charge tous les langages populaires avec une coloration précise et un style de fenêtre personnalisable.

Options de personnalisation

Qu'est-ce qu'un outil code-vers-image ?

Un outil code-vers-image prend un fragment de code source, applique une coloration syntaxique, l'enveloppe dans un cadre de fenêtre stylisé et exporte un PNG (ou JPG, WebP) prêt à partager sur les réseaux sociaux, coller dans un deck de slides ou intégrer comme image héros d'un article de blog. Le résultat se lit comme une capture d'écran prise depuis un bel éditeur de code, sauf que la mise en page, le thème et le cadre sont reproductibles et la résolution est parfaite au pixel pour le format d'aspect dont vous avez besoin.

La coloration syntaxique est le style visuel où les mots-clés (if, function, return) obtiennent une couleur, les chaînes une autre, les commentaires sont atténués, et ainsi de suite. Bien faite, elle rend le code scannable en millisecondes. Faite en texte brut, le même fragment se lit comme un mur de monospace gris. Le thème classique Monokai sombre, GitHub Dark et Dracula sont les plus partagés sur les réseaux sociaux parce que leur contraste survit à la compression d'image.

Cet outil s'exécute entièrement dans votre navigateur en utilisant highlight.js pour la détection de langue et html2canvas pour rastériser le DOM stylisé en une image téléchargeable. Votre code ne quitte jamais la page. Le PNG de sortie peut être glissé dans n'importe quel tweet, post LinkedIn, doc Notion ou canvas de design, et il reste net parce que html2canvas rend au ratio de pixels de l'appareil.

Ce qu'il y a dans l'outil

La colonne de gauche est le panneau de contrôles : une zone de texte pour votre code, un menu déroulant de langue avec 16 options populaires (JavaScript, TypeScript, Python, HTML, CSS, JSON, Bash, SQL, Java, C#, PHP, Ruby, Go, Rust, XML, YAML), un sélecteur de thème (Dark Monokai, Light, GitHub Dark), un sélecteur d'arrière-plan avec cinq dégradés et trois unis, plus des curseurs de rembourrage et de taille de police.

Deux cases à cocher basculent les points de fenêtre style macOS (les feux tricolores rouge, jaune, vert en haut du cadre) et les numéros de ligne. Les points sont une décoration pure mais font lire l'image comme une capture d'écran d'éditeur de code plutôt qu'un simple collage de texte. Les numéros de ligne aident lorsque vous référencez une ligne spécifique dans un tutoriel ou un rapport de bug.

La colonne de droite est l'aperçu en direct : il rend le code surligné à l'intérieur du cadre, du rembourrage et de l'arrière-plan choisis. Chaque contrôle met à jour l'aperçu en temps réel. Le bouton Télécharger PNG sérialise l'aperçu via html2canvas à la résolution native et déclenche un téléchargement du navigateur. Pas d'aller-retour vers un serveur, pas de téléversement de votre code.

Histoire et contexte

Impressions de listing (à partir de 1944)

Le Harvard Mark I en 1944 imprimait les listings de programme sur du papier à alimentation continue, les premiers artefacts de code source à quitter la mémoire d'un ordinateur. Tout au long des années 1950 et 1960, les imprimantes à lignes produisaient des kilomètres de FORTRAN et COBOL sur du papier à barres vertes. Le format était monospacé parce que la roue de marguerite de l'imprimante n'avait qu'une seule police, mais la convention s'est imposée : le code source est monospacé parce que chaque éditeur depuis a préservé cet héritage de 80 colonnes.

Coloration syntaxique en direct dans Emacs (1984)

L'Emacs de Richard Stallman a ajouté font-lock-mode en 1984, le premier surligneur de syntaxe en direct largement utilisé. Les mots-clés apparaissaient dans une couleur, les chaînes dans une autre, les commentaires atténués. L'encodage visuel a accéléré la lecture en traitant le code comme un texte structuré. Vim a ajouté la syntaxe en 1991, BBEdit sur Mac en 1992, et chaque éditeur moderne (VSCode, Sublime Text, JetBrains, Neovim) s'appuie sur cette lignée.

Thèmes TextMate et Monokai (2006)

TextMate d'Allan Odgaard (2004) a introduit des fichiers de thème que les designers pouvaient partager. Le thème Monokai de Wimer Hazenberg (2006) est devenu l'esthétique iconique du code sombre de la fin des années 2000. Sublime Text a adopté Monokai par défaut en 2008, et les couleurs (mots-clés verts, chaînes roses, fonctions bleues sur fond olive foncé) sont devenues un raccourci visuel pour le travail de code sérieux.

highlight.js sort (2006)

Ivan Sagalaev a publié highlight.js en 2006, un surligneur de syntaxe en pur JavaScript qui détecte automatiquement la langue et produit du HTML sémantique. Il est devenu le défaut pour les blogs, les sites de documentation et Stack Overflow. Aujourd'hui, il prend en charge 190+ langues et 250+ thèmes. Cet outil utilise highlight.js pour la coloration de syntaxe sous-jacente.

Carbon est lancé (2017)

Dawn Labs (Mike Fix et Brian Dennis) a lancé carbon.now.sh en 2017, le premier outil de navigateur dédié à la création de belles captures d'écran de code pour les réseaux sociaux. Il a ajouté des arrière-plans en dégradé, un chrome de fenêtre macOS, un rembourrage configurable et l'export PNG en un clic. Carbon est devenu viral sur Twitter et a effectivement inventé la catégorie. Cet outil offre le même ensemble de fonctionnalités principales entièrement dans votre navigateur, aucun compte Carbon requis.

Ray.so, CodeSnap, Polacode (à partir de 2020)

Raycast a lancé Ray.so en 2020 avec des défauts plus propres que Carbon. CodeSnap et Polacode (2018) ont apporté le format à VSCode comme extensions, vous permettant de capturer le code sélectionné sans quitter l'éditeur. La catégorie est devenue mature et fait partie par défaut de la boîte à outils de création de contenu de chaque développeur. Les motifs (points de fenêtre, arrière-plan en dégradé, police monospacée, thème de syntaxe) se sont stabilisés en un genre visuel reconnaissable.

Flux de travail pratiques

Post Twitter ou X avec un fragment de code

Une image de code dans un tweet obtient 3 à 5 fois l'engagement du même code collé en tant que texte. Collez le fragment, choisissez un arrière-plan en dégradé (violet ou rose se lisent mieux dans la timeline), cochez les points de fenêtre, laissez les numéros de ligne désactivés si le fragment fait moins de dix lignes. Téléchargez PNG, glissez dans le compositeur de tweet.

Post LinkedIn pour recrutement technique

Lors du partage d'une astuce du vendredi ou d'une révision de code sur LinkedIn, une image de code stylisée arrête le scroll. Les images LinkedIn rendent mieux à 1200 par 627 pixels pour la carte d'aperçu ; ajustez le curseur de rembourrage jusqu'à ce que l'export remplisse ce ratio approximativement. Le thème Dark Monokai se lit bien contre l'arrière-plan bleu-gris de LinkedIn.

Image héros d'article de blog

Pour un article sur une fonction ou un motif spécifique, une image stylisée de cette fonction fait un super héros Open Graph (1200 par 630 pixels). L'image apparaît sur les cartes Twitter, les aperçus de liens Slack et les partages Facebook. Associez-la à un véritable bloc <pre><code> copiable-collable dans le corps de l'article pour l'accessibilité.

Slide de conférence

Dans une présentation Keynote ou Google Slides, les images de code surlignées en syntaxe s'agrandissent nettement du moniteur au projecteur. Réglez le curseur de taille de police à 18 ou 20 pixels pour la lisibilité au dernier rang, choisissez un thème à fort contraste (Dark Monokai ou GitHub Dark), et utilisez un arrière-plan transparent pour que le modèle de slide transparaisse.

Bannière README GitHub

Un README s'ouvre mieux avec une image de code stylisée montrant l'exemple hello-world de la bibliothèque. L'image vit dans le dossier docs/ de votre dépôt, référencée via Markdown. GitHub rend l'image nativement sur la page d'accueil du projet, où le PNG syntax-highlighted se lit mieux que le bloc de texte brut fenced qui suit en dessous.

Vignette ou B-roll de tutoriel YouTube

Pour un tutoriel de codage, une image de code haute résolution fonctionne comme arrière-plan de vignette ou comme B-roll inséré entre les segments d'écran en direct. Exportez à une taille de police de 14 à 16 pixels avec un rembourrage généreux, puis déposez dans l'éditeur et redimensionnez. L'image reste nette en 1080p ou 4K parce que html2canvas rend au ratio de pixels de l'appareil.

Pièges courants

Les images de code ne sont pas recherchables

Les moteurs de recherche ne peuvent pas indexer le texte à l'intérieur d'une image (encore). Si votre blog dépend du trafic Google, intégrez le vrai code comme un bloc <pre><code> dans le corps de l'article. Utilisez l'image stylisée uniquement comme vignette de partage social ou héros, pas comme représentation principale du code.

Les lecteurs d'écran ne peuvent pas lire le code dans les images

Un utilisateur aveugle avec NVDA, JAWS ou VoiceOver entend «image» et rien de plus lorsqu'il rencontre une capture de code. Fournissez toujours le même code en tant que texte accessible à proximité, soit via un attribut alt (fragments courts) soit un bloc <pre><code> visuellement masqué avec la source complète. Sinon le post est inutilisable pour la technologie d'assistance.

Les lecteurs ne peuvent pas copier le code depuis les images

Lorsque le public veut copier et exécuter le code, une image les force à retaper ou OCRer. Google Lens et Live Text de macOS font de l'OCR raisonnablement bien, mais c'est de la friction. Pour les tutoriels et how-tos, associez l'image (pour l'attrait visuel) avec un bloc texte copiable-collable (pour l'utilisabilité).

Les longues lignes s'enveloppent ou sont coupées

Une requête SQL de 200 caractères ou une expression JSX profondément imbriquée déborde du cadre. L'aperçu ajoute une barre de défilement horizontal, mais le PNG exporté soit s'enveloppe maladroitement soit clippe. Refactorisez le fragment pour tenir dans environ 80 colonnes, ou divisez-le sur plusieurs images de code plus petites. Prévisualisez toujours avant l'export.

Thème sombre sur arrière-plans de réseau social clairs

Une image Monokai sombre a l'air super sur une timeline Twitter en mode sombre mais crée un contraste dur sur un flux en mode clair. Ajoutez du rembourrage autour du cadre de code sombre (l'arrière-plan en dégradé coloré aide) afin que le bloc sombre ne s'écrase pas contre la page blanche. Inversement, les thèmes clairs nécessitent la considération inverse sur les flux en mode sombre.

Coloration syntaxique de versions de langue obsolètes

highlight.js est bon mais accuse du retard sur le bleeding edge. La nouvelle syntaxe ES2024 (using disposable resources, decorators) ou les fonctionnalités async de Rust peuvent ne pas se surligner parfaitement. Le code reste lisible, mais un mot-clé pourrait apparaître comme un identifiant simple. Utilisez un surligneur différent (Shiki, Prism) si la coloration exacte au bleeding-edge importe.

Confidentialité et gestion des données

Toute la coloration et la rastérisation se passent dans votre navigateur. highlight.js analyse votre code localement, html2canvas sérialise le DOM rendu en un PNG, et le téléchargement se déclenche via une URL blob. Nous ne transmettons pas votre code source à un serveur, ne journalisons pas les entrées et ne stockons pas les sorties.

Une fois la page chargée (y compris les fichiers CDN highlight.js et html2canvas), l'outil fonctionne hors ligne. Vous pouvez vous déconnecter du réseau et capturer du code propriétaire, des exemples d'API internes ou tout fragment qui ne doit pas toucher un service tiers. Les bibliothèques CDN sont chargées une fois et mises en cache localement.

Quand ne pas utiliser un outil code-vers-image

Blocs de code de blog en production

À l'intérieur du corps d'un article how-to, utilisez de vrais blocs <pre><code> avec un surligneur côté serveur (Shiki, Prism, highlight.js). Les vrais blocs de code sont sélectionnables, copiables, recherchables, accessibles et stylisables via CSS dark-mode. Réservez les images au héros, à la vignette de partage social ou à la fioriture visuelle, pas au code de travail.

Documentation qui doit être recherchable

Si votre site de docs s'appuie sur Algolia DocSearch, GitBook search ou tout index de texte intégral, le code dans les images est invisible au moteur de recherche. Les ingénieurs cherchant un nom de fonction spécifique ne le trouveront pas dans votre exemple en image seule. Utilisez toujours de vrais blocs de code dans la documentation indexée.

Longs fichiers ou code multi-écrans

Un fichier de 200 lignes ne tient pas dans une seule image à une taille de police lisible. Décomposez-le en morceaux logiques (une fonction par image), ou partagez simplement un lien GitHub gist avec la source complète. Forcer un long fichier dans un PNG produit un mur de minuscules textes illisibles.

Code sensible avec secrets visibles

Les captures d'écran de code avec des clés API, des URL de bases de données ou des identifiants codés en dur sont grattées depuis Twitter et indexées par les scanners de secrets GitHub en quelques heures. Le fait que les identifiants soient dans une image ne ralentit pas les attaquants ; les pipelines OCR les prennent. Faites tourner immédiatement tout secret qui apparaît dans une image de code publique.

Plus de questions

PNG ou SVG, quel format d'export choisir ?

PNG est le défaut sûr pour les réseaux sociaux (universellement supporté, sans perte, petite taille de fichier pour les images de code typiques). SVG est plus net à n'importe quel niveau de zoom mais n'est pas supporté comme contenu inline sur Twitter, LinkedIn ou la plupart des plateformes sociales. Pour l'intégration web sur votre propre blog, SVG est techniquement meilleur ; pour tout partage social, tenez-vous au PNG. Cet outil exporte uniquement en PNG.

Quel texte alt dois-je écrire ?

Pour les fragments courts (moins de cinq lignes), mettez le code réel dans l'attribut alt. Pour les fragments plus longs, écrivez un résumé d'une phrase dans alt (par exemple, «Fonction JavaScript qui récupère les données utilisateur et gère les erreurs 404») et incluez le code complet comme un bloc <pre><code> visible à proximité. Ne laissez jamais alt vide sur une image de code.

Quelles dimensions fonctionnent pour les réseaux sociaux ?

Twitter/X : 1200 par 675 pixels (16:9), ou 1080 par 1350 pour le portrait. LinkedIn : 1200 par 627 (paysage) ou 1200 par 1200 (carré). Instagram : 1080 par 1080 (carré). Héros Open Graph : 1200 par 630. L'outil exporte à la taille naturelle de l'aperçu ; ajustez le rembourrage et la police pour approcher le format cible, puis recadrez ou rembourrez dans votre éditeur d'image si vous avez besoin de dimensions parfaites au pixel.

Quelle police est la meilleure pour les images de code ?

Cet outil utilise Fira Code, Cascadia Code ou Consolas (le navigateur prend la première installée). Fira Code a des ligatures de programmation (=> est rendu comme un seul glyphe flèche) qui sont saisissantes dans les captures. JetBrains Mono et Source Code Pro sont des alternatives également lisibles. Évitez generic monospace qui peut être le Courier par défaut du système sur Windows, ce qui a l'air daté.

Pourquoi l'export ressemble-t-il un peu différemment de l'aperçu ?

html2canvas rastérise le DOM en réimplémentant le rendu CSS en JavaScript. Certaines propriétés (filtres CSS avancés, certaines fonctionnalités de police, pseudo-éléments ::before/::after avec arrière-plans complexes) peuvent rendre légèrement différemment de l'aperçu en direct du navigateur. Les différences sont généralement petites, anti-aliasing sub-pixel ou poids de police, mais si l'export a l'air mauvais, simplifiez le style.

Comment cela se compare-t-il à Carbon (carbon.now.sh) ?

Carbon a plus de thèmes, plus de polices et l'export GIF animé. Cet outil couvre le cas à 80 % (export PNG, les thèmes les plus populaires, arrière-plans en dégradé, points de fenêtre) sans envoyer votre code à un serveur tiers. Pour les partages ponctuels sur les réseaux sociaux, il est plus rapide ; pour la personnalisation lourde ou la cohérence de marque à travers de nombreuses images, la bibliothèque de préréglages de Carbon est difficile à battre.

Outils associés

Vérificateur de différences

Comparez deux textes côte à côte.

Minifieur CSS

Minifiez du CSS pour en réduire la taille.

Formateur JSON

Formatez et validez des données JSON.