Aller à l'outil
JoeLucky

Cliquez sur ★ pour enregistrer un outil

Catégories d'outils

Code en imageGénérateur de dégradés CSSGlassmorphism CSSGénérateur de box-shadowGénérateur de loaders CSSGénérateur de blobs SVGSVG en PNGVérificateur de contrasteConvertisseur PX / REM / EM
JoeLucky

Des outils en ligne pratiques, tous au même endroit

Politique de confidentialitéConditions d'utilisation

© 2026 JoeLucky®. Tous droits réservés.

  1. JoeLucky
  2. /CSS et design
  3. /Code en image

Code en image

Transformez vos extraits de code en captures d'écran soignées.

Marge intérieure40px
Arrière-plan
Aperçu
javascript.ts
1function greet(name) {
2 // Say hello
3 const msg = `Hello, ${name}!`
4 console.log(msg)
5 return msg
6}

CSS ET DESIGN SIMILAIRES

Tout voir
Générateur de dégradés CSS

Créez des dégradés linéaires, radiaux et coniques et copiez le CSS aussitôt.

Ouvrir →
Glassmorphism CSS

Générez le code d'un flou d'arrière-plan et d'une bordure translucide en direct.

Ouvrir →
Générateur de box-shadow

💬 Commentaires

?

Aucun commentaire pour le moment. Soyez le premier !

QU'EST-CE QUE Code en image ?

Transformez un extrait de code en image propre et partageable : choisissez le langage, le thème, le style de fenêtre et l'arrière-plan, puis téléchargez un PNG — prêt pour des diapositives, des docs ou des publications sociales.

Comment l'utiliser ?

  1. Collez du code dans la zone de saisie et choisissez un langage (JS/TS/Python/CSS/HTML/JSON/Bash/SQL/Rust/Go). Les mots-clés, chaînes et commentaires sont colorés automatiquement.
  2. Choisissez parmi 6 thèmes : Dracula, One Dark, GitHub Light, Solarized, Nord et Monokai — chacun avec sa propre personnalité de couleurs.
  3. Activez le style de fenêtre « macOS » pour ajouter les boutons rouge/jaune/vert pour un rendu d'éditeur réaliste. Les numéros de ligne peuvent être activés séparément.
  4. Le curseur « Marge intérieure » (16–80 px) contrôle l'espace entre le bloc de code et l'arrière-plan. Choisissez parmi 5 arrière-plans en dégradé ou transparent.
  5. Une fois satisfait de l'aperçu, cliquez sur « Télécharger le PNG » pour une image haute résolution 2× — parfait pour Twitter, LinkedIn ou des articles techniques. « Copier le code » copie le texte brut.

Questions fréquentes

Quels langages de programmation sont pris en charge ?

JavaScript, TypeScript, Python, HTML, CSS, JSON, SQL, Bash, Java et Go, avec coloration syntaxique.

Dans quel format les captures exportées sont-elles produites ?

PNG en résolution 2×, adapté aux blogs, aux présentations et aux réseaux sociaux.

Puis-je personnaliser l'arrière-plan et le style de fenêtre ?

Oui. Plusieurs thèmes de couleurs, styles macOS/sans bordure, couleur ou dégradé d'arrière-plan, numéros de ligne et marges intérieures.

Créez des ombres douces et superposées avec un aperçu interactif.

Ouvrir →