Code en image : transformez vos extraits en captures PNG ou SVG | We.Inc
Collez du code et obtenez une image soignée : coloration syntaxique, six thèmes, fonds en dégradé, barre de fenêtre, numéros de ligne et formats pour les réseaux sociaux. Exportez un PNG 2x net ou un SVG. Gratuit, dans votre navigateur.
Générateur d'images de code
Une image de code est une capture d'un extrait avec coloration syntaxique, marges et fond, pensée pour les présentations, les publications et la documentation où de vrais blocs de code ne sont pas disponibles. Collez votre code ci-dessous, choisissez un langage, un thème et un fond, sélectionnez une taille comme 1200 par 675, puis téléchargez un PNG net ou un SVG.
Tailles prédéfinies
Préréglage
Pixels
Idéal pour
Auto
S'adapte au code
Documentation, présentations, fichiers README
Paysage 16:9
1200 par 675
Aperçus de liens et publications larges
Carré
1080 par 1080
Publications carrées
Portrait 4:5
1080 par 1350
Publications verticales
Collez ou tapez du code, et l'aperçu se met à jour au fur et à mesure. Le langage est détecté automatiquement, ou choisissez-en un parmi neuf. Les fichiers PNG sont exportés en taille double pour un texte net sur les écrans haute densité.
Collez votre code dans l'éditeur. Le langage est deviné d'après le contenu ; changez-le si la détection se trompe.
Choisissez un thème, un fond et une taille. Activez ou non la barre de fenêtre et les numéros de ligne, et réglez les marges et la taille de police.
Ajoutez un nom de fichier à afficher dans la barre de fenêtre si cela aide le lecteur.
Téléchargez un PNG (rendu en 2x) ou un SVG qui conserve le code sous forme de vrai texte sélectionnable.
Gardez des extraits courts. Dix à vingt lignes se lisent bien dans une publication ; un code plus long a sa place dans un gist ou un bloc de code que l'on peut copier.
Utilisez une taille de police de 16 ou plus pour les réseaux sociaux, souvent consultés sur téléphone.
Quand vous partagez une image de code, partagez aussi le code en texte ou via un lien. Les lecteurs d'écran ne peuvent pas lire l'image, et personne ne peut copier depuis celle-ci.
Choisissez un thème clair pour les présentations projetées dans des salles lumineuses et un thème sombre pour les écrans et les fils des réseaux sociaux.
Questions fréquentes
Mon code est-il envoyé quelque part ?
Non. La coloration et l'export d'image se font dans votre navigateur. Rien n'est envoyé à un serveur, vous pouvez donc l'utiliser pour du code privé.
Pourquoi le PNG fait-il le double de la taille choisie ?
Il est exporté avec une densité de pixels 2x pour que le texte reste net sur les écrans haute résolution des téléphones et ordinateurs portables. Affiché à la taille choisie, chaque pixel CSS est couvert par quatre pixels de l'image.
À quoi sert l'export SVG ?
Le SVG conserve le code sous forme de texte dans une image vectorielle : il s'adapte à toutes les tailles et le texte reste sélectionnable dans certaines visionneuses. Il utilise la police monospace de la visionneuse, il peut donc paraître légèrement différent du PNG sur un autre ordinateur.
Quelle est la précision de la coloration syntaxique ?
C'est un tokenizer léger qui colore les mots-clés, chaînes, nombres, commentaires, fonctions, balises et attributs. Cela couvre ce qui rend un extrait lisible dans une image. Ce n'est pas un parseur complet, donc une syntaxe inhabituelle peut apparaître comme du texte brut.
Créer des images de code que l'on lit vraiment
Recadrez sur la partie importante. Retirez les imports et le code passe-partout sauf s'ils sont le sujet, et utilisez un commentaire pour signaler la ligne à regarder.
Le contraste compte autant dans une image que sur une page. Les thèmes proposés ici gardent les commentaires lisibles mais plus discrets que le code, et distinguent clairement chaînes et mots-clés.
Texte alternatif pour les images de code
Quand vous publiez l'image, décrivez ce que fait le code dans le texte alternatif, par exemple : fonction JavaScript qui applique un debounce de 300 millisecondes à un champ de recherche. Collez le code lui-même dans le corps de la publication ou en réponse si la plateforme le permet.
Minuit
Braise
Forêt
Nuit violette
Papier
Sable
Ciel
Coucher de soleil
Menthe
Ardoise
Pêche
Aucun
Auto
1200 par 675
1080 par 1080
1080 par 1350
Créer une image
Code
Langage
Détecter ({lang})
Taille
Marge : {n}px
Taille de police : {n}px
Nom du fichier
Barre de fenêtre
Numéros de ligne
Thème
Fond
Aperçu de l'image de code {lang}
{w} par {h} px (le PNG est exporté en {w2} par {h2})