Aller au contenu
Toolars
Explorer
Signaler un bug

Développement · utilitaire Local

Code en image

Code to Image Converter

Exportez du code coloré par Shiki (six langages, thèmes clair et sombre) en SVG ou PNG, avec titre de fenêtre, numéros de ligne et échelle 1x ou 2x, en local.

Parcours de la tâche / de l'entrée au résultat

Collez votre code

S'exécute en local · Rien n'est téléversé

Fonctionnement de Code en image, confidentialité et outils associés

Parcours de la tâche / de l'entrée au résultat

Comment transformer du code en image partageable

  1. 01

    Collez votre code

    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.

  2. 02

    Choisissez le langage et le thème

    Choisissez JavaScript, TypeScript, HTML, CSS, JSON ou Bash sous Langage, puis réglez Thème sur Clair ou Sombre. Les couleurs de syntaxe proviennent de la grammaire Shiki correspondante et d'un thème de style GitHub, et Charger un exemple remplit le champ avec un court exemple dans le langage sélectionné pour comparer les rendus avant de coller le vôtre.

  3. 03

    Stylisez le cadre

    Définissez la Couleur de fond, la Marge intérieure de 16 à 96 px et la Taille de police de 12 à 28 px, puis ajoutez un Titre de fenêtre de 80 caractères maximum, basculez Afficher les numéros de ligne et choisissez une Échelle d'export de 1x ou 2x. La hauteur de ligne suit automatiquement la taille de police, donc un texte plus grand reste lisible sans réglage supplémentaire.

  4. 04

    Générez l'aperçu

    Générer charge l'analyseur local, mesure les passages de police réels et le titre de fenêtre, et affiche le même SVG échappé que celui utilisé pour l'export. Le code reste du texte inerte. Les modifications effacent l'ancien aperçu. Une sortie trop grande ou non mesurable est refusée ; les aperçus larges peuvent être parcourus au clavier.

  5. 05

    Téléchargez le SVG ou le PNG

    Utilisez Télécharger le SVG pour le fichier vectoriel redimensionnable, ou Télécharger le PNG pour un bitmap rendu via Canvas à l'échelle choisie. Les deux fichiers sont produits localement, et si la combinaison choisie dépassait la taille d'export sûre, l'espace de travail le dit au lieu d'écrire un fichier corrompu.

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 deux lignes de code

Collez deux lignes : const total = 2 + 3; et console.log(total); (40 octets UTF-8). Choisissez JavaScript, Sombre, fond #111827, marge 64 px, police 16 px, numéros de ligne activés, titre sum.js et 1×. Lors de l’essai local du 2026-09-24, la prévisualisation puis le téléchargement PNG ont produit toolars-code-image.png, 406 × 270 pixels et 12 784 octets. L’image affiche le code sans l’exécuter.

Comparer 1×, 2× et SVG

Gardez le code et les réglages, passez à 2×, regénérez et téléchargez le PNG. Le fichier du 2026-09-24 mesurait 812 × 540 pixels et 31 366 octets. À 1×, le SVG téléchargé toolars-code-image.svg faisait 1 647 octets avec un viewBox de 406 × 270. L’échelle change les pixels PNG, pas le code ; taille et dimensions peuvent varier selon les polices et navigateurs. Sans police intégrée, le rendu SVG peut différer.

Corriger une source vide

Videz Source du code puis lancez la prévisualisation. L’outil demande du code et désactive les deux téléchargements. Recollez les deux lignes et regénérez ; toute modification efface l’ancienne prévisualisation. Si l’export dépasse 4 096 pixels par côté, essayez 1× ou réduisez marge et police.

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é ?
Ni l'un ni l'autre. L'analyseur Shiki ne se charge dans cet onglet que lorsque vous cliquez sur Générer l'aperçu, l'aperçu est construit à partir de jetons de texte plutôt que de HTML injecté, et la source n'est jamais envoyée nulle part ni conservée après que vous avez vidé l'espace de travail.
Quels langages et thèmes sont disponibles ?
Six langages — JavaScript, TypeScript, HTML, CSS, JSON et Bash — chacun analysé avec sa propre grammaire Shiki. Les thèmes Clair et Sombre sont des palettes de style GitHub, et le contrôle Couleur de fond stylise le cadre autour de la carte indépendamment du thème choisi.
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.

Poursuivre la lecture

Continuer dans Développement

Des tâches associées, pas une impasse.

Passez à un autre espace de travail ciblé sans revenir à l'index complet.

Générateur de slugs URL

URL Slug Generator

Transformez titres et libellés en slugs URL : accents supprimés, & développée, séparateurs condensés, écritures non latines conservées — en direct, en local.

Créer

Ombres pour React Native

React Native Shadow Generator

Réglez ombres iOS et élévation Android face à un aperçu, comparez propriétés historiques et nouveau mode boxShadow, et copiez le fragment StyleSheet TypeScript.

Créer

Encodeur/décodeur Base64

Base64 Encoder/Decoder

Encodez du texte UTF-8 ou décodez du Base64 en direct, avec variante URL-safe, gestion des sauts de ligne et validation des erreurs, sans rien téléverser.

Convertir

Encodeur/décodeur HTML

HTML Encoder/Decoder

Échappez les cinq caractères qui cassent le balisage (&, <, >, guillemets) ou résolvez entités nommées et numériques via l'analyseur du navigateur, en local.

Convertir