Puisque nous utilisons tous Brackets pour écrire notre code, voici un billet pour en améliorer l’usage en l’augmentant de quelques extensions supplémentaires. Commençons par les thèmes qui agrémentent la colloration syntaxique de nos codes HTML et CSS.
Mise à jour
Brackets étant un logiciel jeune, open source et en développement constant, il est important de le mettre régulièrement à jour. C’est moins crucial aujourd’hui que le logiciel a une base stable, mais, parfois, quand on a une fonctionnalité qui ne marche pas très bien, une mise à jour peut résoudre le problème. Vous pouvez toujours trouver la version la plus récente sur le site de Brackets en cliquant sur le gros bouton bleu de téléchargement.3 Les Macs de la fac seront mis à jour au fur et à mesure, signalez-moi en cours si une version est trop ancienne. On fait normalement une mise à jour complète deux fois par an.
Pourquoi choisir un thème ?
Les thèmes par défaut de Brackets sont corrects, mais on a remarqué en cours qu’ils n’étaient pas des plus précis pour le CSS. Un thème explicite, c’est un thème qui permet d’une part de distinguer visuellement, dans la CSS :
- les appels de balise HTML
- les classes,
- les ID,
et qui permet de réduire une déclaration CSS d’autre part.
Voici par exemple la différence entre trois thèmes sombres, du moins (le thème par défaut) au plus détaillé.
Les deux derniers distinguent très bien les classes des ID, alors que le thème dark ne les distinguent pas visuellement (le code les distinguent toujours dans les trois cas, .xxx désignant une classe, #xxx désignant un ID).
My favorite theme4 : Monokai
Personnellement, j’utilise par défaut le thème Monokai, qui a été popularisé comme thème par défaut de SublimeText (la rolls des éditeurs, mais pas forcément facile à conduire). Monokai a été décliné de nombreuses manières, au point qu’il y a maintenant plusieurs dizaines de thèmes Monokai dérivés de l’original. Le plus complet d’entre eux, à ma connaissance, pour ce qui concerne l’affichage du CSS, est Monokai Darkness Reborn, qui différencie les classes des ID dans la CSS, tout en conservant les couleurs du Monokai classique en HTML (celles dont je me suis inspiré dans mes diaporamas).
Il est aussi possible d’utiliser les thèmes d’interface connues: par exemple, le thème inspiré de Codecademy.
Installer un thème dans Brackets
Il existe trois façons d’installer une extension dans Brackets, qu’il s’agisse d’un thème ou d’autre chose. La première consiste à utiliser l’installeur intégré à Brackets et à chercher dans les modules déjà listés.
Installer un thème déjà listé
Pour installer un thème dans Brackets,5 rien de plus simple :
- ouvrir Brackets,
- cliquer sur Fichier dans la barre de menu, et choisissez l’élément Gestionnaire d’extensions,
- dans la fenêtre du gestionnaire, cliquez sur Thèmes, puis entrez le nom du thème que vous voulez installer,
- quand le thème s’affiche, cliquez sur le bouton installer du thème.
Et voilà ! Le nouveau thème est maintenant disponible, il ne reste plus qu’à l’activer :
- fermez le gestionnaire d’extension,
- cliquez sur Affichage dans la barre de menu, puis sur Thèmes…,
- cliquez dans thème actuel et faites votre choix.
Installer un thème trouvé ailleurs
Il y a un choix pléthorique de thèmes pour les éditeurs de code; vous pouvez peut-être avoir envie d’en choisir un autre ? Ou bien, le thème que vous avez choisi n’apparaît pas dans le choix proposé par Brackets ?
Qu’à cela ne tienne, vous pouvez aller chercher vous-même des thèmes pour Brackets sur le web… et plus particulièrement sur GitHub, LA plateforme actuelle de dépôt et d’échange de code libre entre développeurs (avant elle, il y a eu SourceForge.net, qui a maintenant décru en popularité): c’est sur GitHub que l’on peut télécharger Brackets, et c’est aussi sur GitHub que l’on peut télécharger tous les add-ons (les éléments supplémentaires) à Brackets.
GitHub fonctionne simplement, pour l’utilisateur lambda. Vous cherchez quelque chose ? Sur la page d’accueil de GitHub, il y a un moteur de recherche : taper votre requête et lancez-là, si elle correspond à une source déposée sur GitHub, le moteur va la trouver.
Par exemple,
- je cherche mon thème Monokai Darkness Reborn; je rentre dans le champ de recherche : “Brackets theme monokai darkness reborn”, et j’envoie ;
- le résultat de ma recherche me donne un lien, anandisrocking007/Monokai-Darkness-Reborn (anandisrocking007, c’est le pseudo du dépositaire);
- une fois cliqué le lien, je me retrouve sur la page du thème, et je n’ai plus qu’à cliquer sur le bouton
Clone or Downloadde la page, puis choisirDownload ZIP(toute autre action est réservée aux développeurs inscrits sur GitHub, et de toute façon beaucoup plus compliquée); - le fichier ZIP une fois téléchargé, il faut surtout ne pas l’ouvrir. Il faut retourner au gestionnaire d’extension de Brackets, et glisser le fichier zip dans la fenêtre du gestionnaire et valider.
C’est long à expliquer, mais facile à faire. Vous pouvez installer un thème supplémentaire en moins d’une minute.
Installer un thème à partir de son URL
Cette troisième manière est un raccourci par rapport à la seconde.
Vous avez trouvé votre thème sur GitHub, puis vous avez ouvert Brackets et le gestionnaire d’extensions :
- sur la page GitHub de votre thème, repérez le lien de téléchargement du thème (il est en général indiqué juste avant ou juste après les copies d’écran du thème);
- copiez cette adresse, et dans le gestionnaire d’extension, cliquez sur le lien en bleu Installer à partir de l’URl;
- coller l’URL que vous venez de copier et valider.
Et voilà, votre thème est installé, vous n’avez plus qu’à aller l’activer comme décrit plus haut.
Mode je suis une tête brûlée
Pour celles·ceux qui voudraient vraiment pousser le bouchon le plus loin, pourquoi pas créer votre thème vous même ?
Tout est permis, et sur le web, il y a toujours une webapp pour tout. Voici donc une application en ligne pour créer son propre thème (en partant de zéro ou en déclinant un thème existant).
Mais c’est à vos risques et périls (vous êtes une tête brûlée, ou bien ?).
- Ok, c’est un jeu de mots à tiroir, les amateurs de cyclisme comprendront.
- Les amateurs de Serge Gainsbourg et Jane Birkin comprendront !
- Bizarrement, le bouton ne produit rien sur Firefox/Mac au moment où j’écris ces lignes (mais ça marche pour Safari, allez comprendre !). Si jamais le bouton ne déclenche pas de téléchargement chez vous, allez sur ce lien qui vous amène directement à la page de téléchargement des différentes versions de Brackets. Sur Mac vous devrez choisir le lien finissant par
.dmg, sur PC, l’un des deux liens finissant par.deb(il vous faut savoir si votre version de Windows est en 32 bits ou en 64 bits, et choisir la bonne version de Brackets). - Encore une référence à tiroir, les amateurs de John Coltrane comprendront !
- Pour obtenir le thème Monokai Darkness Reborn, il faut installer le thème Monokai Dark Soda, qui est en fait un package de thèmes dérivés de Monokai.
