Générateur d'écran de code

Le soulignement de syntaxe consiste à colorer le code source afin de distinguer visuellement les mots-clés, les chaînes, les identificateurs, les commentaires et d'autres tokens. Le compilateur n'a pas besoin de couleur, mais les recherches sur la compréhension du code montrent que le code souligné est plus facile et plus rapide à scanner que du texte monospace. Dans une capture d'écran — où le lecteur ne peut pas cliquer, développer ou exécuter le code — le soulignement devient l'indice principal de sens, ce qui explique pourquoi les thèmes conçus par des typographes et des auteurs d'IDE ont une apparence nettement plus professionnelle que des fragments non colorés.

Une image raster stocke un réseau fixe de pixels, donc lorsqu'elle est redimensionnée au-delà de sa résolution native, elle devient floue ou présente des traits irréguliers. Un format vectoriel stocke des formes mathématiquement, et il peut être agrandit sans perte de qualité. Les captures de code sont généralement exportées au format PNG car la plupart des plateformes sociales, des outils de présentation et des applications de chat affichent le PNG de manière fiable et conservent l'apparence exacte du rendu — y compris les polices, l'anti-aliasing, les gradients et les ombres. L'SVG peut être agrandi à l'infini, mais dépend du lecteur d'avoir accès aux mêmes polices et moteurs de rendu, ce qui rend son utilisation moins prévisible lors du partage.

Le chrome de fenêtre (la barre de titre avec des lumières de trafic ou des boutons de fermer, minimiser ou maximiser) donne à l'œil un cadre familier et indique que le contenu est une véritable partie d'une application, et non un texte arbitraire. C'est un principe de Gestalt en action : l'encadrement regroupe les éléments et les sépare du fond. Carbon, l'outil qui a popularisé ce style, a délibérément emprunté le chrome macOS parce que les concepteurs et développeurs sur les réseaux sociaux le reconnaissent immédiatement, ce qui donne à la capture l'air poli sans qu'il soit nécessaire de faire de l'effort visuel supplémentaire.

Un gradient linéaire CSS est une transition de couleur fluide le long d'une ligne, définie par un angle et une liste de points de couleur (par exemple, 135 degrés de l'indigo au violet). Les gradients sont populaires comme fonds pour les captures de code car une couleur unique peut s'opposer au thème de syntaxe à l'intérieur de la fenêtre, tandis qu'un gradient ajoute de la profondeur et du chaud sans se battre pour l'attention. Associer un gradient saturé au fond avec un code plus sombre met en valeur le contenu interne — un principe que les photographes utilisent lorsqu'ils placent un sujet contre un fond légèrement flou.

Les navigateurs n'ont pas de fonctionnalité native pour « capturer ce nœud DOM », donc des bibliothèques comme html-to-image contournent cette limitation en sérialisant l'élément cible et ses styles CSS calculés en un SVG avec un foreignObject, puis en dessinant ce SVG dans un canvas HTML, et enfin en exportant le canvas sous forme de PNG. Cette technique est rapide et se déroule entièrement côté client, mais présente des contraintes connues : les images externes doivent être accessibles via CORS, les polices intégrées doivent être chargées avant la capture, et certains pseudo-éléments peuvent ne pas toujours être rendus. Ajuster le ratio en pixels (souvent 2x) produit une image plus nette, adaptée aux écrans retina et à l'impression.