Modifier / Ajouter la coloration syntaxique d'une langue dans Sublime 2/3


94

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.

Réponses:


95

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.

jQuery mis en évidence avec le thème Neon

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:

JavaScriptSuivant

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 installé le contrôle de package et votre meilleur JavaScript. Comment puis-je définir le schéma sur le vôtre? Il n'est pas répertorié sous Schéma de couleurs.
Niklas

Avez-vous également installé "Neon Theme" via Package Control? Une fois que vous avez, allez à Preferences -> Color Scheme -> Neon Themeet choisissez Neon.
MattDMo

1
Si vous installez des packages via Package Control, ils sont automatiquement stockés au bon endroit, dans ce cas %APPDATA%\Sublime Text 3\Installed Packages\Neon Theme.sublime-package. La sélection de l'option de menu ci-dessus mettra également à jour votre Packages\User\Preferences.sublime-settingsfichier automatiquement.
MattDMo

@MattDMo - wow, c'était très complet. J'essaie juste de faire un peu de couleur de syntaxe et de renforcement d'édition pour un balisage de type XML. Mais avoir du mal à comprendre comment démarrer avec quelque chose de super simple. Où pourrais-je commencer à faire de l'ingénierie inverse ou, mieux encore, obtenir un tutoriel sur la création d'un.
Timothy T.

1
@ nmz787 si vous ne voulez que le .sublime-syntaxfichier, téléchargez-le et copiez-le ~/.config/sublime-text-3/Packages/User. Il sera alors disponible dans le menu de syntaxe tout en bas à droite de la fenêtre Sublime, soit seul (il dira "SystemVerilog") ou sous le sous- Usermenu, selon votre configuration. Si vous voulez tout le package, assurez-vous que Package Control a été installé correctement, ouvrez la palette de commandes, tapez pci , appuyez sur Entrée, recherchez SystemVeriloget appuyez sur Entrée. Vous ne devriez pas avoir à renommer des fichiers ou quoi que ce soit - pourquoi faisiez-vous cela?
MattDMo

31

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>.


1
oui, c'est le contournement maladroit auquel nous devons tous nous habituer à l'approche du nouveau monde courageux de Sublime Text 3. Je suis sûr qu'il y aura bientôt des plugins qui permettront une .sublime-packageédition beaucoup plus facile ...
MattDMo

9
Ce plugin est ici - il est appelé PackageResourceVieweret peut être installé via Package Control. Cela rend le travail avec les .sublime-packagefichiers Sublime Text 3 beaucoup plus facile, et je le recommande vivement si vous prévoyez de faire n'importe quel type de personnalisation de ST3.
MattDMo

1
Où avez-vous trouvé la référence de ces règles?
qodeninja

2
^ Ce qu'ils ont dit. De plus, je ne comprends pas quand / où vous "sélectionnez" le mot-clé "this" dans le code, pourquoi cela ne colore que le mot-clé "this". Pouvez-vous l'expliquer?
Zelphir Kaltstahl


16

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.


Je n'y vois rien sur les couleurs. Cependant, votre réponse était la plus proche de ce dont j'avais besoin. Au lieu de cela, j'ai édité le Monokai.tmTheme conformément à ce message du forum SublimeText afin de faire fonctionner la coloration syntaxique JSON.
jmort253

1
Les instructions spécifiques de cette réponse concernaient l'édition de la définition de la langue. Bien que cela ne vous permette pas de modifier directement les couleurs d'un jeu de couleurs, cela vous permettra de changer la façon dont certains types d'étendues sont trouvés et donc la façon dont le jeu de couleurs interprète (et colore) la langue. Le plugin ouvrira tout type de ressource dans Sublime afin que vous puissiez de la même manière modifier les schémas de couleurs directement avec le même outil. Par exemple, j'aime le jeu de couleurs Tomorrow Night, alors j'ouvrirais Tomorrow-Night.tmTheme avec ce plugin pour modifier ce jeu de couleurs.
chawkinsuf

5

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

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


Juste ce que je cherchais: View -> Syntax -> Open all with current extension as...définir par exemple des *.stanfichiers avec la coloration de la syntaxe C ++.
BoltzmannBrain

0

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]

  1. 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)"
        },
  1. Recherchez la chaîne "blue6":pour trouver la section des définitions de variable de couleur. Je l'ai trouvé dans la "variables"section.

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

  3. 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").
  4. 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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.