Comment utiliser : Code en image
- Collez votre code, ou essayez l'exemple. Le langage est détecté automatiquement, ou vous pouvez le choisir.
- Choisissez un thème, un fond et un style de fenêtre, puis saisissez un nom de fichier pour la barre de titre.
- Ajustez les marges et la taille de police ; activez les numéros de ligne si vous devez y faire référence.
- Téléchargez un PNG (2× est net sur les écrans retina et les réseaux sociaux), un SVG pour la documentation, ou cliquez sur Copier l'image pour la coller dans Slack, sur X ou dans une présentation.
Pourquoi partager du code sous forme d'image ?
Sur les réseaux sociaux et dans les présentations, le code en texte perd sa mise en forme et ses couleurs. Une image de code conserve exactement l'indentation, la coloration et la mise en page voulues, s'affiche bien dans un fil d'actualité et ne peut pas être altérée par un traitement de texte. Pour une documentation où les lecteurs vont copier le code, privilégiez les blocs de code en texte et n'utilisez l'image que comme illustration.
Comment l'image est générée
L'extrait est coloré par un petit analyseur lexical intégré, qui reconnaît les commentaires, chaînes de caractères, nombres, mots-clés, fonctions et propriétés pour dix langages courants, puis il est dessiné sur un canevas avec la police monospace de votre système. L'export PNG le redessine en 1×, 2× ou 3× pour rester net ; l'export SVG conserve le texte tel quel, il s'adapte donc à toutes les tailles et reste consultable. Tout se passe dans votre navigateur.
Voir aussi : JavaScript Formatter, HTML Formatter, CSS Gradient Generator.
Aussi recherché comme : capture d'écran de code, image de code, générateur d'image de code, code vers png, belle capture de code, partager du code en image, coloration syntaxique image.
Outils complémentaires : Code en image
- Formateur CSS — Transformez une feuille de style minifiée en CSS lisible, avec une propriété par ligne et des blocs @media correctement imbriqués.
- Formateur JSON — Collez votre code JSON pour le formater, le compresser ou le valider.
- Éditeur Markdown — Rédigez en Markdown avec un aperçu en direct côte à côte, une barre de mise en forme et des raccourcis clavier.
- Générateur d’images OG — Créez en quelques secondes une image d'aperçu de lien soignée pour Facebook, LinkedIn, X, Slack et WhatsApp : choisissez un modèle, saisissez votre titre, ajoutez un logo, puis téléchargez le fichier PNG et les balises méta correspondantes.