Aller au contenu
TitiLaPierre

Sublime Text 3: Créer sa propre coloration syntaxique

Messages recommandés

Tutoriel.thumb.png.e63836327061ec3f8d2d45471a9c0f6c.png

❑     Pourquoi créer sa propre coloration syntaxique ?

  • Créer sa propre coloration syntaxique rend votre code plus lisible.
  • Cela facilite donc sa compréhension (Pour vous et pour les autres).
  • Cela permet de différencier différentes parties de votre code (Textes, chiffres, conditions...),
  • et pour finir, c'est je pense bien plus jolie qu'un code seulement en blanc.

 

❑     Sommaire

  1. Introduction
  2. Préparation
  3. Paramétrage thème/syntaxe
  4. Thème: Créer une règle
  5. Syntaxe: Basique
  6. Syntaxe: Complexe
  7. Fin

 

❑     1 - Introduction

C'est mon premier tutoriel donc soyez indulgents si des explications manquent.

Conseillez-moi en répondant a ce sujet !

 

Quelques pré-requis pour suivre ce tutoriel:

  • Sublime Text 3 (Sans blagues) - (

    Contenu masqué

      Réagissez ou répondez à ce message afin de consulter le contenu masqué.
    )
  • Une connaissance de base des syntaxes de JSON
  • Une connaissance de base des syntaxes du YML/YAML
  • Une connaissance des Regex

Liens pratiques:

  • Générateur de couleurs (

    Contenu masqué

      Réagissez ou répondez à ce message afin de consulter le contenu masqué.
    )
  • Test de Regex (

    Contenu masqué

      Réagissez ou répondez à ce message afin de consulter le contenu masqué.
    )

De quoi sera constitué notre coloration syntaxique ?

  • Un Thème, constitué de règles qui appliqueront des propriétés (Couleurs du texte, de l'arrière plan) à des identifiants (Voir ci-dessous)
  • Une Syntaxe, permet l'envoie d'identifiant pour coloré le texte (Utilise des Regexs)

En JSON, quelque soit son type, la valeur d'une propriété devra être mit en chaîne de caractère (Exemple: "valeur", "5", "#eeeeee"...).

 

❑     2 - Préparation

Pour commencer, nous allons créer nos fichiers nécessaires.

  • Sur Windows [%appdata%.\Sublime Text 3\Packages] (Si vous utilisez un répertoire personnalisé, accéder à ce répertoire)
  • Sur MacOS [~/Library/Application Support/Sublime Text 3/Packages]
  • Sur Linux [~/.config/sublime-text-3/Packages]

 

  • Créez-y un dossier nommé [User] et accédez-y.
  • Vous choisirez un nom pour votre thème (Remplacez tout les [<nom>] dans ce tutoriel par le votre)
  • Créez-y un fichier nommé [<nom>.sublime-color-scheme] (Le thème)
  • Créez-y un fichier nommé [<nom>.sublime-syntax] (La syntaxe)
  • Ouvrez ces deux fichiers

 

❑     3 - Paramétrage thème/syntaxe

Commençons par le thème ! (<nom>.sublime-color-scheme)

Utilisation de:

  • JSON

Contenu masqué

    Réagissez ou répondez à ce message afin de consulter le contenu masqué.

 

Liste des propriétés (

Contenu masqué

    Réagissez ou répondez à ce message afin de consulter le contenu masqué.
)

Liste des propriétés traduites : (Incomplet)

Révélation

Liste des propriétés:

Contenu masqué

    Réagissez ou répondez à ce message afin de consulter le contenu masqué.

 

La configuration du thème est maintenant terminé !

Configurons la syntaxe ! (<nom>.sublime-syntax).

Utilisation de:

  • YAML

Contenu masqué

    Réagissez ou répondez à ce message afin de consulter le contenu masqué.

La configuration du thème est maintenant terminé !

Pour activer le thème, il vous suffit d'aller dans [Preferences > Color Sheme... > <nom>]

Pour utiliser la syntaxe, il vous suffit d'ouvrir un fichier avec une des extensions indiquées dans file_extensions

 

❑     4 - Thème: Créer une règle

Créons maintenant notre première règle de notre thème (<nom>.sublime-color-scheme)

Contenu masqué

    Réagissez ou répondez à ce message afin de consulter le contenu masqué.

Liste des propriétés traduites: (Incomplet)

Contenu masqué

    Réagissez ou répondez à ce message afin de consulter le contenu masqué.

 

❑     5 - Syntaxe: Basique

Pour créer une syntaxe, suivez le modèle ci-dessous:

Contenu masqué

    Réagissez ou répondez à ce message afin de consulter le contenu masqué.

 

 

❑     6 - Syntaxe: Complexe

Vous vous posez peut-être la question de comment faire pour faire des sortes de "balises de texte". Voici la réponse:

Contenu masqué

    Réagissez ou répondez à ce message afin de consulter le contenu masqué.

Plus d'informations sur les syntaxes sur le 

Contenu masqué

    Réagissez ou répondez à ce message afin de consulter le contenu masqué.
.

 

❑     7 - Conclusion

 

Vous pouvez trouver l'exemple que j'ai réalisé: (En développement)

  • Si vous avez des suggestions pour améliorer ce tutoriel, faites m'en part !
  • N'hésitez pas à partagez vos créations !

Citations: 

Contenu masqué

    Réagissez ou répondez à ce message afin de consulter le contenu masqué.

Contenu masqué

    Réagissez ou répondez à ce message afin de consulter le contenu masqué.

Contenu masqué

    Réagissez ou répondez à ce message afin de consulter le contenu masqué.
.

Si vous avez besoin d'aide suite à ce tutoriel, créer un nouveau sujet et mentionner ce tutoriel.

  • J'aime 3

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×
×
  • Créer...

Information importante

Nous avons placé des cookies sur votre appareil pour aider à améliorer ce site. Vous pouvez choisir d’ajuster vos paramètres de cookie, sinon nous supposerons que vous êtes d’accord pour continuer.