Aller au contenu

Code en image SVG

Convertissez un fragment de code en image avec coloration syntaxique, cadre de fenêtre et arrière-plan dégradé.

Entrée
14
48
Sortie

Code en image SVG

Collez un fragment de code, choisissez son langage de programmation et cet outil le rend sous forme d'image avec coloration syntaxique à l'intérieur d'une fenêtre arrondie — exactement le type de capture d'écran de code que vous souhaitez partager sur un blog, un tweet, une présentation ou une documentation interne. Les mots clés, les chaînes de caractères, les commentaires et les nombres sont automatiquement colorés, et la fenêtre reçoit une barre de titre optionnelle de style macOS avec des points colorés afin que le résultat ressemble à un véritable éditeur, pas à un simple vidage de texte.

Neuf langages de programmation sont pris en charge — JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash, SQL et texte brut — chacun avec ses propres règles de coloration pour les mots clés, les chaînes et les commentaires. Choisissez un thème de fond parmi six options de gradient (coucher de soleil, océan, minuit, forêt, raisin ou mono) et l'outil enveloppe la fenêtre dans une carte dégradée correspondante. Ajustez l'espacement autour de la fenêtre, activez l'ombre portée, définissez le titre de la fenêtre et activez ou désactivez indépendamment les numéros de ligne ou la barre de titre. La taille de la police met à l'échelle l'image entière, donc une ligne courte et une fonction de cinquante lignes restent lisibles.

Le résultat est un document SVG autonome et indépendant de la résolution : net à toute taille, facile à intégrer directement dans une page ou un outil de conception, et suffisamment petit pour être copié sous forme de texte. Le nombre de lignes, le nombre de caractères et la taille finale en pixels se mettent à jour sous la sortie pendant que vous tapez, de sorte que vous voyez exactement ce que vous êtes sur le point de copier ou de télécharger.

Tout se passe dans votre navigateur, via un petit moteur de coloration intégré — aucun code n'est envoyé, et aucun service externe ne voit ce que vous collez. L'outil reste donc sûr pour des fonctionnalités non publiées ou des outils internes que vous préférez ne pas envoyer ailleurs juste pour faire une capture d'écran.

FAQ

Quels langages de programmation ont la coloration syntaxique ?
JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash et SQL reçoivent tous la coloration des mots clés, des chaînes, des commentaires et des nombres. Choisissez « Texte brut » pour toute autre chose — il s'affiche sans codage par couleur.
Puis-je modifier le fond et l'apparence de la fenêtre ?
Oui. Choisissez l'un des six thèmes de gradient, ajustez l'espacement autour de la fenêtre, activez l'ombre portée et activez ou désactivez indépendamment la barre de titre avec les points colorés et les numéros de ligne.
Quel est le format de l'image et puis-je obtenir du PNG ?
La sortie est un SVG vectoriel — net à toute taille et facile à intégrer directement dans une page. Pour obtenir du PNG, ouvrez le fichier .svg téléchargé dans votre navigateur ou un éditeur d'images et exportez-le en PNG ; cet outil ne le rastérise pas automatiquement.
Y a-t-il une limite à la quantité de code que je peux coller ?
Aucune limite de ligne fixe, mais l'image générée est plafonnée à 10 MB. Les fragments extrêmement longs qui dépasseraient cette limite produisent un message vous demandant de raccourcir l'entrée.
Mon code est-il chargé quelque part ?
Non. La coloration syntaxique et le rendu d'images se font entièrement dans votre navigateur à l'aide d'un petit tokeniseur intégré — votre code ne quitte jamais votre appareil.