Je souhaite modifier / ajouter une coloration syntaxique pour une langue dans Sublime 2/3.

Par exemple, je veux que le mot-clé soit thiscoloré en JavaScript.

Comment puis je faire ça?

Je sais qu'il existe un fichier de préférence JavaScript dans C:\Program Files\Sublime Text 3\Packages, mais je ne sais pas quoi changer ou si je dois créer un nouveau fichier de préférence JavaScript quelque part dans ce dossier %APPDATA%\Sublime Text 3.

La mise en évidence de la syntaxe est contrôlée par le thème que vous utilisez, accessible via Preferences -> Color Scheme. Les thèmes mettent en évidence différents mots-clés, fonctions, variables, etc. grâce à l'utilisation de portées, qui sont définies par une série d'expressions régulières contenues dans un .tmLanguagefichier dans le répertoire / package d'une langue. Par exemple, le JavaScript.tmLanguagefichier affecte les portées source.jset variable.language.jsle thismot - clé. Puisque Sublime Text 3 utilise le .sublime-packageformat de fichier zip pour stocker tous les paramètres par défaut, il n'est pas très simple de modifier les fichiers individuels.

Malheureusement, tous les thèmes ne contiennent pas toutes les portées, vous devrez donc jouer avec différentes pour en trouver une qui vous convient et vous donne la mise en évidence que vous recherchez. Il existe un certain nombre de thèmes inclus dans Sublime Text, et beaucoup d'autres sont disponibles via Package Control , que je recommande fortement d' installer si vous ne l'avez pas déjà fait. Assurez-vous de suivre les instructions ST3 .

En l'occurrence, j'ai développé le Neon Color Scheme, disponible via Package Control, que vous voudrez peut-être jeter un coup d'œil. Mon objectif principal, en plus d'essayer de rendre un large éventail de langues aussi beau que possible, était d'identifier autant de portées différentes que possible - beaucoup plus que celles incluses dans les thèmes standard. Bien que la définition du langage JavaScript ne soit pas aussi complète que celle de Python, par exemple, Neonelle présente encore beaucoup plus de diversité que certains des paramètres par défaut comme Monokaiou Solarized.

Je dois noter que j'ai utilisé la Better JavaScriptdéfinition de langage de @ int3h pour cette image au lieu de celle fournie avec Sublime. Il peut être installé via Package Control.

METTRE À JOUR

Dernièrement, j'ai découvert une autre définition de langage de remplacement JavaScript - JavaScriptNext - ES6 Syntax. Il a plus de portées que le JavaScript de base ou même le meilleur JavaScript. Cela ressemble à ceci sur le même code:

De plus, depuis que j'ai initialement écrit cette réponse, @skuroda a publié PackageResourceViewervia Package Control. Il vous permet de visualiser, de modifier et / ou d'extraire de manière transparente des parties ou des .sublime-packagepackages entiers . Ainsi, si vous le souhaitez, vous pouvez modifier directement les jeux de couleurs inclus avec Sublime.

UNE AUTRE MISE À JOUR

Avec la sortie de presque tous les packages par défaut sur Github , les changements sont venus rapidement et avec fureur. L'ancienne syntaxe JS a été complètement réécrite pour inclure les meilleures parties de la syntaxe JavaScript Next ES6, et est maintenant aussi entièrement compatible avec ES6 que possible. Une tonne d'autres changements ont été apportés pour couvrir les boîtiers d'angle et de bord, améliorer la cohérence et, dans l'ensemble, l'améliorer. La nouvelle syntaxe a été incluse dans la dernière version de développement 3111 (pour le moment) .

Si vous souhaitez utiliser l'une des nouvelles syntaxes avec la version bêta actuelle 3103, clonez simplement le dépôt Github quelque part et liez la JavaScript(ou les langues de votre choix) dans votrePackages votre choix répertoire - trouvez-le sur votre système en sélectionnant Preferences -> Browse Packages.... Ensuite, faites simplement un git pulldans le répertoire de dépôt d'origine de temps en temps pour actualiser les modifications, et vous pourrez profiter des dernières et meilleures! Je dois noter que le dépôt utilise le nouveau .sublime-syntaxformat au lieu de l'ancien .tmLanguage, donc ils ne fonctionneront pas avec les versions ST3 antérieures à 3084, ou avec ST2 (dans les deux cas, vous devriez avoir mis à niveau vers la dernière version bêta ou dev de toute façon).

Je peaufine actuellement mon schéma de couleurs néon pour gérer toutes les nouvelles portées de la nouvelle syntaxe JS, mais la plupart devraient déjà être couvertes.

J'ai finalement trouvé un moyen de personnaliser les thèmes donnés.

Accédez à C:\Program Files\Sublime Text 3\Packageset copiez + renommez Color Scheme - Default.sublime-packagevers Color Scheme - Default.zip. Ensuite, décompressez-le et copiez le thème que vous souhaitez changer %APPDATA%\Sublime Text 3\Packages\User. (Dans mon cas, All Hallow's Eve.tmTheme).

Ensuite, vous pouvez l'ouvrir avec n'importe quel éditeur de texte et modifier / ajouter quelque chose, par exemple pour changer thisen JavaScript:

<dict>
    <key>name</key>
    <string>Lang Variable</string>
    <key>scope</key>
    <string>variable.language</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FF0000</string>
    </dict>
</dict>

Cela marquera thisen rouge les fichiers JavaScript. Vous pouvez sélectionner votre thème sous Preferences -> Color Scheme -> User -> <Your Name>.

Utilisez le plugin PackageResourceViewer installé via Package Control (comme mentionné par MattDMo ). Cela vous permet de remplacer les ressources compressées en l'ouvrant simplement dans Sublime Text et en enregistrant le fichier. Il enregistre automatiquement uniquement les ressources modifiées dans% APPDATA% / Roaming / Sublime Text 3 / Packages / ou ~ / .config / sublime-text-3 / Packages /.

Spécifique à l'opération, une fois le plugin installé, exécutez la PackageResourceViewer: Open Resourcecommande. Puis sélectionnez JavaScriptsuivi deJavaScript.tmLanguage . Cela ouvrira un fichier xml dans l'éditeur. Vous pouvez modifier n'importe laquelle des définitions de langue et enregistrer le fichier. Cela écrira une copie de remplacement du fichier JavaScript.tmLanguage dans le répertoire utilisateur.

La même méthode peut être utilisée pour modifier la définition de langue de n'importe quelle langue du système.

Le "ceci" est déjà coloré en Javascript.

Affichage-> Syntaxe-> et choisissez votre langue à mettre en évidence.

Ceci est ma recette

Remarque: ce n'est pas exactement ce que demande OP. Ces instructions vous aideront à changer les couleurs des éléments (commentaires, mots-clés, etc.) qui sont des règles de correspondance de syntaxe définies. Par exemple, utilisez ces instructions pour modifier afin que tous les commentaires de code soient colorés en bleu au lieu de vert.

Je crois que l'OP demande comment définir thiscomme élément à colorier lorsqu'il se trouve dans un fichier source JavaScript.

1. Installer le package: PackageResourceViewer

2. Ctrl+Shift+P> [ PackageResourceViewer: Open Resource]> [ Color Scheme - Default]> [ Marina.sublime-color-scheme] (ou selon la palette de couleurs que vous utilisez)

3. La commande ci-dessus ouvrira un nouvel onglet dans le fichier " Marina.sublime-color-scheme".

   • Pour moi, ce fichier se trouvait dans mon profil itinérant %appdata%( C:\Users\walter\AppData\Roaming\Sublime Text 3\Packages\Color Scheme - Default\).
   • Cependant, si je navigue vers ce chemin dans l' Explorateur Windows , [ Color Scheme - Default] n'est pas un répertoire enfant de [ Packages] dir. Je soupçonne que cela PackageResourceViewerfait de la virtualisation.

étape facultative: dans le nouvel onglet de jeu de couleurs: Ctrl+Shift+P> [ Set Syntax: JSON]

4. Recherchez la règle que vous souhaitez modifier. Je voulais que les commentaires soient visibles, j'ai donc recherché " Comment"

   • Je l'ai trouvé dans la "rules"section

 "rules":
    [
        {
            "name": "Comment",
            "scope": "comment, punctuation.definition.comment",
            "foreground": "var(blue6)"
        },

5. Recherchez la chaîne "blue6":pour trouver la section des définitions de variable de couleur. Je l'ai trouvé dans la "variables"section.

6. Choisissez une nouvelle couleur à l'aide d'un outil comme http://hslpicker.com/ .

7. Définissez une nouvelle variable de couleur ou remplacez le paramètre de couleur pour blue6.

   • Attention: l' écrasement blue6affectera tous les autres éléments de texte de ce jeu de couleurs qui utilisent également blue6 ("Punctuation" "Accessor").

8. Enregistrez votre fichier, les modifications seront appliquées instantanément à tous les fichiers / onglets ouverts.

REMARQUES

Sublime gérera n'importe lequel de ces styles de couleurs. Peut-être plus.

hsla = teinte, saturation, légèreté, alpha rgba = rouge, vert, bleu, alpha

hsla (151, 100%, 41%, 1) - le dernier paramètre est le niveau alpha (transparence) 1 = opaque, 0,5 = semi-transparent, 0 = entièrement transparent

hsl (151, 100%, 41%) - pas de canal alpha

rgba (0, 209, 108, 1) - rgb avec un canal alpha

rgb (0, 209, 108) - pas de canal alpha