Saisissez ou collez dans le champ Code source — jusqu'à 65 536 octets UTF-8, au plus 200 lignes et 240 caractères par ligne. Le compteur à côté du libellé affiche le nombre d'octets actuel par rapport à la limite, et tout dépassement est refusé avec un message qui la nomme, pour que vous sachiez exactement quoi raccourcir.
02
Choisissez le langage et le thème
Choisissez parmi 242 grammaires Shiki et 71 thèmes distincts. Chargez un exemple ou collez du code; la coloration ne l’exécute jamais.
03
Stylisez le cadre
Réglez tabulations, ombre, coins, filigrane et proportions. Fond uni, transparent ou PNG/JPEG/WebP local (8 MiB), avec marges, taille de police, numéros de ligne et titre.
04
Générez l'aperçu
À l’ouverture, l’espace de travail charge Shiki dans cet onglet et génère un véritable aperçu d’exemple. Une modification efface le résultat précédent ; cliquez sur « Générer l’aperçu » pour appliquer vos changements.
05
Téléchargez le SVG ou le PNG
Régénérez après modification. Téléchargez SVG ou PNG à 1×/2×, ou copiez PNG. Si le presse-papiers d’images échoue, téléchargez PNG. Limite: 4096 pixels par côté et 16 777 216 au total.
Fiche de l'outil
Traitement
Dans votre navigateur
L'entrée quitte cet appareil
Jamais
Conservation
Rien n'est stocké
Prix
Gratuit
Vos données restent dans le navigateur.
Code en image utilise son chemin d'exécution local vérifié et ne crée aucun historique caché des entrées ou sorties.
Exécution locale
S'exécute dans l'onglet actuel du navigateur.
Aucun traitement caché
Les données actives de l'outil ne deviennent jamais un enregistrement de document Toolars.
Aucun compte requis
Utilisez le workflow principal sans créer de profil. Les favoris se synchronisent avec votre compte après connexion.
Réinitialisation immédiate
Effacez l'onglet et les données de travail actives disparaissent.
Quand Code en image est utile
Exporter un extrait JavaScript mesuré à 1×
Saisissez deux lignes : const total = 2 + 3; et console.log(total); (40 octets UTF-8). Choisissez JavaScript, Sombre, #111827, marges 64 px, police 16 px, numéros de ligne activés, titre sum.js, 1×, tabulation 2, sans ombre, rayon 14 px, sans filigrane, proportions automatiques et police système. Après génération, cet essai local sur Chromium a produit un PNG de 406 × 270 pixels (13 206 octets) et un SVG de 1 647 octets avec viewBox 406 × 270.
Comparer le même extrait à 2×
Gardez le code et les réglages de l’exemple 1, choisissez 2×, régénérez et téléchargez le PNG : 812 × 540 pixels et 32 328 octets lors de cet essai local sur Chromium. Toutes les dimensions et tailles indiquées sont mesurées et peuvent varier selon la police et le navigateur. Un SVG sans police intégrée utilise les polices système et peut changer d’aspect sur un autre appareil.
Intégrer une police latine et cyrillique
Saisissez const text = "Café Привет"; avec le titre font.js et les réglages 1× de l’exemple 1. Importez ToolarsWatermarkWestern.ttf (102 840 octets), décompressée depuis https://toolars.com/fonts/pdf-watermark/western-v1.ttf.gz ; cette police de test dérive de Noto Sans CJK version Sans2.004 sous SIL OFL 1.1 (licence : https://toolars.com/fonts/pdf-watermark/OFL.txt). Cet essai local sur Chromium a produit un PNG de 403 × 245 pixels (10 376 octets) et un SVG de 138 612 octets avec la police complète. Les glyphes 漢字 manquent et bloquent la génération ; choisissez une autre police ou les polices système.
Ce que Code en image fait vraiment
Une fonction dont vous êtes fier a sa place dans les notes de version ; un extrait délicat doit illustrer le wiki interne ; une diapositive de conférence veut un fragment stylé plutôt qu'une capture d'écran aux onglets rognés. Convertisseur de code en image transforme l'extrait en un cadre soigné avec numéros de ligne et titre de fenêtre, et le SVG ou PNG exporté entre directement dans les diapositives, les docs et les discussions sans aucun nettoyage manuel. Comme l'analyse et le rendu se font dans cet onglet, le code source non publié ne voyage nulle part.
Questions fréquentes
Comment créer une image JavaScript pour une diapositive ?
Saisissez const total = 2 + 3;, puis choisissez JavaScript, le thème clair et 1x. Générez l’aperçu et téléchargez le PNG. L’image montre le code, pas le résultat 5 : le code n’est pas exécuté. Pour une image plus grande, passez à 2x et régénérez ; largeur et hauteur doublent.
Comment exporter un exemple JSON en SVG ?
Saisissez {"ok":true}, choisissez JSON et générez l’aperçu. Téléchargez le SVG pour une illustration redimensionnable ou le PNG pour conserver l’aspect rendu. Après modification du texte, régénérez : l’ancien aperçu est effacé. Il s’agit d’une image, pas d’un résultat de validation JSON.
Quelles sont les limites d'entrée ?
Jusqu'à 65 536 octets UTF-8 de code, au plus 200 lignes de 240 caractères maximum chacune, et un titre de fenêtre de 80 caractères ou moins. L'export lui-même est plafonné à 4 096 pixels par côté et 16 777 216 pixels au total ; tout dépassement est refusé avec un message précis.
Mon code est-il téléversé ou exécuté ?
Le code est traité uniquement dans cet onglet et n’est jamais exécuté ni téléversé. Shiki se charge à l’ouverture pour générer l’exemple ; après une modification, cliquez sur « Générer l’aperçu » pour le régénérer.
Quels langages et thèmes sont disponibles ?
Choisissez parmi 242 grammaires Shiki et 71 thèmes distincts. Chargez un exemple ou collez du code; la coloration ne l’exécute jamais.
Que change l'Échelle d'export ?
1x utilise les dimensions mesurées de l'image. 2x double la largeur et la hauteur, produisant quatre fois plus de pixels PNG ; cela n'ajoute ni détail de code ni modification du texte. Les deux échelles doivent respecter les limites d'export. Réduisez l'échelle si l'export est trop volumineux.
Dois-je télécharger le SVG ou le PNG ?
Le PNG conserve les pixels rendus ici. Le SVG reste redimensionnable ; sans police téléversée, il dépend des polices système, qui peuvent changer sur un autre appareil. Une police téléversée acceptée est intégrée en entier, mais le visualiseur de destination doit prendre en charge les polices intégrées. Utilisez le PNG quand la constance de l'apparence compte.
Pourquoi l'aperçu a-t-il disparu après que j'ai changé un réglage ?
Par conception : toute modification du code, du langage, du thème, du fond, de la marge intérieure, de la taille de police, du titre, des numéros de ligne ou de l'échelle invalide l'ancien aperçu au lieu d'afficher une image obsolète. Cliquez à nouveau sur Générer l'aperçu pour rendre le cadre mis à jour.
Quelles polices puis-je intégrer ?
TTF/OTF, jusqu'à 24 Mio. Choisissez une police que vous êtes autorisé à intégrer. Les polices à contours statiques avec intégration sans restriction sont prises en charge ; les polices variables ou couleur sont refusées. La police complète est incluse dans le SVG. Des glyphes manquants arrêtent la génération. Aucun fichier n'est téléversé. Sans police, le SVG utilise les polices système.
