Générateur de captures d'écran de code en ligne gratuit

Transformez votre code source en maquettes de captures haute résolution avec coloration syntaxique. Choisissez styles de fenêtre macOS, thèmes et dégradés d'arrière-plan.

De superbes captures de code

Collez votre code, choisissez un langage et un thème, puis téléchargez un PNG au double de la taille de l'écran.

13 thèmes de coloration
29 langages
Cadres macOS, Windows, navigateur
Export PNG en 2x

Sans inscription. Fonctionne entièrement dans votre navigateur.

Qui utilise les captures de code ?

Pour tous ceux qui veulent un code lisible dans une publication, une diapositive ou un cours, sans capture d'écran d'éditeur encombrée.

Développeurs et ingénieurs

Partagez un extrait sur LinkedIn, X ou un forum de développeurs sous forme d'image qui conserve ses couleurs et son espacement. Choisissez un thème sombre pour les fils d'actualité et un thème clair pour la documentation.

Une image d'extrait soignée pour une publication sur les réseaux sociaux
Les points forts d'un projet pour un portfolio ou un README
Une courte astuce de code avec un cadre macOS ou Windows

Rédacteurs techniques

Ajoutez des images de code aux articles de blog, tutoriels et newsletters où les blocs de code s'affichent mal. Gardez le même thème et la même marge intérieure pour que toutes les images d'une série soient cohérentes.

Des images de code pour articles de blog et newsletters
Une image de code pour une miniature ou une intro vidéo
Des extraits assortis pour un ebook ou une page de cours

Formateurs et conférenciers

Affichez un code lisible sur vos diapositives et vos supports. Passez la police à 20 px pour une grande salle, et utilisez un thème clair pour les feuilles imprimées.

Du code grand et lisible sur des diapositives de conférence
Du code d'exemple pour les leçons de cours en ligne
Des extraits en thème clair pour des fiches d'atelier imprimées

Du code à l'image avec thèmes, cadres et arrière-plans

29 langages, 13 thèmes, quatre styles de fenêtre, 13 arrière-plans plus un sélecteur de couleur, et des curseurs pour la taille de police et la marge intérieure.

Capture d'écran de code d'un extrait Python dans les thèmes Dracula, Nord et GitHub Light, chacun dans un cadre de fenêtre macOS

Colorez le code avec 13 thèmes de syntaxe

Choisissez le langage, puis passez d'un thème à l'autre : Dracula, Nord, Tokyo Night, GitHub Light, etc. Les mots-clés, les chaînes et les commentaires prennent les couleurs du thème, et l'aperçu se redessine à chaque changement.

29 langages, de Python à Terraform
10 thèmes sombres et 3 thèmes clairs
Mots-clés, chaînes et commentaires colorés

Essayer maintenant

Capture d'écran de code d'un extrait TypeScript dans les styles macOS, Windows, Navigateur et sans cadre, sur quatre arrière-plans

Encadrez le code dans une fenêtre avec un arrière-plan

Entourez l'extrait d'une barre macOS, Windows ou Navigateur, ou affichez-le sans cadre. Définissez ensuite l'arrière-plan : l'une des 9 couleurs unies, l'un des 4 dégradés ou n'importe quelle couleur de votre choix.

macOS, Windows, Navigateur ou sans cadre
9 couleurs unies, 4 dégradés, couleur personnalisée
Marge intérieure de 0 à 80 px

Essayer maintenant

Téléchargez un PNG en 2x

« Télécharger le PNG » enregistre l'image encadrée complète, arrière-plan compris, au double de sa taille à l'écran. Le fichier s'appelle code-screenshot.png : renommez-le si vous en enregistrez plusieurs.

Taille de police et titre de l'onglet

Réglez la taille du code de 11 à 20 px et saisissez un nom de fichier comme index.ts pour la barre de la fenêtre. Le code utilise la police à chasse fixe de votre appareil.

Gratuit, sans inscription, sans filigrane

Créez autant d'images de code que vous le souhaitez, sans compte ni limite quotidienne. Le PNG ne contient que votre code et son cadre, sans aucun logo ajouté.

L'aperçu se redessine pendant que vous modifiez

Les modifications du code, du thème, du cadre ou des curseurs apparaissent dans l'aperçu au fur et à mesure. L'image s'estompe un instant pendant le calcul des nouvelles couleurs.

Comment créer une capture de code en 3 étapes

Collez votre code.

Cliquez sur « Créer la capture d'écran », collez l'extrait dans la zone « Code » et choisissez son langage dans la liste. Il n'y a pas de détection automatique : sélectionnez celui qui correspond.

Stylisez l'image.

Choisissez un thème, un style de fenêtre et un arrière-plan, puis déplacez les curseurs de taille de police et de marge intérieure. Ajoutez un titre d'onglet si vous voulez afficher un nom de fichier dans la barre.

Téléchargez le PNG.

Vérifiez l'aperçu, puis cliquez sur « Télécharger le PNG ». Vous obtenez code-screenshot.png au double de la taille de l'aperçu, prêt pour une publication, un document ou une diapositive.

Questions fréquentes

Des réponses sur les langages, les thèmes, les numéros de ligne, les arrière-plans et le PNG que vous téléchargez.

Comment transformer du code en image ?

Ouvrez l'éditeur, collez votre extrait et choisissez son langage. Sélectionnez un thème, un cadre de fenêtre et un arrière-plan, puis cliquez sur « Télécharger le PNG ». L'image est enregistrée sur votre appareil sous le nom code-screenshot.png, au double de la taille de l'aperçu, prête à être publiée ou insérée dans une diapositive.

Quels langages de programmation peut-on colorer ?

Vous pouvez choisir parmi 29 : TypeScript, JavaScript, Python, Rust, Go, Java, Kotlin, Swift, C, C++, C#, Ruby, PHP, HTML, CSS, SCSS, JSON, YAML, TOML, Bash, shell, SQL, GraphQL, Markdown, Dockerfile, Terraform, Vue, JSX et TSX. La liste affiche des identifiants courts : C++ apparaît donc sous la forme cpp et C# sous la forme csharp.

Quels thèmes de syntaxe sont disponibles ?

Il y a 13 thèmes. Dix sont sombres : Vitesse Dark, GitHub Dark, Dracula, Nord, One Dark Pro, Monokai, Catppuccin Mocha, Tokyo Night, Min Dark et Solarized Dark. Trois sont clairs : Vitesse Light, GitHub Light et Solarized Light. L'éditeur démarre sur Vitesse Dark.

Puis-je afficher les numéros de ligne dans l'image du code ?

Pas pour le moment. L'éditeur affiche une case « Afficher les numéros de ligne », mais elle n'ajoute pas encore de numéros : le PNG n'en contient donc aucun. Pour renvoyer les lecteurs vers une ligne, citez-la dans votre texte ou ajoutez un court commentaire dans le code lui-même.

Quelle est la taille du PNG téléchargé ?

Le PNG fait le double de la taille de l'aperçu encadré, dans chaque direction. Le cadre mesure au moins 400 px de large à l'écran, le fichier fait donc au moins 800 px de large. Des lignes plus longues, une police plus grande ou une marge intérieure plus importante l'agrandissent.

Puis-je utiliser un arrière-plan transparent ou personnalisé ?

Vous pouvez choisir une couleur personnalisée, mais pas un fond transparent. Sélectionnez l'une des 9 couleurs unies ou l'un des 4 dégradés, ou ouvrez le sélecteur de couleur pour obtenir n'importe quelle teinte unie. Le sélecteur ne permet pas de créer un dégradé et il n'existe pas d'option transparente : la zone autour de la fenêtre a donc toujours une couleur.

À quoi ressemblent les styles de fenêtre ?

macOS affiche trois pastilles rouge, jaune et verte. Windows place le titre de l'onglet à gauche, avec les boutons réduire, agrandir et fermer à droite. Navigateur ajoute des flèches précédent et suivant ainsi qu'une barre d'adresse. Sans cadre affiche uniquement le code sur l'arrière-plan.

Ai-je besoin d'une extension VS Code pour faire une capture d'écran de code ?

Non. Copiez le code depuis VS Code, PyCharm ou tout autre éditeur et collez-le ici. Une simple capture d'écran inclut aussi les onglets, les barres latérales et votre propre configuration de couleurs, alors que cet outil ne dessine que l'extrait, dans le thème et le cadre que vous choisissez.

Pourquoi mon code n'est-il pas coloré correctement ?

Vérifiez d'abord le menu « Langage ». L'outil ne devine jamais le langage : un code Python réglé sur TypeScript obtient donc de mauvaises couleurs. Choisissez le langage qui correspond à votre extrait. Si la coloration syntaxique échoue, le code s'affiche en texte brut d'une seule couleur plutôt qu'avec un message d'erreur.

Puis-je changer la police du code ?

Vous pouvez modifier la taille, mais pas la police. Le curseur va de 11 à 20 px. Le code utilise la police à chasse fixe intégrée à votre appareil : un même extrait peut donc paraître légèrement différent selon qu'il est créé sur Mac ou sur Windows.

L'outil de capture d'écran de code est-il gratuit, et mon code est-il envoyé quelque part ?

Oui, il est gratuit, sans compte, sans filigrane et sans limite quotidienne. Votre code n'est jamais envoyé à un serveur ; l'image est générée et enregistrée sur votre appareil. Sur le site en ligne, Google Analytics enregistre la visite de la page, pas votre code.