oLoveTools
Studio de captures de code

CodeCard

Convertissez vos extraits de code en magnifiques images de capture prêtes à être partagées, 100% localement dans votre navigateur.

48 langagesFonctionne dans votre navigateurSans compte ni envoi

6 lignes · Deposez un fichier source ici, ou collez le code.

Ou cliquez les numeros de ligne dans l’apercu. Maj+clic pour une plage, Alt+clic inverse, clic droit efface.

Apercu en direct

100%
fetch-user.ts
// Pega aquí tu fragmento de código
export async function fetchUser(id: string) {
const res = await fetch(`/api/users/${id}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
}
Coloration dans votre navigateur. Votre code ne quitte pas cet appareil.
ContinuezVotre image vous suit, sans reenvoi

Comment ca marche

1

Collez ou deposez votre code

Tapez, collez ou deposez un fichier source. Le fichier attend : sa taille et son nombre de lignes s’affichent, et rien ne se charge avant votre clic.

2

Stylisez et choisissez les lignes cles

Dix themes, neuf degrades ou votre couleur, cinq habillages de fenetre. Cliquez un numero de ligne pour la mettre en avant et attenuer le reste.

3

Exportez ou envoyez plus loin

PNG, JPEG, WebP ou SVG vectoriel, jusqu’a 4x. Copiez dans le presse-papiers, ou transmettez l’image a CompressSnap, CropSnap ou WatermarkSnap sans la telecharger.

Vraie coloration, 48 langages

Le coloriseur lit le flux de jetons brut de Prism : JavaScript, Rust, Zig, Terraform, Dockerfile et 43 autres sortent avec les bonnes couleurs — et seule la grammaire choisie est telechargee.

Mettez en avant les lignes utiles

Cliquez un numero de ligne pour la souligner et attenuer le reste. Maj+clic prend une plage, Alt+clic inverse toute la selection, clic droit l’efface.

Des exports dont rien n’est coupe

La carte est mesuree a sa largeur reelle avant capture : les longues lignes survivent a l’export au lieu d’etre tronquees au bord de l’apercu. PNG, JPEG, WebP ou SVG vectoriel, jusqu’a 4x.

Local, et vraiment hors ligne

Polices et grammaires viennent de ce site, pas d’un CDN tiers. Une fois la page chargee, coloration et export fonctionnent reseau debranche.

Foire Aux Questions

Pourquoi mes longues lignes etaient-elles coupees ailleurs ?+

Parce que la plupart des outils capturent le DOM tel qu’il est mis en page, et un bloc de code avec barre de defilement horizontale ne met en page que la partie visible. CodeCard mesure la carte a sa largeur reelle, non rognee, avant la capture.

Comment mettre certaines lignes en avant ?+

Cliquez un numero de ligne dans l’apercu pour la souligner et attenuer le reste. Maj+clic etend une plage, Alt+clic inverse toute la selection, le clic droit l’efface. Vous pouvez aussi saisir des plages comme 3, 7-9, 12.

Quels langages sont pris en charge ?+

48, dont JavaScript, TypeScript, JSX/TSX, Python, Rust, Go, Zig, C, C++, C#, Java, Kotlin, Swift, Ruby, PHP, SQL, YAML, TOML, Terraform, Dockerfile, Bash, PowerShell, Markdown et les diffs unifies. Seule la grammaire choisie est telechargee.

Puis-je utiliser CodeCard hors ligne ?+

Oui. Les polices monospace et les grammaires viennent de ce site et non d’un CDN tiers : une fois la page chargee, coloration et export continuent sans reseau.

Mon code est-il en securite ?+

Votre code n’est transmis nulle part. Coloration, mise en page et rendu de l’image se font dans votre navigateur ; rien n’est envoye ni journalise.

Quel reglage donne l’export le plus net ?+

PNG en 3x ou 4x pour un usage matriciel. Si la destination accepte les vecteurs, choisissez SVG : il reste net a toute taille et pese souvent moins qu’un PNG 4x.

Créez de superbes images de vos codes sources en ligne

Partager du code sous forme de texte brut sur les réseaux sociaux ou dans des présentations peut être visuellement ennuyeux. CodeCard transforme instantanément votre code en cartes au design élégant. Ajustez l'espacement, les ombres, les polices et le style de fenêtre pour correspondre à votre identité.

  • PNG, JPEG, WebP et SVG vectoriel jusqu’a 4x
  • Polices et grammaires auto-hebergees : fonctionne hors ligne
  • Sans compte, et le filigrane est desactive par defaut

Génération locale rapide et sécurisée

CodeCard s'exécute entièrement dans votre navigateur via un rendu côté client. Aucun fichier ou texte ne quitte jamais votre ordinateur.

Parfait pour les Réseaux Sociaux, les Blogs et les Diapositives

Idéal pour les influenceurs tech sur Twitter/X, les développeurs rédigeant des articles techniques et les enseignants créant des diaporamas. Les beaux visuels doublent le taux d'engagement.

Confidentialité stricte garantie

Contrairement à d'autres outils qui envoient votre code à des API externes, CodeCard effectue toute la coloration et le rendu à l'intérieur de votre navigateur. Vos clés privées ou propriété intellectuelle restent 100% sécurisées.

Base sur le flux de jetons de Prism

Plutot que de demander au coloriseur du HTML fini, CodeCard lit le flux de jetons brut et reconstruit le code ligne par ligne. C’est ce qui rend possibles les numeros exacts, la mise en avant par ligne, le renvoi avec retrait et les exports non rognes.

Mots-clés de recherche

convertir code en imagebelles captures de codegénérateur de carte de codealternative à carbon codecapture de code de programmationpartager code en image

Étape suivante

Compressez l'image CompressSnap Ajoutez un filigrane WatermarkSnap Formatez le code source FormatFlow

CodeCard | Générateur de superbes captures d'écran et d'images de code

Convertissez vos codes de programmation en images de haute qualité avec de magnifiques dégradés de fond, des ombres personnalisées et des cadres d'éditeur. 100% local, sécurisé et gratuit.

Foire Aux Questions

Pourquoi mes longues lignes etaient-elles coupees ailleurs ?

Parce que la plupart des outils capturent le DOM tel qu’il est mis en page, et un bloc de code avec barre de defilement horizontale ne met en page que la partie visible. CodeCard mesure la carte a sa largeur reelle, non rognee, avant la capture.

Comment mettre certaines lignes en avant ?

Cliquez un numero de ligne dans l’apercu pour la souligner et attenuer le reste. Maj+clic etend une plage, Alt+clic inverse toute la selection, le clic droit l’efface. Vous pouvez aussi saisir des plages comme 3, 7-9, 12.

Quels langages sont pris en charge ?

48, dont JavaScript, TypeScript, JSX/TSX, Python, Rust, Go, Zig, C, C++, C#, Java, Kotlin, Swift, Ruby, PHP, SQL, YAML, TOML, Terraform, Dockerfile, Bash, PowerShell, Markdown et les diffs unifies. Seule la grammaire choisie est telechargee.

Puis-je utiliser CodeCard hors ligne ?

Oui. Les polices monospace et les grammaires viennent de ce site et non d’un CDN tiers : une fois la page chargee, coloration et export continuent sans reseau.

Mon code est-il en securite ?

Votre code n’est transmis nulle part. Coloration, mise en page et rendu de l’image se font dans votre navigateur ; rien n’est envoye ni journalise.

Quel reglage donne l’export le plus net ?

PNG en 3x ou 4x pour un usage matriciel. Si la destination accepte les vecteurs, choisissez SVG : il reste net a toute taille et pese souvent moins qu’un PNG 4x.

Mots-clés de recherche

convertir code en image, belles captures de code, générateur de carte de code, alternative à carbon code, capture de code de programmation, partager code en image