Classement

❑ 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 Introduction Préparation Paramétrage thème/syntaxe Thème: Créer une règle Syntaxe: Basique Syntaxe: Complexe 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) - (Télécharger) 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 (Accéder) Test de Regex (Accéder) 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 // Ceci est un commentaire, retirez les commentaires avant de commencer { "name": "<nom>", // Donnons lui un nom "globals": { "parametre_1": "valeur_1", // Voici le format à respecter "parametre_2": "valeur_2", // Vous trouverez la liste des propriétés plus bas dans le tutoriel :) "background": "#14151F", // Exemple d'utilisation (Hexadecimal) "foreground": "white", // Exemple d'utilisation (Nom de la couleur) "selection": "rgb(187, 188, 199)" // Exemple d'utilisation (RGB) }, } Liste des propriétés (Page Officiel) Liste des propriétés traduites : (Incomplet) La configuration du thème est maintenant terminé ! Configurons la syntaxe ! (<nom>.sublime-syntax). Utilisation de: YAML # Ceci est un commentaire, retirez-les avant de faire le tuto # Laissez tout ce qui est ici (Sauf les commentaires), c'est important ! %YAML 1.2 --- name: Skript # Mettez le nom du language de programmation (Donc Skript) file_extensions: - sk # Listez les extensions scope: default.text # Identifiant par défault du code 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) { "name": "<nom>", "globals": { // Configuration }, "rules": // C'est ici que c'est important [ { "name": "THE_NAME_I_WANT", // Mettez le nom de votre choix "scope": "id", // Mettez un identifiant UNIQUE (exemple: skript.number, skript.green...) // Propriétés (Liste en dessous) }, { // Exemple 1 "name": "True", "scope": "boolean.true", "foreground": "#3EE709", "font_style": "bold" }, { // Exemple 2 "name": "Effects", "scope": "skript.effects", "foreground": "darkblue" } ] } Liste des propriétés traduites: (Incomplet) foreground - Couleur - Couleur du texte background - Couleur - Couleur de l'arrière plan foreground_adjust - ??? A rechercher ??? selection_foreground - ??? A rechercher ??? font_style - Style - bold et/ou italic (Si vous souhaitez mettre les deux, indiquez "bold italic") ❑ 5 - Syntaxe: Basique Pour créer une syntaxe, suivez le modèle ci-dessous: %YAML 1.2 --- name: Skript file_extensions: - sk scope: default.text contexts: main: - match: "REGEX" # Regex scope: "IDENTIFIANT" # Identifiant (Relié à celui du thème) - match: "REGEX_2" # Regex scope: "IDENTIFIANT_2" # Identifiant (Relié à celui du thème) # Exemples - match: "true" scope: "boolean.true" - match: "([0-9]*)" scope: "skript.numbers" ❑ 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: %YAML 1.2 --- name: Skript file_extensions: - sk scope: default.text contexts: main: - match: "\"" push: # Cela s'apparente à une boucle infini (Ou presque) - meta_scope: "text" # Identifiant - match: "\"" # Si le caractère est " pop: true # Sortir de la boucle - match: "test" # Attention: Ce qui est en dehors de la boucle ne pourra pas être "match" si celle si est toujours active. Vous pouvez donc les mettre dans cette boucle scope: "id.test" # Si un résultat est "test" utiliser l'identifiant "id.test" sur "test" Plus d'informations sur les syntaxes sur le site officiel. ❑ 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: https://sublimetext.com/, https://htmlcolorcodes.com/fr/, https://regex101.com/. Si vous avez besoin d'aide suite à ce tutoriel, créer un nouveau sujet et mentionner ce tutoriel.