Lorsque vous devez présenter du code sur une slide, dans un document ou encore sur les réseaux sociaux, faire une simple capture d'écran depuis votre IDE est une mauvaise idée :

  • Pour les supports papier ou vidéo-projetés, le thème sombre devient illisible (et consomme beaucoup d'encre pour le papier)
  • Votre morceau de code n'est souvent pas suffisamment isolé du reste
  • Cela donne une simple image carré, fade, parfois de mauvaise qualité

La bonne nouvelle est que j'ai une solution parfaite vous permet de :

  • Capturer seulement le bout de code qui vous intéresse
  • Garder la coloration syntaxique (peu importe le langage)
  • Avoir un fond clair sans changer les paramètres de l'IDE
  • Choisir la police d'écriture
  • De détacher son code du reste de la page (ou de la slide)

Mais je sais que ce qui vous intéresse c'est le résultat, alors voilà un exemple de rendu :

Ça c'est agréable à lire dans une slide ou dans un document papier, et croyez-moi pour votre audience, cela fait une réelle différence !

Carbon.now.sh

C'est une application web, très pratique et très complète faite spécialement pour les développeurs qui prennent soin de leurs présentations et qui aiment mettre en valeur leur code !

C'est gratuit et disponible à l'adresse : https://carbon.now.sh

Carbon
Carbon is the easiest way to create and share beautiful images of your source code.
Je vous en supplie, abusez-en. C'est l'un des meilleurs outils de présentation que j'ai trouvé depuis bien longtemps, très paramétrable et pourtant hyper simple à utiliser !

Voici quelques exemples de rendus différents possibles avec Carbon (et oui, lorsque vous partagez du code en ligne, rien ne vous empêche d'utiliser des thèmes sombres) !

Un thème classique
Un thème vintage

Ray.so

Ray est une alternative moins paramétrable que Carbon, mais par contre beaucoup plus rapide et intuitive pour la prise en main. Je vous laisse faire votre choix, honnêtement les deux outils sont super !

C'est aussi gratuit et disponible à l'adresse : https://ray.so

Instacode

Cet outil est vraiment différent des deux autres présentés précédemment. Ici la lisibilité n'est pas l'objectif premier, mais l'idée est plutôt de pouvoir faire de la création graphique à partir d'un morceau de code.

Que ce soit pour poster sur Instagram, ou utiliser cette création pour illustrer l'arrière plan d'une slide, Instacode propose d'ajouter une rotation en 3D au code, de lui appliquer plusieurs filtres (flou, pixelisation, etc...).

Il est possible de sortir un format carré, ou au format "wallpaper", c'est à dire en plus haute résolution !

C'est gratuit et disponible à l'adresse : http://instaco.de/

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

Les articles les plus populaires du blog

Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !

Voir la sélection 🚀

Recevez les articles de la semaine par e-mail pour ne rien manquer !

S'abonner à la newsletter 📧

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !


Photo par XPS sur Unsplash