Créez facilement de belles images de code source avec Carbon

Twitter et d'autres plateformes de médias sociaux sont d'excellents moyens de partager de petits extraits de code source utile. C’est bien d’embellir un peu ces échantillons avec de jolies couleurs ou une décoration fantaisie.

L'application Web Carbon vous permet de créer des images d'échantillons de code source. Il fournit plusieurs fonctionnalités, notamment la coloration syntaxique, diverses polices et thèmes. Il vous permet ensuite de copier votre image de code sur Medium, de la tweeter ou de l'enregistrer en tant que fichier image.

Les bases de l'utilisation du carbone

Le Page d'accueil Carbon affiche un exemple de code dans sa zone de texte principale. C'est déjà une démonstration utile du service. Il vous montre un aperçu précis du type d'image que vous pouvez créer.

Commencez par entrer un code. Vous pouvez copier et coller à partir d'un éditeur de texte ou le saisir directement. Notez que la zone de texte s'agrandit à la largeur de votre ligne la plus longue.

Comment personnaliser votre image de code source

Carbon crée une image de votre code source avec du texte coloré et mis en évidence par la syntaxe. Il présente votre code dans une fenêtre de base au-dessus d'une couleur ou d'une image d'arrière-plan.

Le paramètre de thème vous permet d'appliquer une palette de couleurs de texte à partir d'une plage prédéfinie. Beaucoup de ces thèmes sont couramment utilisés par les éditeurs de texte et autres logiciels existants.

Le paramètre de langue sera Auto par défaut, Carbon essaiera donc de deviner la langue. Mais il est préférable de sélectionner la langue spécifique via le menu déroulant. Certaines langues sont difficiles à détecter à partir du seul code source.

À un niveau inférieur, Carbon fournit divers paramètres de style pour peaufiner l'image de code finale. Ceux-ci sont tous disponibles dans le menu des paramètres avec l'icône d'engrenage:

Vous pouvez choisir parmi une gamme de 15 polices monospace différentes. Vous pouvez inclure des contrôles de fenêtre dans votre image et faire varier sa largeur ou le remplissage autour de sa fenêtre de code. Vous pouvez également modifier la hauteur de ligne, la taille de la police et inclure des numéros de ligne. Si vous utilisez souvent le service, vous pouvez enregistrer vos paramètres en tant que préréglage pour une utilisation future.

Intégration de Carbon avec GitHub Gists

Une fonctionnalité très utile vous permet de charger du code source à partir d'un GitHub Gist. Pour ce faire, ajoutez le Gist ID au domaine de Carbon pour obtenir une URL dans ce format:

https://carbon.now.sh/ea85abfb66e419ffd45564abd5bba3e7

Carbon importera ensuite le code source de ce Gist et vous serez alors libre de travailler avec lui comme si vous l'aviez tapé directement.

Comment exporter une image de code à partir de Carbon

Une fois que vous avez configuré votre exemple de code à votre guise, il est temps de l'utiliser. Vous avez deux options principales ici: le tweet ou l'enregistrer sous forme de fichier.

L’objectif principal de Carbon est d’améliorer les images de code publiées sur Twitter. Il présente donc le tweet comme sa première option d’exportation. En appuyant sur le Tweet Le bouton ouvre une boîte de dialogue de création de tweet dans une fenêtre contextuelle. Le tweet est pré-rempli avec une URL qui se convertit en une image téléchargée lorsque vous envoyez le tweet. Au-delà de cela, vous pouvez modifier le tweet comme bon vous semble.

Le téléchargement de l'image sous forme de fichier offre un peu plus de flexibilité. Vous pouvez l'exporter au format PNG ou SVG et mettre à l'échelle la taille pendant que vous le faites.

Carbon vous permet également de copier et coller l’image que vous avez créée. Il comprend une option qui vous permet d'intégrer le code dans un article Medium ou de télécharger l'image sur Imgur.

Les avantages du partage de code source dans une image

Le partage du code source sous forme d'image présente plusieurs avantages. Pour Twitter, en particulier, cela permet de contourner la longueur maximale du tweet. En théorie, vous pouvez créer des images contenant beaucoup plus de code que la limite de texte de Twitter ne le permet.

En rapport: Comment rédiger des tweets plus longs

La principale caractéristique de Carbon est la coloration syntaxique. Actuellement, vous ne pouvez pas mettre en évidence la syntaxe du texte brut sur Twitter ou de nombreux autres services.

Les images de code source sont également légèrement plus faciles à partager et à stocker que le texte de code source. Mais ils peuvent décourager la copie du code source, ce qui pourrait être une bonne chose. Vous pourriez craindre que les gens puissent copier votre code sans comprendre ce qu'il fait réellement.

Les inconvénients de l'incorporation de code source dans une image

Les images prennent beaucoup plus d'espace de stockage que le texte. Bien qu'il soit possible de extraire le texte des images, cela demande encore un effort supplémentaire.

Plus important encore, le texte des images est souvent inaccessible à ceux qui ne peuvent pas le voir. Les lecteurs d'écran, par exemple, peuvent ne pas être en mesure d'accéder à ce texte. Le bouton Tweet de Carbon fournit automatiquement un texte alternatif qui atténue ce problème.

Utiliser Carbon pour partager vos extraits de code

Carbon vous permet de créer facilement des images attrayantes d'extraits de code source. C'est une application Web simple qui se concentre sur une tâche spécifique avec juste assez de personnalisation.

Carbon convertit le texte de votre code source en images et cela peut ne pas toujours être approprié. Si vous souhaitez partager votre code sous forme de texte réel, il existe de nombreuses options pour le faire.

Les 4 meilleures alternatives de Pastebin pour partager du code et du texte

Ces alternatives Pastebin vous permettent de taper, coller et partager facilement des blocs de code ou de texte avec d'autres personnes en ligne.

A propos de l'auteur