Table des matières

, , ,

Créer un jeu de couleurs pour Gedit

Cette page indique comment créer un jeu de couleurs pour Gedit.

Lorsque vous écrivez un code source, vous avez plusieurs styles de texte : les variables, les types de fonction/variable… Gedit peut colorer ces styles de texte, pour le plus grand plaisir de nos yeux délicats. Un jeu de couleur prend la forme d'un fichier xml, attribuant des effets de texte à un style de texte déjà défini.

Un programme existe, badschemer, pour créer des jeux de couleurs de façon plus confortable. Il est aussi possible d'y aller à la main pour faire quelque chose de plus personnalisé, et c'est ce que nous allons voir. ;-)

Fichier de départ

Voici un exemple de contenu d'un jeu de couleurs vide : 

<?xml version="1.0" encoding="UTF-8"?>
<style-scheme id="exemple" _name="Exemple" version="1.0">

  <author>Auteur</author>
  <_description>Mettez une description du thème (ce qu'il évoque, l'origine d'un tel thème...).</_description>

  <!-- On place ici les différentes informations sur le style -->

</style-scheme>

Quelques explications sur les balises utilisées : 

<?xml version="1.0" encoding="UTF-8"?>

Cette ligne est la première ligne de quasiment tous les fichiers en xml. Elle indique qu'on utilise la version 1.0 du xml avec un encodage de caractères en utf-8. 

<style-scheme id="exemple" _name="Exemple" version="1.0">
<author>Auteur</author>
<_description>Mettez une description du jeu de couleurs (ce qu'il évoque, l'origine d'un tel thème...).</_description>
<!-- On place ici les différentes informations sur le style -->

Pour éviter de faire des fichiers deux fois plus lourds que nécessaire, n'en abusez pas non plus, sauf si vous débutez.

Toutes vos prochaines balises seront à placer entre </_description> et </style-scheme>.

Décorez vous-même les styles

Les balises couleur

Vous pouvez appliquer différents effets à du texte, notamment le colorer. Lorsque vous voulez afficher une couleur, vous pouvez seulement indiquer une valeur hexadécimale, par exemple : 

foreground="#FFFFFF"

Mais il faudra alors rentrer manuellement chacune des couleurs. Et si vous comptez appliquer la même couleur à plusieurs styles ? Et si vous voulez changer d'un coup la couleur de ces mêmes styles ? Une méthode plus rapide, et aussi plus claire, est de donner des noms à des couleurs.

Par convention on met ces indications de couleur tout de suite après la balise </_description>.

Voici un exemple de couleurs que vous pouvez définir : 

<color name="gris" value="#bbbbbb"/>
<color name="blanc" value="#eeeeee"/>
<color name="jaune" value="#fce94f"/>
<color name="kaki" value="#617200"/>

Ainsi vous définissez vos propres valeurs de gris, de blanc, et ainsi de suite. Si vous trouvez qu'une certaine valeur de jaune est mal appropriée par rapport aux autres couleurs, vous avez juste à la modifier :-) Ça tombe bien, Gedit possède un greffon pour sélectionner une couleur et l'insérer dans le document. :-D Voir la section des greffons de Gedit.

Si vous en utilisez, votre fichier de style ressemblera alors à ça : 

<?xml version="1.0" encoding="UTF-8"?>
<style-scheme id="base" _name="Base" version="1.0">

  <author>Vous</author>
  <_description>Ceci est un fichier de base pour faire son thème.</_description>
  
  <!-- Aidez-vous de ce tutoriel pour faire votre propre style : 
  https://doc.ubuntu-fr.org/creer_un_jeu_de_couleurs_pour_gedit
  -->
  
  <!-- Couleur : facultatif -->
  <color name="" value="">
  <!-- name : le nom de la couleur à utiliser, value : la valeur hexadécimale (exemple #003366) --></style-scheme>

Les balises de style

Voila le plus intéressant : les styles ! Certaines parties de votre code seront reconnues comme étant un style particulier. Comment ça peut se faire ? On ne le sait pas et on s'en moque : on veut juste formater ces bouts de texte. :-) Un style se définit comme tel : 

<style name="nomdustyle" parametre="valeur" autreparametre="autrevaleur"/>

Dans name on met le nom du style, et pour les paramètres on met les divers effets de texte à appliquer au style. Il existe beaucoup de styles, en fait on pourrait même en avoir à l'infini ! Pour ça on va d'abord regarder quels paramètres on peut appliquer aux styles, et nous pourrons ensuite les tester sur les styles.

Liste des paramètres

Voici la liste des paramètres disponibles :

Pour ces quatre paramètres, il faut donner une valeur booléenne : true pour afficher cet effet, false dans le cas contraire. Par définition, ces paramètres sont réglés sur false. Cependant, il se peut que deux styles se chevauchent, et qu'un texte s'affiche en gras alors que vous le voulez sans l'effet de gras quoi qu'il arrive. Dans ce cas-là, annoncez explicitement le paramètre en false.

Ces trois derniers paramètres demandent une couleur. Vous pouvez indiquer une valeur hexadécimale du genre : #000000 , ou bien un nom donné à une couleur (voir ci-dessus la balise couleur).

Liste des styles de base

Souvenez-vous de cette fameuse ligne : 

<style name="nomdustyle" parametre="valeur" autreparametre="autrevaleur"/>

Un style est défini au paramètre name. On sait quel(s) paramètre(s) mettre, maintenant c'est au tour des styles. Certaines options de Gedit ont besoin d'un style pour eux. La colonne affichant les numéros de ligne par exemple. Si vous ne l'avez pas activée, allez dans le menu Édition → Préférences → onglet Affichage. Cochez la case Afficher les numéros de ligne. Hop, une colonne apparait sur la gauche ! Et cette colonne, on peut la colorer différemment selon les envies. Ouvrez maintenant l'onglet Jeu de couleurs dans les Préférences, et faites varier les jeux de couleurs. Si cette colonne, disponible de base sous Gedit, a des jolies couleurs, c'est parce qu'elle a un style de base.

Voici la liste des styles de base :

Détail important : pour tester votre jeu de couleurs, il faut le (ré)importer dans Gedit. Allez dans Édition → Préférences → onglet Police et Couleurs, et faites Ajouter en choisissant votre petit fichier xml. Si le jeu de couleurs était déjà en marche dans Gedit, choisissez un autre style et revenez au style que vous élaborez.

Maintenant que vous savez ça, vous pouvez tester ces premiers styles de base pour vous mettre à l'aide avec tout ce que nous avons vu. Voici à quoi pourrait ressemble votre jeu de couleurs à ce stade : 

<?xml version="1.0" encoding="UTF-8"?>
<style-scheme id="base" _name="Base" version="1.0">

  <author>Zarmakuizz</author>
  <_description>Ceci est un fichier de base pour faire son thème.</_description>
  
  <!-- Aidez-vous de ce tutoriel pour faire votre propre style : 
  https://doc.ubuntu-fr.org/creer_un_jeu_de_couleurs_pour_gedit
  -->
  
  <!-- Couleur : facultatif -->
  <color name="" value="">
  <!-- name : le nom de la couleur à utiliser, value : la valeur hexadécimale (exemple #003366) -->
  
  <!-- Plusieurs styles sont listés, ajoutez après le name les paramètres que vous voulez, par exemple pour mettre en gras mettez : bold="true" -->
  <!-- Styles de base -->
  <style name="text"/>
  <style name="selection"/>
  <style name="selection-unfocused"/>
  <style name="current-line"/>
  <style name="line-numbers"/>
  <style name="cursor"/>
  <style name="bracket-match"/>
  <style name="search-match"/>
</style-scheme>

Sauf que vous, vous avez mis des paramètres j'espère. :-)

Bon, c'est bien beau mais Gedit est fait pour programmer. Il doit bien y avoir quelques styles secrets !

Les styles propres aux langages de programmation

Gedit est un éditeur de texte avant tout destiné à programmer, de ce fait il peut formater du code, et ça passe aussi par les styles. Les styles que vous allez utiliser ont été créés, nommés, détaillés dans des fichiers bien spéciaux appelés "définitions de langage". Ces fichiers sont localisés normalement dans le dossier : /usr/share/gtksourceview-2.0/language-specs/ , sinon entrez : 

find / -name def.lang

Ce dossier contient des définitions de langage pour de nombreux langages, vous devez sûrement voir dans le dossier de nombreux fichiers .lang. Tous ces langages font appel à des styles qui ont été définis dans le fichier def.lang de ce dossier, ce qui en fait le fichier le plus important d'entre tous les autres. Ensuite, chaque langage définit ses propres styles en indiquant à quelle partie du texte appliquer quel style de def.lang. Ce qui veut dire que vous pouvez définir des styles pour chacun des langages en y allant au cas-par-cas. Mais comme c'est long et lourd, il vaut mieux définir des styles par défaut, et indiquer des styles bonus après ça. Pour utiliser le style d'un langage, il faut indiquer son style et son fichier. Un style par défaut est défini comme ceci : 

<style name="def:style" parametre="valeur" autreparametre="autrevaleur"/>

Parce que les styles par défaut sont dans le fichier def.lang ;-) Mais si vous voulez définir un style pour le C uniquement, il faut d'abord voir quels styles sont définis dans le fichier c.lang : ouvrez-le et cherchez les lignes du genre : 

<styles>
        <style id="comment"           _name="Comment"             map-to="def:comment"/>
        <style id="printf"            _name="printf Conversion"   map-to="def:special-char"/>
        ...
</styles>

Les noms des styles sont dans le paramètre id: si vous voulez formater le style comment (voir plus bas), il vous faudra l'appeler ainsi : 

<style name="c:comment" parametre="valeur" autreparametre="autrevaleur"/>

Le paramètre _name indique un nom plus complet pour le style. Le paramètre map-to dit quel style appeler pour le formatage si aucun style n'a été précisé. Si vous ne précisez pas de style pour comment, on ira prendre le style comment par défaut. Autre information, l'organisation des styles pourrait changer lors du passage à la version 3 de Gedit. Ce qui n'est pas pour tout de suite ;-)

Bien, passons à ces styles par défaut. Vous trouverez ci-dessous tous les noms des styles, tous précédés du préfixe def: , comme ça ceux qui lisent la doc un peu vite peuvent tout de suite copier/coller les noms des styles ^_^ Certains styles, s'ils ne sont pas définis, adoptent les mêmes propriétés qu'un autre style. On peut former ainsi des "familles de styles" qui sont ici représentées par des décalages sur la droite. À titre d'exemple, si le style def:shebang n'est pas défini, comme on peut dire que def:shebang est le "style fils" de def:comment, alors le style def:shebang sera identique à def:comment. Si par contre def:comment n'est pas défini, n'ayant pas de "style parent" alors def:comment s'affichera comme du texte.

Les commentaires
Les constantes
Les identifiants
Les états
Les types
Les autres

Petit rappel de comment définir un de ces styles : 

<style name="def:comment" parametre="valeur" autreparametre="autrevaleur"/>

Votre fichier doit être plein de belles lignes : 

<?xml version="1.0" encoding="UTF-8"?>
<style-scheme id="base" _name="Base" version="1.0">

  <author>Zarmakuizz</author>
  <_description>Ceci est un fichier de base pour faire son thème.</_description>
  
  <!-- Aidez-vous de ce tutoriel pour faire votre propre style : 
  https://doc.ubuntu-fr.org/creer_un_jeu_de_couleurs_pour_gedit
  -->
  
  <!-- Couleur : facultatif -->
  <color name="" value="">
  <!-- name : le nom de la couleur à utiliser, value : la valeur hexadécimale (exemple #003366) -->
  
  <!-- Plusieurs styles sont listés, ajoutez après le name les paramètres que vous voulez, par exemple pour mettre en gras mettez : bold="true" -->
  <!-- Styles de base -->
  <style name="text"/>
  <style name="selection"/>
  <style name="selection-unfocused"/>
  <style name="current-line"/>
  <style name="line-numbers"/>
  <style name="cursor"/>
  <style name="bracket-match"/>
  <style name="search-match"/>

  <!-- Les commentaires -->
  <style name="def:comment"/>
  <style name="def:shebang"/>

  <!-- Les constantes -->
  <style name="def:special-char"/>
  <style name="def:constant" />
  <style name="def:character" />
  <style name="def:string"/>
  <style name="def:number" />
  <style name="def:special-constant"/>
  
  <!-- Les identifiants-->
  <style name="def:identifier"/> 
  <style name="def:function"/>
  <!-- Les états -->
  <style name="def:statement"/>

  <!-- Les types -->
  <style name="def:type"/> 

  <!-- Autres -->
  <style name="def:preprocessor"/>
  <style name="def:error"/>

</style-scheme>

Ici vous avez juste à mettre tous les paramètres que vous voulez. Je n'ai pas mis tous les styles possibles, c'est à vous de voir ce que vous voulez de coloré ;-)

Pour finir

Sur cette page on a vu comment formater le texte. En partie. Peut-être aimeriez-vous colorer certaines parties de texte qui n'ont pas encore de style ? Il faudra alors créer le style. Et pour créer le style, ça se fait directement dans les fichiers de définition de langage vus plus haut. Il n'y a pas encore de page française pour expliquer comment créer ou modifier des définitions de langage. Vous trouverez plus bas des liens vers une documentation et un tutoriel, en anglais.

Si vous cherchez des indications supplémentaires sur la coloration du texte ou si ce tuto vous semble flou, n'oubliez pas de contacter le(s) contributeur(s).

Créer un nouveau style

partie en cours de rédaction
introducion

Vous avez fait un nouveau langage ? Vous voulez faire vous même un fichier de style ? Nous allons voir ensemble comment faire ça en prenant comme exemple un fichier .lang de coloration syntaxique pour le langage bbcode (celui qu'on utilise dans les forums). Avant tout il faut voir un peu à quoi ressemble ce bbcode, sa syntaxe.

Voilà un petit aperçu de bbcode 

[code]
#une suite de commandes
commande a b c fichier
commande2 etc.
[/code]
[quote=ubuntu-fr] Hello world[/quote]

J'ai décidé les "conventions" suivantes:

Les mots clés des balises seront différents soit la liste suivante ([code][/code], [quote][/quote], [url][/url] etc).

Quand on peut rajouter une valeur, comme dans [quote=doc ubuntu], la valeur doit être colorié.

le bbcode n'a pas de caractère pour les commentaires, donc je choisi le #

Pour commencer il va falloir créer un fichier bbcode.lang . Vous devrez placer ce fichier dans le dossier /usr/share/gtksourceview-2.0/language-specs/

Pour voir s'il y a des erreurs, il suffit de lancer gedit en console et d'ouvrir un fichier .bbc (pour bbcode) (c'est l'extension que nous allons choisir et à chaque fois que vous ferez un fichier .bbc, gedit utilisera la coloration syntaxique que nous allons faire.
un minimum de code

La première ligne que tout document XML se doit d'avoir 

<?xml version="1.0" encoding="UTF-8"?>

Liens externes

Contributeurs : Zarmakuizz.